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 相关文章推荐
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
详解vue表单——小白速看
Apr 08 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 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中cookie的作用域
2008/03/27 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
护理学毕业生求职信
2013/11/14 职场文书
高一新生军训感言
2014/03/02 职场文书
给校长的建议书500字
2014/05/15 职场文书
个性婚礼策划方案
2014/05/17 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
高三毕业感言
2015/07/30 职场文书
初三毕业感言
2015/07/31 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python