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 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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
网络资源
2006/10/09 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python struct模块解析
2014/06/12 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
竞选村长演讲稿
2014/04/28 职场文书
企业指导教师评语
2014/04/28 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS