前言

編寫任何 JavaScript 程序我們要首先獲得對(duì)象，jQuery 選擇器能徹底改變我們平時(shí)獲取對(duì)象的方式，可以獲取幾乎任何語(yǔ)義的對(duì)象，比如“擁有 title 屬性并且值中包含 test 的<a>元素”，完成這些工作只需要編寫一個(gè) jQuery 選擇器字符串，學(xué)習(xí) jQuery 選擇器是學(xué)習(xí) jQuery 最重要的一步。

Dom 對(duì)象和 jQuery 包裝集

無論是在寫程序還是看 API 文檔，我們要時(shí)刻注意區(qū)分 Dom 對(duì)象和 jQuery 包裝集。

1. Dom 對(duì)象

在傳統(tǒng)的 JavaScript 開發(fā)中，我們都是首先獲取 Dom 對(duì)象，比如：

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

我們經(jīng)常使用document.getElementById方法根據(jù) id 獲取單個(gè) Dom 對(duì)象，或者使用document.getElementsByTagName方法根據(jù) HTML 標(biāo)簽名獲取 Dom 對(duì)象集合。

另外在事件函數(shù)中，可以通過在方法函數(shù)中使用this引用事件觸發(fā)對(duì)象（但是在多播事件函數(shù)中 IE6 存在問題），或者使用event對(duì)象的target（Firefox）或srcElement（IE6）獲取到引發(fā)事件的 Dom 對(duì)象。

注意我們這里獲取到的都是 Dom 對(duì)象,Dom 對(duì)象也有不同的類型比如input,div,span等。Dom 對(duì)象只有有限的屬性和方法。

2. jQuery 包裝集

jQuery 包裝集可以說是 Dom 對(duì)象的擴(kuò)充。在 jQuery 的世界中將所有的對(duì)象，無論是一個(gè)還是一組，都封裝成一個(gè) jQuery 包裝集，比如獲取包含一個(gè)元素的 jQuery 包裝集：

var jQueryObject = $("#testDiv");

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

3. Dom 對(duì)象與 jQuery 對(duì)象的轉(zhuǎn)換

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

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

$("#testDiv");

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

或者我們已經(jīng)獲取了一個(gè) Dom 元素,比如:

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

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

var domToJQueryObject = $(div);

（2）jQuery 包裝集轉(zhuǎn) Dom 對(duì)象

jQuery 包裝集是一個(gè)集合, 所以我們可以通過索引器訪問其中的某一個(gè)元素:

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

注意, 通過索引器返回的不再是 jQuery 包裝集, 而是一個(gè) Dom 對(duì)象!

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

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

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

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

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