jQuery對象與DOM對象

前言

編寫任何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 包裝集的概念,將極大的加快我們的學習速度。只要能夠區分這兩者, 就能夠在寫程序時變得清清楚楚。