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_ibm
May 16 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
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
php读取和保存base64编码的图片内容
2017/04/22 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python自定义一个异常类的方法
2019/06/27 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
投资协议书范本
2014/04/21 职场文书
运动会演讲稿300字
2014/08/25 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python