jQuery对象和DOM对象的相互转化实现代码


Posted in Javascript onMarch 02, 2010

jQuery对象和DOM对象相互转化
jQuery对象和DOM对象

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 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 相关文章推荐
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
前端性能优化及技巧
May 06 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
JavaScript中import用法总结
Jan 20 Javascript
Javascript 自定义类型方法小结
Mar 02 #Javascript
Javascript Cookie读写删除操作的函数
Mar 02 #Javascript
28个JS验证函数收集
Mar 02 #Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 #Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 #Javascript
新老版本juqery获取radio对象的方法
Mar 01 #Javascript
几个比较经典常用的jQuery小技巧
Mar 01 #Javascript
You might like
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python通过函数属性实现全局变量的方法
2015/05/16 Python
python发送HTTP请求的方法小结
2015/07/08 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python实现汇率转换操作
2020/05/03 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
利用python爬取有道词典的方法
2020/12/08 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
测控技术与仪器个人求职信范文
2013/12/30 职场文书
初中生评语大全
2014/04/24 职场文书
学位证书委托书
2014/09/30 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
医院合作意向书范本
2015/05/08 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
python实现会员信息管理系统(List)
2022/03/18 Python
Python使用Web框架Flask开发项目
2022/06/01 Python