jQuery对象和DOM对象相互转化


Posted in Javascript onApril 24, 2009

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 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对象

alert(v.checked)  //检测这个checkbox是否被选中

Javascript 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
JavaScript 学习点滴记录
Apr 24 #Javascript
用JavaScript显示随机图像或引用
Apr 21 #Javascript
JavaScript 无符号右移运算符
Apr 17 #Javascript
JavaScript 无符号右移赋值操作
Apr 17 #Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 #Javascript
jQuery autocomplete插件修改
Apr 17 #Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
关于php内存不够用的快速解决方法
2013/10/26 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
JS求平均值的小例子
2013/11/29 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
JS中递归函数
2016/06/17 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
企业宣传方案
2014/03/04 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
后勤个人工作总结
2015/02/28 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
电影地道战观后感
2015/06/04 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android