核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是jquery对象,它不能使用js中的dom方法。所以,如果jquery对象要使用标准的dom方法,就需要进行对象转换。

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

什么是jQuery对象?

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。

比如:

$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码:

1
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对象。

如:

1
2
3
var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象

如:

1
2
3
4
5
var $v=$("#v"); //jQuery对象
 
var v=$v.get(0); //DOM对象
 
alert(v.checked) //检测这个checkbox是否被选中

  

DOM对象转成jQuery对象:

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)

如:

1
2
3
var v=document.getElementById("v"); //DOM对象
 
var $v=$(v); //jQuery对象

  

转换后,就可以任意使用jQuery的方法了。

通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。

js-jQuery对象与dom对象相互转换(转载)的更多相关文章

  1. jQuery对象与dom对象相互转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...

  2. jQuery对象与dom对象相互转换jQuery对象与dom对象相互转换

    转至:http://www.chinaz.com/design/2010/0309/108144.shtml 刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于D ...

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

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

  4. 【JQuery】jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...

  5. jquery对象和javascript对象即DOM对象相互转换

    jquery对象和javascript对象即DOM对象相互转换 1. DOM 对象转成 jQuery 对象对于已经是一个 DOM 对象,只需要用 $() 把DOM对象包装起来,就可以获得一个 jQue ...

  6. jQuery学习笔记(一)--jQuery对象与DOM对象相互转换

    通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现: 通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相似的是它们都能操作DOM. 通 ...

  7. jQuery对象和DOM对象相互转换

    DOM对象转为DOM对象: obj = document.getElementById('id') 使用$()包括对象即可 $(obj) jQuery对象转为DOM对象: 在对象后面添加[0] $(' ...

  8. 【Jquery系列】详解Jquery对象和Dom对象

    问题描述 本篇文章主要讲解Jquery对象和DOM对象,主要围绕如下五个方面来介绍: Jquery对象和dom对象定义 Jquery对象与dom对象区别 Jquery对象及运用举例 dom对象及运用举 ...

  9. js-jQuery对象与dom对象相互转换

    http://blog.csdn.net/jueshengtianya/article/details/8823091   核心提示:jquery选择器得到的jquery对象和标准的 javascri ...

随机推荐

  1. ASP.NET Core AD 域登录 (转载)

    在选择AD登录时,其实可以直接选择 Windows 授权,不过因为有些网站需要的是LDAP获取信息进行授权,而非直接依赖Web Server自带的Windows 授权功能. 当然如果使用的是Azure ...

  2. 撩妹技能 get,教你用 canvas 画一场流星雨

    开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...

  3. php网易云信im即时通讯和聊天室

    话不多说 直接上代码 <?php/** * Created by PhpStorm. * User: lhl * Date: 2019/4/10 * Time: 17:38 */ namespa ...

  4. 用启动器py成功解决python2和python3同时共存且同时运行的问题

    缘起:之前一直用PHP来开发微信公众号后台,最近正在学习python,而且看到微信官方也把公众号后台的示例代码换成了python的,但是示例中用的web.py需要用到python2,而我自己的电脑上装 ...

  5. stm32按键FIFO的实现

    学习目标: 1.理解FIFO的基本概念和设计按键FIFO的意义   2.写出实现按键FIFO的代码 1.设计按键FIFO的优点 要介绍实现按键FIFO的优点,首先要了解FIFO的一些基本概念.FIFO ...

  6. 截图:【炼数成金】深度学习框架Tensorflow学习与应用

    创建图.启动图 Shift+Tab Tab 变量介绍: F etch Feed 简单的模型构造 :线性回归 MNIST数据集 Softmax函数 非线性回归神经网络   MINIST数据集分类器简单版 ...

  7. .Net 两个对像之间的映射 ( 二 )

    一.使用 class Program { static void Main(string[] args) { User u1 = new User(); u1.UserName = "aaa ...

  8. 201552-53 《Java程序设计》第五周问题汇总

    201552-53 <Java程序设计>第五周问题汇总 1.编译时,终端显示: 注:XXX.java使用了未经检查或不安全的操作,如何解决? 解答:并不是错误,可以忽视. 2.构造函数与类 ...

  9. 20155223 2016-2017-2《Java程序设计》课程总结

    20155223 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1 预备作业2 预备作业3 第一周 第二周 第三周 第四周 第五周 第六周 第七周 第八周 ...

  10. 2017-2018-1 20155307 《信息安全系统设计基础》第十周课上未完成补充以及课下IPC作业

    课上内容2:stat命令的实现-mysate 学习使用stat(1),并用C语言实现 提交学习stat(1)的截图 man -k ,grep -r的使用 伪代码 产品代码 mystate.c,提交码云 ...