刚开始学习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中的方法。

原文来自:http://wozailongyou.iteye.com/blog/299311

jQuery对象与DOM对象之间的转换的更多相关文章

  1. jquery对象与dom对象之间互相转换的方法

    本文主要讲述jquery对象和js里的dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法,或js里的dom对象使用jquery里的方法. jquery对象和dom对象是不一样的, ...

  2. 需要知道的jQuery对象和DOM对象之间的转换

    jQuery对象和DOM对象之间的转换 jQuery对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象和DOM对象不能互相调用对方的方法或属性,但它们之间可以进行转换. 两者都无法 ...

  3. [转] jQuery对象与DOM对象之间的转换

    http://wozailongyou.iteye.com/blog/299311 http://blog.allenm.me/2009/07/jquery%E4%B8%ADid%E5%92%8Cdo ...

  4. jQuery对象与DOM对象之间的转换(转)

    什么是jQuery对象? —就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法. 比如: $(“#test”).html()   意思 ...

  5. jQuery对象和Dom对象的区分以及之间转换

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

  6. jQuery对象和DOM对象之间的转换

    jQuery对象不能使用DOM对象的任何方法,DOM对象也不能使用jQuery对象的任何方法.在需要使用时需要对其进行转换. jQuery对象前使用"$",这不是必须的,不这么使用 ...

  7. jQuery对象与DOM对象之间的转换(转)

    原文:https://www.cnblogs.com/lsy0403/p/5907084.html 什么是DOM对象 使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象.比如使用 ...

  8. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  9. JS对象与Dom对象与jQuery对象之间的区别

    前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...

随机推荐

  1. PHP获取指定时间的上个月

    主要用strtotime()这个函数 php 获得前一个月的月份 date("Y-m-d",strtotime("last month")); php获得给定时 ...

  2. python与字符集编码

    讲的比较明白的博客:http://www.cnblogs.com/huxi/archive/2010/12/05/1897271.html 以上面博文的汉为例子,汉字的GBK编码是baba, UNIC ...

  3. CentOS命令登录MySQL时,报错ERROR 1045 (28000):

    CentOS命令登录MySQL时,报错ERROR 1045 (28000): Access denied for user root@localhost (using password: NO)错误解 ...

  4. php连接ftp的研究,自带ftp函数 | fsockopen | curl实现ftp的连接

    持续更新中..............

  5. 高效前端优化工具--Fiddler入门教程

    简介: Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器.Fiddler是以代理服务器的方式,监听系统的网络数据流动英语中Fiddler是小提琴的意思,Fiddler Web De ...

  6. iScroll 优化

    iScroll 它比较好的解决了移动互联网 web app 滚动支持问题以及点击事件缓慢的问题,经过简单配置即可让 web app 像原生 app 一样流畅,甚至都不需要改变原来的编码方式,目前它几乎 ...

  7. Topcoder SRM 584 DIV1 600

    思路太繁琐了 ,实在不想解释了 代码: #include<iostream> #include<cstdio> #include<string> #include& ...

  8. 1.精通前端系列技术之js正则表达式

    在不会正则的时候,我们寻找字符串某些规律或者截取部分特殊字符的时候,我们需要写很多行代码来获取我们想要的字符串,在使用正则之后,代码量会大量简洁很多 1.字符串的比较,判断是否数字类型的字符串,我们用 ...

  9. js字符转换成整型 parseInt()函数规程Number()函数

    今天在做一个js加法的时候,忘记将字符转换成整型,导致将加号认为是连接符,  在运算前要先对字符井行类型转换,使用parseInt()函数   使用Number()将字符转换成int型效果更好

  10. NOIP2013 提高组day2 2 花匠 动规 找拐点 树状数组

    花匠 描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希望剩下的花排列得比较别致. 具体 ...