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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
jQuery中的select操作详解
Nov 29 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
JavaScript实现消消乐的源代码
Jan 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性能优化大全(php.ini)
2016/05/20 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
python创建临时文件夹的方法
2015/07/06 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python虚拟环境完美部署教程
2019/08/06 Python
python使用requests.session模拟登录
2019/08/09 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
编辑个人求职信范文
2013/09/21 职场文书
毕业生多媒体设计求职信
2013/10/12 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
地球一小时倡议书
2014/04/15 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书