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继承 Base类的源码解析
Dec 30 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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 反向排序和随机排序代码
2010/06/30 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python3 实现调用串口功能
2019/12/26 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
超市开业庆典活动策划方案
2014/09/15 职场文书
新员工入职感言范文!
2019/07/04 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs