jQuery对象和DOM对象相互转化


Posted in Javascript onApril 24, 2009

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 相关文章推荐
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
JS变量及其作用域
Mar 29 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
javascript标准库(js的标准内置对象)总结
May 26 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
JavaScript 学习点滴记录
Apr 24 #Javascript
用JavaScript显示随机图像或引用
Apr 21 #Javascript
JavaScript 无符号右移运算符
Apr 17 #Javascript
JavaScript 无符号右移赋值操作
Apr 17 #Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 #Javascript
jQuery autocomplete插件修改
Apr 17 #Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 #Javascript
You might like
模仿OSO的论坛(一)
2006/10/09 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php中的登陆login实例代码
2016/06/20 PHP
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python构建XML树结构的方法示例
2017/06/30 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
全球度假村:Club Med
2017/11/27 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
社区两委对照检查材料
2014/08/23 职场文书
党员检讨书范文
2014/12/27 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
MySQL存储过程及语法详解
2022/08/05 MySQL