> 文档中心 > jQuery对象 和 DOM对象 的区别与相互转化

jQuery对象 和 DOM对象 的区别与相互转化

我们要想知道 jQuery对象 和 DOM对象 的区别就要先知道二者的定义:

DOM对象:原生JS获取过来的对象就是DOM对象

jQuery对象:用 jQuery 的方式获取过来的对象叫 jQuery 对象

例如:var ele=document.querySelector('div') ,这里使用原生 JS 获取过来的的 ele 就是一个 DOM 对象

$('div') ,这里使用 jQuery 获取过来的对象 $('div') 就是一个 jQuery 对象,下面我们使用 console.dir 分别看看二者对象打印出来是什么

DOM对象:

    
var ele=document.querySelector('div') console.dir(ele)

 jQuery对象:

    
console.dir($('div'))

 结论:

       通过上面输出的结果对比我们可以发现,jQuery 对象本质是对 DOM 对象的包装,并以数组的形式存储了

注意事项:

jQuery对象只能使用jQuery对象的方法,DOM对象只能使用DOM对象的方法,二者不可混着使用,例如在隐藏元素时:

DOM:只能使用 jQuery 特有的 hide 方法

  $('div').hide(); 

jQuery:只能使用 style 的 display

var div=document.querySelector('div');div.style.display='none';

 


DOM对象 和 jQuery 对象的相互转化:

相互转化的目的:jQuery对象的方法并没有DOM对象多,有些jQuery对象做不到的事情DOM对象却可以做得到,例如视频的播放 play(),因此需要二者的相互转化

DOM对象 转化为 jQuery对象:

直接将获取好的DOM对象放入$内进行包装即可

格式:$('DOM对象')

var ele=document.querySelector('div');$('ele')

注意:直接获取得到的就是 jQuery 对象:$('div')


jQuery对象 转化为 DOM对象:

两种格式:(index 为索引号,因为 jQuery 对象以伪数组形式存储,有索引值)

  • $( 'element' )[ index ]
  • $( 'element' ).get( index )
$('div')[0]
$('div').get(0)

UCloud