前言

編寫任何JavaScript 程式我們要先取得對象，jQuery 選擇器能徹底改變我們平常取得物件的方式，可以取得幾乎任何語意的對象，例如「擁有title 屬性並且值中包含test 的<a>元素”，完成這些工作只需要編寫一個jQuery 選擇器字串，學(xué)習(xí)jQuery 選擇器是學(xué)習(xí)jQuery 最重要的一步。

Dom 物件和 jQuery 包裝集

無論是在寫入程式還是看 API 文檔，我們要隨時注意區(qū)分 Dom 物件和 jQuery 包裝集。

1. Dom 物件

在傳統(tǒng)的JavaScript 開發(fā)中，我們都是先取得Dom 對象，例如：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

我們經(jīng)常使用document .getElementById方法根據(jù)id 取得單一Dom 對象，或使用document.getElementsByTagName方法根據(jù)HTML 標(biāo)籤名取得Dom 物件集合。

另外在事件函數(shù)中，可以透過在方法函數(shù)中使用this引用事件觸發(fā)物件（但在多重播放事件函數(shù)中IE6 有問題），或是使用event物件的target（Firefox）或srcElement（IE6 ）取得到引發(fā)事件的Dom 物件。

注意我們這裡取得到的都是 Dom 物件,Dom 物件也有不同的型別例如input,div,span等。 Dom 物件只有有限的屬性和方法。

2. jQuery 包裝集

#jQuery 包裝集可以說是 Dom 物件的擴充。在jQuery 的世界中將所有的對象，無論是一個還是一組，都封裝成一個jQuery 包裝集，例如取得包含一個元素的jQuery 包裝集：

var jQueryObject = $("#testDiv");

jQuery 包裝集都是作為一個對象一起調(diào)用的。 jQuery 包裝集擁有豐富的屬性與方法。

3. Dom 物件與 jQuery 物件的轉(zhuǎn)換

（1）Dom 轉(zhuǎn) jQuery 包裝集

如果要使用 jQuery 提供的函數(shù)，就要先建構(gòu) jQuery 包裝集。我們可以使用本文即將介紹的 jQuery 選擇器直接建構(gòu) jQuery 包裝集，例如：

$("#testDiv");

上面語句建構(gòu)的包裝集只含有一個 id 是 testDiv 的元素。

或我們已經(jīng)取得了一個Dom 元素,例如:

var div = document.getElementById("testDiv");

上面的程式碼中div 是一個Dom 元素, 我們可以將Dom 元素轉(zhuǎn)換成jQuery 包裝集:

var domToJQueryObject = $(div);

（2）jQuery 包裝集轉(zhuǎn)Dom 物件

jQuery 包裝集是一個集合, 所以我們可以透過索引器存取其中的某一個元素:

var domObject = $("#testDiv")[0];

注意, 透過索引器傳回的不再是jQuery 包裝集, 而是一個Dom 物件!

jQuery 包裝集的某些遍歷方法,例如each()中, 可以傳遞遍歷函數(shù), 在遍歷函數(shù)中的this 也是Dom 元素,例如:

$("#testDiv").each(function() {
  alert(this)
});

如果我們要使用jQuery 的方法操作Dom 物件,怎麼辦? 用上面介紹過的轉(zhuǎn)換方法即可:

$("#testDiv").each(function() {
  $(this).html("修改內(nèi)容")
});

小結(jié):?先讓大家明確Dom 物件和jQuery 包裝集的概念,將極大的加快我們的學(xué)習(xí)速度。只要能夠區(qū)分這兩者, 就能夠在寫程序時變得清清楚楚。