jQuery对象与DOM对象之间的转换方法


Posted in Javascript onApril 15, 2010

什么是jQuery对象?
---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。
比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:
document.getElementById("id").innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。
既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是jQuery对象,那么我们在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;这么约定只是便于讲解与区别,实际使用中并不规定。

jQuery对象转成DOM对象:
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。

下面是其它的相关使用方法:
1、DOM对象转jQuery对象
普通的Dom对象一般可以通过$()转换成jQuery对象。

如:$(document.getElementById("msg"))
返回的就是jQuery对象,可以使用jQuery的方法。

2、jQuery对象转DOM对象
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项,一般可通过索引取出。
如: $("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]

这些都是Dom对象,可以使用Dom中的方法,但不能再使用jQuery的方法。

以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

Javascript 相关文章推荐
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 #Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 #Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 #Javascript
xheditor与validate插件冲突的解决方案
Apr 15 #Javascript
js 获取Listbox选择的值的代码
Apr 15 #Javascript
JavaScript toFixed() 方法
Apr 15 #Javascript
js function定义函数使用心得
Apr 15 #Javascript
You might like
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
php 获取百度的热词数据的代码
2012/02/18 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
JScript实现表格的简单操作
2017/08/15 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python实现对adb命令封装
2020/03/06 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
super关键字的用法
2012/04/10 面试题
日语专业推荐信
2013/11/12 职场文书
超市5.1促销活动
2014/01/15 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2014年体育部工作总结
2014/11/13 职场文书
创业计划书之养殖业
2019/10/11 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android