第1章jQuery起步

前言

1.從 jQuery(JavaScript + Query) 名稱也可以看出，使用CSS + XPath 選擇器查詢頁面元素是該框架賴以起家的絕活。

2.在可能的條件下，建議讀者不要完全拋棄 JavaScript 原生的選擇器方法，適當混合使用 jQuery 、DOM 和 JavaScript 能夠提升程式的執行效率。例如 ，offset (獲取頁面上的各種尺寸和位置資料)、建立和插入 DOM 節點的方法 (如 append，before) 都是 JQuery 速度的瓶頸，在必要的情況下，讀者完全不用它們，而直接使用 DOM 原生方法會更加高效。

3.在預設情況下，我們都會使用 jQuery 的別名 $ 來表示 jQuery 名字空間，同時直接把呼叫的函式放在 $() 函式中，該函式實際上是 $(“document”).ready() 方法的簡寫。例如，

$(function(){

$(“div”).after(“<p>最後一段文字</p>”);

});

實際上上面的示例程式碼應該是下面的形式。

$(document).ready(function(){

$(“div”).after(“<p>最後一段文字</p>”);

});

第1章 jQuery 起步

1.一般情況下，所有 jQuery 程式碼建議都包含在 $() 函式中，當然也可以不包含在 $() 函式中，這與 JavaScript 程式碼應該放在 window.onload 事件處理函式中的道理是一樣的。

2.jQuery 建構函式

jQuery 把所有的操作都包裝在一個 jQuery() 函式中，形成了統一(也是惟一)的操作入口，這為 jQuery 操作降低了門檻。jQuery() 建構函式能夠接收任意型別的資料，但是能夠解析的引數包括下面4種型別。

(1) jQuery(expression, context)

引數為一個表示式，該表示式可以是 ID 、DOM 元素名、CSS 表示式 和 XPath 表示式等，jQuery 將根據表示式匹配文件中的元素，然後把找到的元素包裝到一個 jQuery 物件中返回。例如：

jQuery(“div#wrap>p:first”).addClass(“red”);

在表示式字串中，div#wrap 表示 id 為 wrap 的div 元素，先在該元素中匹配子元素 p，再篩選出第一個 p 元素。”div#wrap>p:first” 是 CSS 表示式，如果使用 XPath 表示式表示，則應該為 “div#wrap/p:first”；:first 是一個偽類，表示其中的第一個；addClass() 為 jQuery 物件，用來新增 CSS 樣式類的方法，相反操作的方法為 removeClass()。

(2)jQuery(html)

參數列示一個 HTML 結構字串，此時 jQuery 將建立一個對應結構的 HTML 文件片段。例如：

$(`ul`).append($(`<li>new item</li>`));

其中 $(`<li>new item</li>`) 將其中的字串轉換為 DOM 物件，然後通過 append() 方法加入到 ul 元素的最後。

(3)jQuery(elements)

引數是一個 DOM 元素物件或者集合，此時 jQuery 將把 DOM 元素或集合中的 DOM 元素封裝為 jQuery 物件。例如：

$(document).ready(function(){

$(`ul`).css(`color`, `red`);

});

在上面的示例中，jQuery 建構函式把 document 物件封裝為一個 jQuery 物件，然後呼叫 ready() 方法。ready 事件處理函式為 document 物件繫結一個事件，當頁面初始化之後將 ul 的顏色設定為紅色。

(4)jQuery(fn)

引數是一個處理函式。由於 $(document).ready() 頻繁使用，所以 jQuery 又使用 $(fn) 來代替，fn 表示處理函式。ready 處理函式在文件內容完全載入之後執行，因此不需要等待外部連結檔案載入完成，響應要比 load 事件早。例如，下面程式碼就是 jQuery(fn) 運用。

$(function(){

$(`ul`).css(`color`, `red`);

});

3.jQuery 鏈式語法

鏈式程式碼已經成為 jQuery 非常流行的一個特點，在使用鏈條方式編寫程式碼時，可能會用到 eq()、filter() 的jQuery 方法改變鏈式方法的物件，但是藉助 jQuery 的 end() 方法又能夠恢復回最初的 jQuery 物件，從而可以實現繼續執行鏈式操作。注意，有幾個 jQuery 的方法並不返回 jQuery 物件，所以鏈式操作就不能繼續下去，如 get() 就不能像 eq() 那樣使用。

4.jQuery 選擇器

jQuery 選擇器按照功能主要分為選擇和過濾，並允許配合使用，可以同時使用組合成一個選擇器字串。兩者主要的區別如下：

(1)過濾作用的選擇器是利用指定條件從前面匹配的內容中篩選。過濾選擇器也可以單獨使用，此時表示從全部 “*” 元素中篩選。如：

$(“:[title]”)

等同於

$(“*:[title]”)

(2)選擇功能的選擇器則不會有預設的範圍，因為它的作用是選擇而不是過濾。

例如，在下面的示例中，$(“input[type=`button`]”) 選擇器可以匹配文件中 type 屬性值為 button 的 input 元素，這個表示式是 CSS 表示式。

5.如果只給 css() 方法傳遞一個字串引數，則表示讀取樣式值，如 css(`color`) 就表示取得當前 jQuery 物件的樣式屬性 color 的值。而如果給它傳遞兩個引數，則表示設定樣式值。jQuery 物件定義了很多類似的方法，如 val() 、 text() 、 html() 、 click() 、 change() 等。