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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
js的回调函数详解
Jan 05 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 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 cron中的批处理
2008/09/16 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
flask框架路由常用定义方式总结
2019/07/23 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
自荐信范文
2013/12/10 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
民事调解协议书
2016/03/21 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS