您现在的位置:首页 --> JavaScript --> jQuery对象和DOM对象小结
jQuery对象和DOM对象小结
浏览:1119次 出处信息
在使用jQuery的时候经常会将jQuery对象和DOM对象弄混,在搞不清楚关系的时候,经常会将两者的方法混用、乱用。
1、DOM对象和jQuery对象的关系
DOM即文档对象模型,每一份DOM都可以表示成一棵树,可以通过javascript中的getElementByTagName或者getElementById来获取元素节点,像这样得到的DOM元素就是DOM对象,DOM对象可以使用javascript中的方法。
jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。
$('#foo').html(); // 获取id为foo的元素内的html代码,html()是jQuery的方法。 document.getElementById('foo').innerHTML; // 这是DOM对象的方法,与上面的代码等价。
2、jQuery对象和DOM对象的相互转换
(1)jQuery对象转为DOM对象
jQuery对象是一个类似数组的对象,可以通过[index]的方法来得到相应的DOM对象,同时jQuery本身也提供了一个get(index)方法来获取DOM对象。所以,jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。
var $cr = $('#cr'); // 变量$cr表示一个jQuery对象 var cr = $cr[0]; // 变量cr表示一个DOM对象, 利用[index]方法 cr = $cr.get(0); // 利用jQuery提供的get(index)方法
(2)DOM对象转为jQuery对象
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,平时用到的jQuery对象都是通过$()函数制造出来的。
var cr = document.getElementById('cr'); var $cr = $(cr); // $cr表示一个jQuery对象
通过以上方法就可以任意的转换jQuery对象和DOM对象,只有转换为了相应的对象,才能使用相应对象中的方法。
建议继续学习:
- PHP Simple HTML DOM Parser 是一个不错的html/xml分析类 (阅读:5769)
- phpQuery:像jQuery一样处理DOM (阅读:3315)
- 仅100行的JavaScript DOM操作类库 (阅读:3364)
- 对大量子节点DOM操作的最佳实践方式 (阅读:3129)
- 获取Dom元素的X/Y坐标 (阅读:2841)
- DOM元素上jQuery事件几点学习 (阅读:2415)
- React入门:关于虚拟DOM(Virtual DOM) (阅读:2543)
- JS操作iframe里的dom (阅读:2336)
- DOM Storage全解析 (阅读:2261)
- 页面DOM加载顺序和用户视觉浏览顺序的一致性 (阅读:2230)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:jQuery Ajax请求下载文件资源 >>
文章信息
- 作者:叶德华的博客 来源: 叶德华的博客
- 标签: DOM
- 发布时间:2016-02-09 23:31:26
建议继续学习
近3天十大热文
- [69] 如何拿下简短的域名
- [67] Go Reflect 性能
- [63] Oracle MTS模式下 进程地址与会话信
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [60] 【社会化设计】自我(self)部分――欢迎区
- [59] 图书馆的世界纪录
- [57] android 开发入门
- [55] 视觉调整-设计师 vs. 逻辑
- [48] 界面设计速成
- [47] 读书笔记-壹百度:百度十年千倍的29条法则