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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
javascript闭包入门示例
Apr 30 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
vue实现购物车列表
Jun 30 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
MVC模式的PHP实现
2006/10/09 PHP
用php过滤危险html代码的函数
2008/07/22 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js定时器实例分享
2016/12/20 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
Python中每次处理一个字符的5种方法
2015/05/21 Python
Python中实现switch功能实例解析
2018/01/11 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
艺术设计专业个人求职信范文
2013/12/11 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
大型会议策划方案
2014/05/17 职场文书
警察群众路线整改措施
2014/09/26 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
护士辞职信怎么写
2015/02/27 职场文书
音乐剧猫观后感
2015/06/04 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
Python采集股票数据并制作可视化柱状图
2022/04/04 Python