第1章jQuery起步

微wx笑發表於2013-12-28

前言

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() 等。


相關文章