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

转载 2018年04月16日 13:54:29

核心提示: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实现代码:

 

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


js-jQuery对象与dom对象相互转换(一)

核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’...
  • gaojiyinhang2
  • gaojiyinhang2
  • 2014-11-19 08:51:26
  • 292

DOM对象和Query对象相互转换

相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。 如果传递给$(DOM)函数的参数是一个DO...
  • qq_18832439
  • qq_18832439
  • 2016-04-23 20:12:14
  • 269

JavaScript DOM对象和JQuery对象相互转换

1、分析源码 JavaScript DOM对象和JQuery对象相互转换 /** * JavaScript DOM对象转换成JQuery对象 */ ...
  • you23hai45
  • you23hai45
  • 2015-03-12 23:37:31
  • 1530

DOM对象与query对象说明及相互转换

DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; var domObj = document.getElementByI...
  • zhongbeida_xue
  • zhongbeida_xue
  • 2016-07-14 15:21:59
  • 586

jQuery对象和DOM对象之间的相互转换

先是DOM对象转换为jQuery对象: 首先需要引入jQuery函数库 //获取DOM对象 var username=document.getElementById("use...
  • u012110719
  • u012110719
  • 2015-09-16 11:35:46
  • 3376

js-jQuery对象与dom对象-------判断 (二)

当我们在用jquery的each做循环遍历的时候常常会使用到this,而有时候我们不知道this所指的到底是什么,因为要使用jquery的方法 前提此对象必须是jquery对象。 另外要判断一个...
  • gaojiyinhang2
  • gaojiyinhang2
  • 2014-11-19 09:25:51
  • 453

DOM对象DOM对象DOM对象.doc

  • 2010年08月27日 15:59
  • 79KB
  • 下载

jQuery 对象和 DOM 对象的相互转换

1、定义 jQuery 定义如下: var $variable = jQuery对象; DOM 对象定义如下: var variable = DOM 对象; 2、jQuery 对...
  • liruxing1715
  • liruxing1715
  • 2012-01-30 19:52:21
  • 869

Jquery 对象与Dom对象相互转换

1、Jquery对象转换成DOM (1)Jquery对象是一个数组对象,可以通过[index]的方法来获取相应的DOM对象。 var $jquery = $("#jquery"); //Jquer...
  • ningguixin
  • ningguixin
  • 2013-01-22 10:18:33
  • 514

Jquery 对象与 DOM对象的相互转换

Jquery 对象与 DOM对象的相互转换
  • SpringFileld
  • SpringFileld
  • 2015-04-30 14:17:57
  • 528
收藏助手
不良信息举报
您举报文章:js-jQuery对象与dom对象相互转换
举报原因:
原因补充:

(最多只允许输入30个字)