jQuery对象和DOM对象之间相互转换的方法介绍


Posted in Javascript onFebruary 28, 2015

在讨论jQuery对象和DOM对象的相互交换之前,先约定好定义变量的风格。如果获取的对象是jQuery对象,那么在变量前加上$,例如:

var $variable = jQuery对象;

如果获取的是DOM对象,则定义如下:
var variable = DOM对象;

1.jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法,但是如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不实用DOM对象的时候,有以下两种处理方法。jQuery提供了两种方法将一个jQuery对象转换成DOm对象,即[index]和get(index).

(1)jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象。

jQuery代码如下:

var $cr = $("#cr"); //jQuery对象

var cr = $cr[0] //DOM对象

alert(cr.checked) //检测这个checkbox是否选中了

(2)另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。

jQuery代码如下:

[js]var $cr = $("#cr");

var cr = $cr.get(0);

alert(cr.checked)

2.DOM对象转换成jQuery对象

对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,方式为$(DOM对象)。

jQuery代码如下:

var cr = document.getElementByID("cr"); //DOM对象

var $cr = $(cr);

转换后,可以任意使用jQuery中的方法。

通过以上方法,可以任意地相互转换jQuery对象和DOM对象。

最后强调,DOM对象才能使用DOM中的方法,jQuery对象不可以使用DOM中的方法,但jQuery对象提供了一套更加完善的工具用于操作DOM

Javascript 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
理解javascript模块化
Mar 28 Javascript
js简单倒计时实现代码
Apr 30 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 #Javascript
浅析JavaScript事件和方法
Feb 28 #Javascript
常用的JavaScript WEB操作方法分享
Feb 28 #Javascript
js实现点击图片改变页面背景图的方法
Feb 28 #Javascript
本人自用的global.js库源码分享
Feb 28 #Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 #Javascript
javascript计时器详解
Feb 28 #Javascript
You might like
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python用threading实现多线程详解
2017/02/03 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
python可视化实现代码
2019/01/15 Python
Python I/O与进程的详细讲解
2019/03/08 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python的列表List求均值和中位数实例
2020/03/03 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
八年级历史教学反思
2014/01/10 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
干部作风建设心得体会
2014/10/22 职场文书
英语通知范文
2015/04/22 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书