jQuery对象和DOM对象的区别

2017-12-21 09:40:00 2919 1 编辑:深正互联 来源:互联网

DOM对象是Document Object Model的简称,中文翻译为文档对象模型。DOM是HTML与XML的应用编程接口API,DOM对象将整个页面映射为一个由层次节点组成的文件。

jQuery对象是通过jQuery框架包装DOM对象之后产生的一个新对象,从本质分析它仅是DOM对象的集合,因此,我们把DOM对象看成一个独立的个体,而jQuery对象是多个DOM对象组成的数据集合。

jQuery对象是DOM元素的数组,也成类数组,DOM对象就是单个DOM元素。

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

jQuery 框架为jQuery定义了独立使用的方法和属性,jQuery无法直接调用DOM对象的方法。DOM对象也无法直接调用JQuery对象的方法和属性。

把jQuery对象转换为DOM对象

把DOM对象转换为jQuery对象

把jQuery对象转换为DOM对象

第一种:借助数组下标来读取jquery对象集合中的某个DOM元素对象

<script src="images/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

var $li = $("li");        //返回jQuery对象

var li= $li[0];            //返回DOM对象

alert(li.innerHTML);    //innerHTML是DOM属性

})

</script>

<ul>

<li>列表1</li>

<li>列表2</li>

<li>列表3</li>

</ul>

第二种,借助jQuery对象的get()方法。为get()方法传递一个下标值,即可从jquery对象中取出一个DOM对象元素。

<script src="images/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

var $li = $("li");        //返回jQuery对象

var li= $li.get(0);            //返回DOM对象

alert(li.innerHTML);    //innerHTML是DOM属性

})

</script>

把DOM对象转换为jQuery对象

对于DOM对象来说,直接把它传递给$()函数即可,jQuery对象会把自动把它包装成jquery对象,然后它就可以自由调动jQuery定义的方法

<script src="images/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

var li = document.getElementsByTagName("li");       //获取所有的li元素

var $li= $(li[0]);           //把第一个li元素封装成jquery对象

alert($li.html()); //调用jQuery对象的方法

})

</script>

<script src="images/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

var li = document.getElementsByTagName("li");       //获取所有的li元素

var $li= $(li);          //把所有li元素封装成jquery对象

alert($li.html()); //调用jQuery对象的方法

})

</script>

想要了解更多最新最有趣的程序心得?赶快加入深正互联和我们一起探讨吧~

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通