jquery对象和javascript对象即DOM对象相互转换


Posted in Javascript onAugust 07, 2014

jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。

DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法,但是不能使用 jQuery 里的方法。例如:document.getElementById("img").src = “test.jpg";这里的document.getElementById("img") 就是DOM 对象。

$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等价的,是正确的,但是 $("#img").src = "test.jpg" ;或者 document.getElementById("img").attr("src","test.jpg"); 都是错误的。

再说一个例子,就是this, 在写 jQuery 时经常这样写: this.attr("src","test.jpg");可是就是出错,其实this 是DOM对象,而.attr("src","test.jpg") 是 jQuery 方法,所以出错了。要解决这个问题就要将 DOM对象转换成 jQuery 对象,例如 $(this).attr("src","test.jpg");

1. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQuery 对象了,$(DOM 对象) 注: var是定义变量

如: 

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

转换后,就可以任意使用 jQuery 的方法。

2. 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对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

通过以上方法,可以任意的相互转换 jQuery 对象和 DOM 对象,需要再强调的是: DOM 对象才能使用DOM 中的方法,jQuery 对象是不可以使用DOM中的方法。

Javascript 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
理解javascript异步编程
Jan 27 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
js断点调试经验分享
Dec 08 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 #Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 #Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 #Javascript
谷歌地图打不开的解决办法
Aug 07 #Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 #Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 #Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 #Javascript
You might like
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
初级的用php写的采集程序
2007/03/16 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
javascript的push使用指南
2014/12/05 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Python字典操作简明总结
2015/04/13 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python修改字典键(key)的方法
2019/08/05 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python接口自动化测试的实现
2020/08/28 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
高三地理教学反思
2014/01/11 职场文书
项目经理任命书内容
2014/06/06 职场文书
幼儿发展评估方案
2014/06/11 职场文书
禁止酒驾标语
2014/06/25 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
会计工作态度自我评价
2015/03/06 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫