js中的DOM对象 和 jQuery对象

js中的DOM对象 和 jQuery对象

二者的区别通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：针对下面这样一个div结构：

<div></div> 
<div id=”app”>
</div> <div class=”box”>
</div> <div class=”box”>
</div>

通过原生 js 获取这些元素节点的方式是：

var myBox = document.getElementById("app"); 
//通过 id 获取单个元素 
var boxArr = document.getElementsByClassName("box");
//通过 class 获取的是伪数组 
var divArr = document.getElementsByTagName("div"); 
//通过标签获取的是伪数组通过 jQuery 获取这些元素节点的方式是：（获取的都是数组） 
//获取的是数组，里面包含着原生 JS 中的DOM对象。　 　console.log(('#app'));
console.log(('#app'));　
console.log((‘.box’)); 　　console.log($(‘div’));![d0308e93d1070bc15a97b848bbb11e45.png](en-resource://database/552:0) 
设置当前4个div的样式：　　　　　
$('div').css({ 'width': '200px', 'height': '200px', "background-color":'red', 'margin-top':'20px' })

由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

二者的相互转换
1、 DOM 对象 转为 jQuery对象

：$(js对象);

2、jQuery对象 转为 DOM 对象：

  jquery对象[index];      //方式1（推荐）
  jquery对象.get(index);  //方式2

DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。