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 相关文章推荐
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
JavaScript 数组循环引起的思考
Jan 01 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
网络安全类面试题
2015/08/01 面试题
医学专业应届生的自我评价
2014/02/28 职场文书
人事文员岗位职责
2015/02/04 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python