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 相关文章推荐
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
React Router V4使用指南(精讲)
Sep 17 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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开发工具之vs2005图解
2008/01/12 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
js function定义函数使用心得
2010/04/15 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
python中pyqtgraph知识点总结
2021/01/26 Python
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
静态成员和非静态成员的区别
2012/05/12 面试题
机关职员工作检讨书
2014/10/23 职场文书
环卫工人慰问信
2015/02/15 职场文书
大学生就业意向书
2015/05/11 职场文书
指导老师鉴定意见
2015/06/05 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
Java异常体系非正常停止和分类
2022/06/14 Java/Android