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 相关文章推荐
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
javascript if条件判断方法小结
May 17 Javascript
js调试系列 初识控制台
Jun 18 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 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 session和cookie使用说明
2010/04/07 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
浅析Python3 pip换源问题
2020/01/06 Python
如何在python中执行另一个py文件
2020/04/30 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
推广普通话标语
2014/06/27 职场文书
与美同行演讲稿
2014/09/13 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
股份转让协议书范本
2015/01/27 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python