jquery对象与dom对象的区别？

jquery对象与dom对象的区别？

jquery对象与dom对象是不一样的
可能一时半会分不清楚哪些是jquery对象，哪些是dom对象，下面重点介绍一下jquery对象，以及两者相互间的转换。

通过一个简单的例子，简单区分下jquery对象与dom对象：

<div id="eg"></div>

我们要获取页面上这个id为eg的div元素，然后给这个文本节点增加一段文字：“您好”，并且让文字颜色变成红色。

1、原生 dom 对象处理(dom模型)：

 <script>
    window.onload=function(){
      var  eg= document.getElementById('eg');
	  //定义一个变量接收,接收的是什么?获取的是dom元素
	  console.log(eg);
	  eg.innerHTML = '您好';
	  eg.style.color = 'red';   //设置文字颜色
  }
 </script>

通过原生dom模型提供的document.getElementById(“eg”) 方法获取的dom元素就是一个dom对象，再通过innerHTML与style属性处理文本与颜色。

2、引用jquery框架处理(jquery方法)：

var eg = $('#eg');
console.log(eg);
eg.html('您好').css('color','red');

通过$(’#eg’)方法会得到一个eg的jquery对象，是一个类数组对象，这个对象里面其实是包含了dom对象的信息的，然后封装了很多操作方法，调用自己的方法html与css处理文本与颜色。

通过标准的JavaScript操作dom与jquery操作dom的对比，我们可以发现：

1、通过$('#eg')方法会得到一个jquery对象，$('#eg')是一个类数组对象。
2、这个对象里面包含了dom对象的信息，然后封装了很多操作方法，
3、调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。

联系——jquery对象与dom对象可以互相转换。

jQuery对象是包装DOM对象后产生的，但是两者却不能混用，DOM对象才能使用DOM方法，jQuery对象才能使用jQuery方法，以下介绍两者转换的方法：

DOM  ——>  jQuery    $( domobj)
jQuery  ——>  DOM    $li [ index ]  或  $li.get( index )

• 原生dom对象转jquery对象：

   var box = document.getElementById('box');
   var $box = $(box);
  

• jquery对象转原生dom对象：

   	var $box = $('#box');
   	var box1 = $box[ index ];
   	var box2 = $box.get( index );