jQuery对象和DOM对象的相互转化实现代码


Posted in Javascript onMarch 02, 2010

jQuery对象和DOM对象相互转化
jQuery对象和DOM对象

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 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对象
alert(v.checked) //检测这个checkbox是否被选中

Javascript 相关文章推荐
js prototype截取字符串函数
Apr 01 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
深入理解vue路由的使用
Mar 24 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
Javascript 自定义类型方法小结
Mar 02 #Javascript
Javascript Cookie读写删除操作的函数
Mar 02 #Javascript
28个JS验证函数收集
Mar 02 #Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 #Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 #Javascript
新老版本juqery获取radio对象的方法
Mar 01 #Javascript
几个比较经典常用的jQuery小技巧
Mar 01 #Javascript
You might like
一个SQL管理员的web接口
2006/10/09 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
解析vue中的$mount
2017/12/21 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
python实现对输入的密文加密
2019/03/20 Python
Python OpenCV实现视频分帧
2019/06/01 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Django数据统计功能count()的使用
2020/11/30 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
农村婚礼证婚词
2014/01/08 职场文书
英语感谢信范文
2015/01/20 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
MySQL 数据 data 基本操作
2022/05/04 MySQL