前言
編寫任何JavaScript 程式我們要先取得對象,jQuery 選擇器能徹底改變我們平常取得物件的方式,可以取得幾乎任何語意的對象,例如「擁有title 屬性並且值中包含test 的<a>元素”,完成這些工作只需要編寫一個jQuery 選擇器字串,學習jQuery 選擇器是學習jQuery 最重要的一步。
Dom 物件和 jQuery 包裝集
無論是在寫入程式還是看 API 文檔,我們要隨時注意區分 Dom 物件和 jQuery 包裝集。
1. Dom 物件
在傳統的JavaScript 開發中,我們都是先取得Dom 對象,例如:
var div = document.getElementById("testDiv"); var divs = document.getElementsByTagName("div");
我們經常使用document .getElementById方法根據id 取得單一Dom 對象,或使用document.getElementsByTagName方法根據HTML 標籤名取得Dom 物件集合。
另外在事件函數中,可以透過在方法函數中使用this引用事件觸發物件(但在多重播放事件函數中IE6 有問題),或是使用event物件的target(Firefox)或srcElement(IE6 )取得到引發事件的Dom 物件。
注意我們這裡取得到的都是 Dom 物件,Dom 物件也有不同的型別例如input,div,span等。 Dom 物件只有有限的屬性和方法。
2. jQuery 包裝集
#jQuery 包裝集可以說是 Dom 物件的擴充。在jQuery 的世界中將所有的對象,無論是一個還是一組,都封裝成一個jQuery 包裝集,例如取得包含一個元素的jQuery 包裝集:
var jQueryObject = $("#testDiv");
jQuery 包裝集都是作為一個對象一起調用的。 jQuery 包裝集擁有豐富的屬性與方法。
3. Dom 物件與 jQuery 物件的轉換
(1)Dom 轉 jQuery 包裝集
#如果要使用 jQuery 提供的函數,就要先建構 jQuery 包裝集。我們可以使用本文即將介紹的 jQuery 選擇器直接建構 jQuery 包裝集,例如:
$("#testDiv");
上面語句建構的包裝集只含有一個 id 是 testDiv 的元素。
或我們已經取得了一個Dom 元素,例如:
var div = document.getElementById("testDiv");
上面的程式碼中div 是一個Dom 元素, 我們可以將Dom 元素轉換成jQuery 包裝集:
var domToJQueryObject = $(div);
(2)jQuery 包裝集轉Dom 物件
jQuery 包裝集是一個集合, 所以我們可以透過索引器存取其中的某一個元素:
var domObject = $("#testDiv")[0];
注意, 透過索引器傳回的不再是jQuery 包裝集, 而是一個Dom 物件!
jQuery 包裝集的某些遍歷方法,例如each()中, 可以傳遞遍歷函數, 在遍歷函數中的this 也是Dom 元素,例如:
$("#testDiv").each(function() { alert(this) });
如果我們要使用jQuery 的方法操作Dom 物件,怎麼辦? 用上面介紹過的轉換方法即可:
$("#testDiv").each(function() { $(this).html("修改内容") });
小結: 先讓大家明確Dom 物件和jQuery 包裝集的概念,將極大的加快我們的學習速度。只要能夠區分這兩者, 就能夠在寫程序時變得清清楚楚。
下一節