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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
web前端开发也需要日志
Dec 09 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
微信小程序上传图片到php服务器的方法
May 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
php的控制语句
2006/10/09 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
Vue自定义指令详解
2017/07/28 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python tkinter界面居中显示的方法
2018/10/11 Python
对python 自定义协议的方法详解
2019/02/13 Python
解决python线程卡死的问题
2019/02/18 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
小区停车场管理制度
2014/01/27 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
新品发布会策划方案
2014/06/08 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
浅谈redis缓存在项目中的使用
2021/05/20 Redis
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server