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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
微信小程序云开发之模拟后台增删改查
May 16 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
第一个无线电台是由谁发明的
2021/03/01 无线电
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
destoon各类调用汇总
2014/06/20 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
基于python的七种经典排序算法(推荐)
2016/12/08 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
python调用win32接口进行截图的示例
2020/11/11 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
安全责任书范本
2014/04/15 职场文书
大学生心理活动总结
2014/07/04 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python