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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
vue实现固定位置显示功能
May 30 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
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
对Session和Cookie的区分与解释
2007/03/16 PHP
在JavaScript中调用php程序
2009/03/09 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
linux中cd命令使用详解
2015/01/08 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python探索之SocketServer详解
2017/10/28 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
wxPython实现整点报时
2019/11/18 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python collections模块的使用方法
2020/10/09 Python
期末总结的个人自我评价
2013/11/02 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
机关门卫制度
2014/02/01 职场文书
cf搞笑广告词
2014/03/14 职场文书
优秀家长事迹材料
2014/05/17 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
护士自荐信范文
2015/03/25 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript