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的脚本
May 18 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
php除数取整示例
2014/04/24 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
django如何自己创建一个中间件
2019/07/24 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python selenium xpath定位操作
2020/09/01 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
商场开业庆典策划方案
2014/06/02 职场文书
科学育儿宣传标语
2014/10/08 职场文书
关于五一放假的通知
2015/08/18 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
五年级作文之想象作文
2019/10/30 职场文书