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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
JS获取父节点方法
Aug 20 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
详解Bootstrap按钮
Jan 04 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
JS实现炫酷雪花飘落效果
Aug 19 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获取网络上文件
2006/10/09 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
理解javascript正则表达式
2016/03/08 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
原生js实现日历效果
2020/03/02 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python实现学生成绩管理系统
2020/04/05 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python之Class&Object用法详解
2019/12/25 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
八一慰问活动方案
2014/02/07 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
秋菊打官司观后感
2015/06/03 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS