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 清空File控件的路径值
Jul 08 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
js 页面输出值
2008/11/30 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
js实现内置计时器
2019/12/16 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python实现二维数组输出为图片
2018/04/03 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
神路信息Java面试题目
2013/03/31 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
建筑专业自我鉴定
2013/10/22 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
企业口号大全
2014/06/12 职场文书
法院授权委托书范文
2014/08/02 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
MySQL的存储过程和相关函数
2022/04/26 MySQL
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技