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 相关文章推荐
Javascript学习笔记2 函数
Jan 11 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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编写注册后Email激活验证的实例代码
2013/03/11 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
javascript 特殊字符串
2009/02/25 Javascript
javascript 函数调用规则
2009/08/26 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
Python中的choice()方法使用详解
2015/05/15 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Django REST framework 分页的实现代码
2019/06/19 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
如何将Pycharm中调整字体大小的方式设置为"ctrl+鼠标滚轮上下滑"
2020/11/17 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
博士给导师的自荐信
2015/03/06 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
中学政教处工作总结
2015/08/13 职场文书
学生检讨书范文
2019/06/24 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL