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获取单选按钮的数据
Nov 27 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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
SMARTY学习手记
2007/01/04 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
layui文件上传实现代码
2017/05/20 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
jupyter notebook 多行输出实例
2020/04/09 Python
python中os包的用法
2020/06/01 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
Java基础知识面试要点
2016/07/29 面试题
《胡杨》教学反思
2014/02/16 职场文书
班组建设经验交流材料
2014/05/12 职场文书
自荐信格式范文
2015/03/04 职场文书
入学证明
2015/06/23 职场文书
教师节感想
2015/08/11 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫