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 定义初始化数组函数
Sep 07 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
jQuery.each()用法分享
Jul 31 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
vue axios用法教程详解
Jul 23 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
Angular4.0动画操作实例详解
May 10 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&java(三)
2006/10/09 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
Vuex中的State使用介绍
2019/01/19 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python操作MySQL数据库9个实用实例
2015/12/11 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python any()函数的使用方法
2019/10/28 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
日语专业推荐信
2013/11/12 职场文书
售后专员岗位职责
2013/12/08 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
采购部主管岗位职责
2014/01/01 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
工作求职信
2014/07/04 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
高一英语教学反思
2016/03/03 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
python对文档中元素删除,替换操作
2022/04/02 Python