jQuery对象与DOM对象之间的转换方法


Posted in Javascript onApril 15, 2010

什么是jQuery对象?
---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。
比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:
document.getElementById("id").innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。
既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是jQuery对象,那么我们在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。

jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。

下面是其它的相关使用方法:
1、DOM对象转jQuery对象
普通的Dom对象一般可以通过$()转换成jQuery对象。

如:$(document.getElementById("msg"))
返回的就是jQuery对象,可以使用jQuery的方法。

2、jQuery对象转DOM对象
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。
如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]

这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法。

以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

Javascript 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
Vue配置marked链接添加target="_blank"的方法
Jul 19 Javascript
js验证密码强度解析
Mar 18 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 #Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 #Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 #Javascript
xheditor与validate插件冲突的解决方案
Apr 15 #Javascript
js 获取Listbox选择的值的代码
Apr 15 #Javascript
JavaScript toFixed() 方法
Apr 15 #Javascript
js function定义函数使用心得
Apr 15 #Javascript
You might like
php获取目标函数执行时间示例
2014/03/04 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
Using the TextRange Object
2006/10/14 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
Python dict的常用方法示例代码
2020/06/23 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
Flask处理Web表单的实现方法
2021/01/31 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
司机职责范本
2014/03/08 职场文书
小学运动会报道稿
2014/10/04 职场文书
大学校园招聘会感想
2015/08/10 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
浅谈Python中对象是如何被调用的
2022/04/06 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server