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 回车事件实现代码
Aug 23 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
vue v-on监听事件详解
May 17 Javascript
jquery拖动改变div大小
Jul 04 jQuery
vue树形结构获取键值的方法示例
Jun 21 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
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图片上传存储源码并且可以预览
2011/08/26 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
python常见的格式化输出小结
2016/12/15 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python安装scipy的步骤解析
2019/09/28 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
聊聊python中的异常嵌套
2020/09/01 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
大学军训感言800字
2014/02/27 职场文书
创新型城市实施方案
2014/03/06 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
中学清明节活动总结
2014/07/04 职场文书
先进党组织事迹材料
2014/12/26 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技