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 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
关于ES6尾调用优化的使用
Sep 11 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
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php生成excel文件的简单方法
2014/02/08 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
就业推荐表院系意见
2015/06/05 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫