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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
js模拟微博发布消息
Feb 23 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
javascript里的条件判断
2007/02/27 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
Vue性能优化的方法
2020/07/30 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
使用python绘制二维图形示例
2019/11/22 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python命令行click参数用法解析
2019/12/19 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
建筑学推荐信
2013/11/03 职场文书
小学生新学期寄语
2014/01/19 职场文书
小区文明倡议书
2014/05/16 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
大学军训口号大全
2015/12/24 职场文书
大学军训心得体会800字
2016/01/11 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
vue elementUI表格控制对应列
2022/04/13 Vue.js