jQuery DOM对象区别与联系

Posted 2020-10-03 how-to-say-how-to-do

对两种对象类型的定义，只要能理解并转换成自己的说法就可以，不用死板按照资料所写

jQuery对象（jq对象）其实就是通过jquery类库选择器获得的对象（或者说是通过$获取的对象或者说是通过jquery包装dom对象后产生的对象（可参照下面的对象转换理解））；

　　jquery对象是jquery独有，可以使用jquery里面的方法，但不能使用dom的方法；

示例：

　　$("#img").attr("src", "test.jpg");其中$("#img")就是jquery对象；

DOM对象（js对象）就是通过传统方法（javascript）获得的对象或者说是javascript固有的一些对象操作或者说是通过document获得的对象；

　　DOM对象能使用javascript固有的方法，但不能使用jquery里面的方法；

示例：

　　document.getElementById("img").src = “test.jpg"；其中document.getElementById("img")就是DOM对象；

需要注意的是：$("#img").attr("src", "test.jpg")和document.getElementById("img").src = “test.jpg"效果是一样的，

但是document.getElementById("img").attr("src", "test.jpg") 或者$("#img").src = “test.jpg"是错误的；不要混淆一点是，同一个javascript脚本里面可以同时出现jq对象或者js对象，只是没有转换对象是不能互相调用不是自己对象的方法；

还有一种情况，就是this的使用，很多人在写jquery时经常这样写：this.attr("src","test.jpg")；可是就是出错，那是因为this是dom对象，而.attr("src","test.jpg")是jquery方法，当然出错；

如果要解决这个问题，只需将dom对象转成jquery对象，如：$(this).attr("src","test.jpg");

 

下面就谈谈jq对象、js对象的转换及使用

以前我一直认为jquery的$("#id")和document.getElementById("id")得到的结果是一样的，其实不然，可以做如下测试：

1、alert($("#div"))弹出[object Object]

2、alert(document.getElementById("div"))弹出[object htmlDivElement]

3、alert($("#div")[0])或者alert($("#div").get(0))弹出[object HTMLDivElement]

 

1、DOM对象转jquery对象

对于已经是一个dom对象，只需要用$()把dom对象包装起来即可，如：$(dom对象)

示例：

　　var obj=document.getElementById("id");　　 //dom对象
　　var $obj = $(obj);　　 //转换成jquery对象

2、jquery对象转dom对象

有两种方式（通过索引）：[index] 和 .get(index)；

1）jquery对象是一个数组对象，可以通过[index]方法得到相应dom对象

示例：

　　var $obj=$("#id");　　 //jquery对象
　　var obj = $obj[0]; 　　//dom对象 也可写成 var obj=$obj.get(0);

2）jquery本身提供，通过.get(index)方法得到相应的dom对象

示例：

　　var $obj=$("#id");　　 //jquery对象

　　var obj = $obj.get(0); 　　//dom对象 也可写成 var obj=$obj[0];

再次强调一下：DOM对象只能能使用javascript固有的方法，但不能使用jquery里面的方法；同时，jquery对象智能使用jquery的方法，不能使用dom对象方法；

另外以下几种写法都是正确的：

$("#id").html();

$("#id").get(0).innerHTML;

$("#id")[0].innerHTML;