jquery对象和javascript对象即DOM对象相互转换


Posted in Javascript onAugust 07, 2014

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是定义变量

如: 

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对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

通过以上方法,可以任意的相互转换 jQuery 对象和 DOM 对象,需要再强调的是: DOM 对象才能使用DOM 中的方法,jQuery 对象是不可以使用DOM中的方法。

Javascript 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
bootstrap表单示例代码分享
May 18 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
使用express来代理服务的方法
Jun 21 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 #Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 #Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 #Javascript
谷歌地图打不开的解决办法
Aug 07 #Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 #Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 #Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 #Javascript
You might like
配置支持SSI
2006/11/25 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
微信小程序日历效果
2018/12/29 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python3 集合set入门基础
2020/02/10 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
爽歪歪广告词
2014/03/20 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
企业百日安全活动总结
2015/05/07 职场文书
KVM基础命令详解
2022/04/30 Servers
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript