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一点特殊用法
May 28 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
javascript cookie的简单应用
Feb 24 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
小程序云开发实战小结
Oct 25 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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
Yii全局函数用法示例
2017/01/22 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
一段实时更新的时间代码
2006/07/07 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
python链接Oracle数据库的方法
2015/06/28 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python机器学习库常用汇总
2017/11/15 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
物控部经理职务说明书
2014/02/25 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
技术负责人岗位职责
2015/02/10 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python