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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
Uploadify上传文件方法
Mar 16 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
Python截图并保存的具体实例
2021/01/14 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
办理居住证介绍信
2014/01/15 职场文书
国培计划培训感言
2014/03/11 职场文书
安全生产承诺书
2014/03/26 职场文书
社会实践评语
2014/04/28 职场文书
毕业生个人总结
2015/02/28 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android