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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
js实现日期级联效果
Jan 23 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
详解小程序退出页面时清除定时器
Apr 28 Javascript
Nuxt使用Vuex的方法示例
Sep 06 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
PHP实现的堆排序算法详解
2017/08/17 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python3基础之函数用法
2014/08/13 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
浅谈python锁与死锁问题
2020/08/14 Python
Python偏函数实现原理及应用
2020/11/20 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
公司募捐倡议书
2014/05/14 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
学生吸烟检讨书
2014/09/14 职场文书
Python数据类型最全知识总结
2021/05/31 Python
javascript函数式编程基础
2021/09/15 Javascript
vue中 this.$set的使用详解
2021/11/17 Vue.js