jQuery对象与DOM对象相互转换详解

jQuery对象与DOM对象的区别

jQuery对象是由jQuery封装DOM对象后生成的特有对象。它拥有jQuery库提供的各种方法，但不能直接调用原生DOM的方法。例如，执行$("#img").attr("src","test.jpg");时，$("#img")即为一个jQuery对象。

DOM对象是指JavaScript原生操作的对象。这类对象可以使用JavaScript内置的方法，却无法使用jQuery提供的方法。例如，document.getElementById("img").src = "test.jpg";中的document.getElementById("img")就是一个DOM对象。

语句$("#img").attr("src","test.jpg");与document.getElementById("img").src = "test.jpg";功能等价且正确。然而，尝试使用$("#img").src = "test.jpg";或document.getElementById("img").attr("src","test.jpg");则会报错，因为前者混淆了jQuery方法与DOM属性，后者混淆了DOM对象与jQuery方法。

以this为例，在jQuery代码中常有人尝试直接写this.attr("src","test.jpg");，这会导致错误。原因是this指向的是当前的DOM对象，而.attr()是jQuery方法，两者不匹配。解决方法是将this转换为jQuery对象，即写成$(this).attr("src","test.jpg");。

DOM对象转jQuery对象

接下来介绍具体的转换方式，首先是从DOM对象转换为jQuery对象。

对于已经存在的DOM对象，只需使用$()函数将其包裹，即可得到对应的jQuery对象，语法为$(DOM对象)。注意，var用于定义变量。

具体示例如下：

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

完成转换后，该对象即可自由使用jQuery提供的各类方法。

jQuery对象转DOM对象

其次介绍从jQuery对象转换为DOM对象的方法。

主要有两种转换方式：使用[index]索引访问或使用.get(index)方法。

(1) jQuery对象本质上是一个数据集合，可以通过[index]索引方式获取对应的DOM对象。

具体示例如下：

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

(2) jQuery库本身也提供了.get(index)方法，用于获取对应的DOM对象。

具体示例如下：

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

通过上述方法，可以实现jQuery对象与DOM对象的自由转换。需要再次强调：只有DOM对象才能调用DOM中的方法，而jQuery对象不能直接调用DOM方法。