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 & DHTML 实例编程(教程)基础知识
Jun 02 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 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弹出对话框实现重定向代码
2014/01/23 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
深入Python解释器理解Python中的字节码
2015/04/01 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python实现聊天小程序
2018/03/13 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python datetime处理时间小结
2020/04/16 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
PHP中如何使用Cookie
2015/10/28 面试题
linux面试题参考答案(3)
2012/09/13 面试题
在职证明书范本(2014新版)
2014/09/25 职场文书
青年文明号汇报材料
2014/12/23 职场文书
期中考试复习计划
2015/01/19 职场文书
负责培养人意见
2015/06/05 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Python深度学习之实现卷积神经网络
2021/06/05 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
vue实现滑动解锁功能
2022/03/03 Vue.js