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 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
Javascript中replace()小结
Sep 30 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
vue实现分页组件
Jun 16 Javascript
Javascript的this详解
Mar 23 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PDO实现学生管理系统
2020/03/21 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
JavaScript之数组扁平化详解
2019/06/03 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python 功能和特点(新手必学)
2015/12/30 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
运动会主持人开幕词
2016/03/04 职场文书