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

猜你喜欢
联络方式:
深圳 · 龙岗 · 大运软件小镇22栋302-308
电话:400 1828 580
邮箱:szhulian@qq.com



-
网站开发团队面临的问题有哪些?
应用安全不能只依靠防火墙,必须要在应用开发阶段采取适当的安全控制措施,使得应用在发布上线前就具备较好的安全性,避免人为失误造成安全隐患。
-
让您在网站设计中容易中招的几个坑
在网站设计中,设计师常常会注重个性化的表达和对趋势的迎合,不过在众多的网站中,在对细节和整体策略上,设计师们依然很有很大的提升空间......
-
我们能改变一个项目,却改变不了弱于后端这个事实
做过web开发的程序员朋友都知道,一般都是分前端开发工程师和后端开发工程师,一般很少有前后端通吃的全栈工程师,前端工程师与后端工程师职责分工都是相当明确的,近几年都是采取前后端完全分离的技术...
-
史上最严“微信外链新规”正式实施!社交电商或将迎来“冷冬”
10月28日,微信安全中心发布《微信外链违规内容打击公示》,正式执行新的外部链接内容管理规范。这一次的《微信外部链接内容管理规范》修订版(以下简称“新规”)对违规使用用户头像,诱导、误导下载/跳转,好友助力、加速、砍价、任务收集等违规活动、违规拼团等方面内容作出了新的规范。
-
js箭头函数和普通函数的区别是什么?
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。下面我们就来看一下JavaScript中箭头函数和普通函数的区别。箭头函数和普通函数的区别...