Query对象和DOM对象的相互转换 转贴

Query对象和DOM对象的相互转换

作者：[e-mail]
日期：2012-01-04

---

 

jQuery对象是jQuery库封装DOM对象而成的javascript对象，是jQuery库特有的。jQuery对象可以有其对应的DOM对象，但是与其DOM对象有很大的区别。

jQuery对象可以使用jQuery库的任何方法，而不能使用相应DOM对象的任何方法。当然DOM对象也不能使用jQuery库里的方法。例如：

    $("#foo").html(); // 获取id为foo的元素内的html代码。html()是jQuery里的方法。

这段代码等同于：

    document.getElementById("foo").innerHTML;
        

所以，二者是不可以混用的，更不能混用其方法。

定义变量风格

从上面可以看出：作为jQuery的使用者，必须时刻清醒自己使用的是jQuery对象还是DOM对象。为此，通常约定好下面的变量定义风格：

    var $variable = jQuery对象; // jQuery变量名通常以$开头。
    

    var variable = DOM对象; // DOM对象的变量名别用$开头。
    

DOM对象转换成jQuery对象

二者是可以相互转换的。

假定网页中有个checkbox标签：

    <input type="checkbox" id="chk1" />
        

下面代码是普通DOM对象操作方法，chk1就是那个checkbox的DOM对象。

    alert(chk1.checked);        
        

那么如何把它转换成jQuery对象呢？只需要用$()把DOM对象包起来，就可以获得其对应的jQuery对象了。示例代码如下：

    var $chk1 = $("#chk1"); // 用$("#id")把DOM对象包装起来就获得其对应的jQuery对象
    alert($chk1.is(":checked")); // 等同于：alert(chk1.checked);        
         

上面代码中$()函数的参数是CSS的ID选择器(jQuery选择器完全继承了CSS选择器)，下面这段代码中则是javascript对象变量：

    var chk2 = document.getDocumentById("chk1");
    var $chk2 = $(chk2);
    alert($chk2.is(":checked")); // 等同于：alert(chk2.checked);         
         

jQuery对象转换成DOM对象

jQuery提供了两种方法可以将jQuery对象转换成DOM对象，即[index]和get(index)。

第一种方法：
jQuery对象是一个数组对象，可以通过[index]的方法得到其相应的DOM对象。示例代码如下：

    var $chk1 = $("chk1"); // 获得chk1的jQuery对象
    var chk1 = $chk1[0]; // 从jQuery对象获得其相应DOM对象        
    alert(chk1.checked);
        

第二种方法：
jQuery提供了get(index)方法可以得到相应的DOM对象。示例代码如下：

    var $chk1 = $("chk1"); // 获得chk1的jQuery对象
    var chk1 = $chk1.get(0); // 从jQuery对象获得其相应DOM对象        
    alert(chk1.checked);
        

最后：在大多数时候，编码用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。