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实现画板的代码
Sep 05 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
Python使用gensim计算文档相似性
2016/04/10 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
党员党性分析材料
2014/02/17 职场文书
家教广告词
2014/03/19 职场文书
小学二年级学生评语
2014/04/21 职场文书
活动总结模板大全
2015/05/11 职场文书
力克胡哲观后感
2015/06/10 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
一些让Python代码简洁的实用技巧总结
2021/08/23 Python