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 EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
原生JS实现飞机大战小游戏
Jun 09 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简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
Javascript复制实例详解
2016/01/28 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
学习python处理python编码问题
2011/03/13 Python
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
文秘人员工作职责
2014/01/31 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
厨房管理计划书
2014/04/27 职场文书
工厂搬迁方案
2014/05/11 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
优秀教师事迹材料
2014/12/15 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle