jQuery學習筆記（一） —— 選擇器與事件

時間 2019-11-06

原文原文鏈接

1、前言與基礎
css

jQuery是JavaScript的一個拓展庫，可以比原生JavaScript代碼更簡便地進行HTML頁面的DOM（Document Object Model，文件對象模型）操做，即對頁面各類標籤元素進行選擇並操做，經過jQuery，能夠實現高級的頁面互動和炫酷的動畫效果。要想使用jQuery，必需要在HTML頁面引入jQuery的源代碼文件。html

JQuery的源代碼文件有兩種：jquery

compressed&production，編譯過而且進行壓縮的jQuery文件，用於實際網站開發，編譯和壓縮可以加快代碼加載。文件名通常爲jquery-1.10.2.min.js，1.10.2是版本號。api
uncompressed&development，未經編譯和壓縮，具備可讀性，用於調試。ide

在HTML頁面引入jQuery文件的方法，在<head>標籤中引入對應的JQuery文件：函數

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

2、JQuery的基本格式動畫

jQuery的語句被包含在以下的結構中：
網站

$(document).ready(function(){
    //此處填寫JQuery函數
});

其中，$(document).ready()是jQuery的文檔就緒事件，腳本片斷中的jQuery函數大多數被包含在$(document).ready()函數中。這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。this

還有一種更加簡潔的文檔就緒事件格式：spa

$(function(){
    //此處填寫JQuery函數
});

在$(document).ready()中，具體的jQuery語句格式以下：

$(selector).action();

$(selector)是HTML元素選擇器，用於查詢並選擇頁面上的HTML元素，括號裏能夠是HTML標籤的名稱，對應的class或id，好比"p"、".myclass"或者"#myID"。action()是方法，包括效果方法、HTML/CSS方法等，用於對選中的HTML元素進行操做，能夠是hide()、show()等等。

jQuery中還有一種事件方法，區別於通常的方法：

$(selector).event(function(){
    /*此處填寫對元素的操做*/
})

event()是事件，表示選中的元素的觸發事件，能夠是click()、mouseenter()等等。

通常方法與事件方法結合起來使用：

$(document).ready(function(){
    $(selector).event(function(){
        $(selector).action();
    });
});

3、實例

實例一、點擊<p>元素字段後，該元素隱藏：

HTML代碼以下：

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>
<body>
    <p>setence</p>
</body>
</html>

對應的JQuery代碼以下：

$(document).ready(function(){
    $("p").click(function(){ //$("p")指選擇器選擇了<p>元素，click()是指鼠標左鍵單擊觸發的事件。
        $(this).hide(); //$(this)是指選擇器選擇的元素自己，hide()是JQuery中隱藏效果方法。
    });
});

實例二、點擊內容爲class 1的<p>元素後，其後面出現一段段落，並彈出對話框；點擊內容爲class 2的<p>元素後，其樣式發生變化，並彈出對話框。此實例混合了jQuery語法，原生JavaScript代碼。

HTML代碼以下：

<html>
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>
<body>
    <p class="1">class1</p>
    <p class="2">class2</p>
</body>
</html>

對應的JQuery代碼以下：

$(document).ready(function(){
    $(".1").click(function(){
        var x = "<p>this is class 1!</p>"; //能夠繼續使用JavaScript的原生語法，定義變量。
        $(".1").after(x);
        alert("NOTATION:just now you click class 1!"); //調用JavaScript原生函數alert()。
    }); //不一樣函數之間用「 ; 」分隔開。
    $(".2").click(function(){
        $(".2").css({"color":"red","background-color":"black"});
        alert("NOTATION:just now you click class 2!");
    });
});

參考來源：

菜鳥教程 - jQuery教程

jQuery官方文檔