JQUERY 对象与DOM对象之两者相互间的转换


Posted in Javascript onApril 27, 2009

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换

这几天会将jQuery的一些使用方法总结一下,希望能对jQuery初学者起到一定的帮助作用。

今天主要看看jQuery对象和dom对象的相互转换,明白了这个,以后用起jQuery会方便很多。

1、方法名冲突的解决办法 在开始使用jQuery时,我们首先应该避免jQuery与其他类库或自定义js的冲突。 先看一段最简单的代码:

jQuery(document).ready(function() {

    alert("Welcome!");

});

在这里没有使用$(document)这种写法,因为很多时候我们自己定义了$(id)方法用来获得元素,并且在prototype等类库中也定义了$()方法。所以,为了避免冲突,建议大家也使用jQuery("#id")这种写法。

2、jQuery对象与dom对象的相互转换 jQuery对象转dom对象: jQuery("#id")获得的是一个jQuery对象,它和普通的dom对象是不同的,所以不能直接使用dom对象定义的方法。由于jQuery对象本身就是一个集合,所以可以通过索引将jQuery对象转换成dom对象,如jQuery("#id")[0]就是一个dom对象。 看下边一个例子:

<div id="show">

    <span>要显示的内容1</span>

    <span>要显示的内容2</span>

    <span>要显示的内容3</span>

</div>

要获得span中的内容,使用以下方法均正确。

//jQuery方法,获得第一个span内容

jQuery("#show span").html();

//获得第三个span内容

jQuery("#show span")[2].innerHTML;

//eq()返回jQuery对象,从eq(0)开始。获得第二个span内容

jQuery("#show span").eq(1)[0].innerHTML;

//get()直接返回dom对象,从get(0)开始。获得第三个span内容

jQuery("#show span").get(2).innerHTML;

dom对象转jQuery对象: 使用jQuery()就可将dom对象转为jQuery对象。 如:

jQuery(document.getElementById("show")).html();

输出结果为:

<div id="show">

    <span>要显示的内容1</span>

    <span>要显示的内容2</span>

    <span>要显示的内容3</span>

</div>

这样就实现了jQuery对象和dom对象的相互转换,比如想让焦点停留在id为focus的文本框。只需:

jQuery("#focus")[0].focus();

什么是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中的方法。

转换案例:
获取JQUERY对象的方法

var jqueryObject = $("#test"); //jqeuryObject为一个Jquery对象,它可以使用jquery的所有方法但是不能使用
var jqueryObject = $("#test"); //jqeuryObject为一个Jquery对象,它可以使用jquery的所有方法但是不能使用
DOM对象的方法

var DOMObject = document.getElementById("test");//DOMObject为一个DOM对象,它可以使用DOM的所有方法,但是不能使用jquery的方法
var DOMObject = document.getElementById("test");//DOMObject为一个DOM对象,它可以使用DOM的所有方法,但是不能使用jquery的方法
jquery对象->DOM对象

var jqueryObject = $("#test");//获取jquery对象
var DOMObject = jqueryObject[0];//jquery对象转换为DOM对象
var jqueryObject = $("#test");//获取jquery对象
var DOMObject = jqueryObject[0];//jquery对象转换为DOM对象
DOM对象->jquery对象
var DOMObject = document.getElementById("test");//获取DOM对象
var jqueryObject = $(DOMObject);//DOM对象转换为jquery对象

使用jquery时,有时需要使用原始DOM对象的方法,例如调用Activex控件的某些方法时,此时就需要将jquery对象转换为DOM对象,转换方法如下:

方法1: $("xxx")[index]
方法2:$("xxx").get(index)
方法3:$("xxx").eq(index)[0]

Javascript 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
一个选择最快的服务器转向代码
Apr 27 #Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 #Javascript
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 #Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 #Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 #Javascript
jQuery 对象中的类数组操作
Apr 27 #Javascript
jquery遍历input取得input的name
Apr 27 #Javascript
You might like
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
JQuery球队选择实例
2015/05/18 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Python简单日志处理类分享
2015/02/14 Python
详解Python传入参数的几种方法
2019/05/16 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
应届毕业生就业自荐信
2013/10/26 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
青涩记忆观后感
2015/06/18 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
python语言中pandas字符串分割str.split()函数
2022/08/05 Python