刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。
什么是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对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作。这就需要我们知道如何将jQuery对象和DOM的相互转换的...
jquery——ajax__json,的一些文档,jquery——ajax__json,的一些文档,
前端 , jQuery——固定导航栏 , 若窗口被卷上去的高度大于等于顶部top的高度时 让导航栏变成固定定位,定位到距离顶部为0的位置
jquery——tipswindown弹出层插件,对应博文:http://blog.csdn.net/shellwin/archive/2010/07/31/5778578.aspx
本书循序渐进的对jQuery的各种方法和使用进行介绍,读者可以系统的掌握jQuery关于DOM操作、事件监听和动画、表单操作、AJAX以及插件方面知识点,并结合每个章节后面的案例演示进行练习,达到掌握本章节知识点的目的...
jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别
jquery 基本 层级 控制器 可见性 属性 子元素 表单对象属性 dom对象 等详细的一些操作~ 详细 简单~易懂 实用!
2、jQuery对象———->DOM对象 下标选取法(原理:jQuery是DOM的数组形式):$(“h2”)[1] 使用.get(index)函数 3、字符串———–>DOM对象 写一个脚本函数 function parseDom(nodelist) { //nodelist是html文本字符串 ...
JQuery DoM和ajax 操作大全源码
其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。 ...
jquery的api网页文档
jquery 分页——jqueryPage.js
主要介绍了jQuery对象和DOM对象之间相互转换的方法介绍,本文讲解了jQuery对象转成DOM对象、DOM对象转换成jQuery对象方法,需要的朋友可以参考下
本文实例分析了jQuery对象与DOM对象的转换方法。分享给大家供大家参考,具体如下: ...jQuery对象的索引保存的是dom对象,所以可以通过索引将经jQuery对象转化为dom对象(实际上是获取保存在jQuery对象中的
jquery的dom资料,学习jquery的使用,以及jquery的dom资料,学习jquery的使用,以及jquery的dom资料,学习jquery的使用,以及
锋利的jQuery].单东林&张晓菲&魏然.扫描版 -527541771 强烈推荐!
关于dom和jquery对象理解
第12章 回头重看jQuery——核心及工具 第13章 jQuery增强用户体验 第14章 jQuery中使用AJAX跨域操作 第15章 jQuery+PHP动态网站实践 第16章 jQuery键盘操作 第17章 jQuery可视化数据显示 本资料共包含以下附件: ...
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如: $(“#img”).attr(“src”,”test.jpg”); 这里的 $(“#img”)...