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 20 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
JavaScript前端面试组合函数
Jun 21 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP一些有意思的小区别
2006/12/06 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Django中URL正则表达式匹配的方法
2018/12/20 Python
python装饰器常见使用方法分析
2019/06/26 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
django rest framework serializers序列化实例
2020/05/13 Python
python 下载文件的多种方法汇总
2020/11/17 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
质量标语大全
2014/06/12 职场文书
银行业务授权委托书
2014/10/10 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android