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 相关文章推荐
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
jQuery each函数源码分析
May 25 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
PHP 开发工具
2006/12/06 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
python Xpath语法的使用
2020/11/26 Python
python函数超时自动退出的实操方法
2020/12/28 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
公司办公室岗位职责
2014/03/19 职场文书
导师评语大全
2014/04/26 职场文书
质量主管工作职责
2014/09/26 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
高一作文之暖冬
2019/11/09 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android