关于jquery对象与DOM对象

Posted 2023-02-06 faraway2004

学习jquery，需要对DOM对象和jquery对象进行区分。

dom树

dom对象

jquery对象

1.DOM对象

DOM(Document Object Model)，即文档对象模型，DOM可以表示成一棵树。

DOM的节点可以通过javascript中的getElementByTagName或者getElementById来获取元素节点，通过上述方法得到的就是DOM对象，DOM对象可以使用javascript中的方法，比如：obj.innerhtml

dom对象

2.jquery对象

jquery对象就是通过jquery包装DOM对象后产生的对象。

jquery对象是jquery独有的，如果一个对象是jquery对象，那么就可以使用jquery里的方法。例如：

$("#.myClass").html();//获取泪属性为myClass的元素内的html代码，html()是jquery里的方法

这里的html()和DOM使用的innerHTML具有相同的效果

jquery对象

---

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

3.jquery对象转为DOM对象

jquery对象不能使用DOM中的方法，如果不得不使用DOM中的方法时，就需要将jquery对象转换成DOM对象。jquery提供了两种方法，即：[index]和get(index)

• 1.jquery对象是一个类似数组的对象，可以通过[index]的方法得到对应的DOM对象

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

var obj = $obj[0];//DOM对象

alert(obj.checked);//检测是否选中

• 2.另一种方法是jquery本身提供的，通过get(index)方法得到对应的DOM对象

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

var obj = $obj.get(0);//DOM对象

alert(obj.checked);//检测是否选中

4.DOM对象转成jquery对象

只需要用$()把DOM对象包装起来，就可以获得一个jquery对象了，方式为$(DOM对象)

var obj = document.getElementById("chk");//DOM对象

var $obj = $(obj);//jquery对象

注意：DOM对象才能使用DOM中的方法，jquery对象不可以使用DOM中的方法。

5.实例代码

运行效果：

---

以上即为jquery对象和DOM对象的相关知识，需要在实际使用过程中仔细体会二者间的差异和不同用途。