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 相关文章推荐
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
JS定义类的六种方式详解
May 12 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
10分钟学会js处理json的常用方法
Dec 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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP之生成GIF动画的实现方法
2013/06/07 PHP
php 发送带附件邮件示例
2014/01/23 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
js实现简单放大镜效果
2020/03/07 Javascript
python中查看变量内存地址的方法
2015/05/05 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python网络应用开发知识点浅析
2019/05/28 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
利用python求积分的实例
2019/07/03 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
项目经理的岗位职责
2013/11/23 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
先进单位申报材料
2014/12/25 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
TS 类型兼容教程示例详解
2022/09/23 Javascript