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创建命名空间(namespace)的最简实现
Dec 11 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
KnockoutJs快速入门教程
May 16 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
Vue声明式渲染详解
May 17 Javascript
vue2中使用less简易教程
Mar 27 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
JavaScript实现猜数字游戏
May 20 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 实用代码收集
2010/01/22 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
基于jquery & json的省市区联动代码
2012/06/26 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
java字符串格式化输出实例讲解
2021/01/06 Python
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
市场开发与营销专业求职信
2013/12/31 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
MySQL如何构建数据表索引
2021/05/13 MySQL