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 包装集的概念,将极大的加快我们的学习速度。只要能够区分这两者, 就能够在写程序时变得清清楚楚。