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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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 定界符 使用技巧
2009/06/14 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
layui table 参数设置方法
2018/08/14 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
js实现简单扫雷
2020/11/27 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
Python字符串处理函数简明总结
2015/04/13 Python
分析python切片原理和方法
2017/12/19 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
python3中编码获取网页的实例方法
2020/11/16 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
上海方立数码笔试题
2013/10/18 面试题
花卉与景观设计系大学生求职信
2013/10/01 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
会计的岗位职责
2014/03/15 职场文书
篮球比赛策划方案
2014/06/05 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
排球赛新闻稿
2015/07/17 职场文书
特种设备安全管理制度
2015/08/06 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB