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 相关文章推荐
jquery radio 操作代码
Mar 16 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
JavaScript基本编码模式小结
May 23 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
javascript的push使用指南
Dec 05 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 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学习之PHP表达式
2006/10/09 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python中functools模块函数解析
2017/03/12 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
在职证明范本
2015/06/15 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
Feign调用全局异常处理解决方案
2021/06/24 Java/Android