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 相关文章推荐
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
element ui table 增加筛选的方法示例
Nov 02 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 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 intval的测试代码发现问题
2008/07/27 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php 静态化实现代码
2009/03/20 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP面向对象精要总结
2014/11/07 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
Python实现去除代码前行号的方法
2015/03/10 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python简单判断序列是否为空的方法
2015/06/30 Python
Python3 max()函数基础用法
2019/02/19 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python用SSH连接到网络设备
2021/02/18 Python
婚前协议书
2014/04/15 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
安全生产先进个人总结
2015/02/15 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python