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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
动态表格Table类的实现
Aug 26 Javascript
js 函数调用模式小结
Dec 26 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
vue中nextTick用法实例
Sep 11 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 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令牌 Token改进版
2008/07/18 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
小学教育见习报告
2014/10/31 职场文书
感谢信怎么写
2015/01/21 职场文书
团拜会主持词
2015/07/04 职场文书
运动会广播稿20字
2015/08/19 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript