初学jQuery3-jQuery包装集和Dom对象的区别

jQuery对象和dom对象有很大的区别。dom对象只有少量的属性和方法，jQuery包装集可以说是对dom对象进行了扩充，jQuery有丰富的属性和方法。

 

1.获得dom对象。

    可以通过 document.getElementById("testDiv"); 或者 document.getElementsByName("testDiv"); 获得dom对象。

   var div = document.getElementById("testDiv");    //这样获得的是DOM对象。

 

 

2.jQuery包装集

   

var jQueryObject = $("#testDiv");                         //这样获得的是jQuery包装集。

 

 

3.dom对象转换成jQuery包装集

 

    如果要使用jQuery中提供的函数，就要首先构造一个jQuery包装集。当我们获得了dom对象以后，可以通过$()来得到jquery包装集。

 

   

   var div = document.getElementById("testDiv");    //这样获得的是DOM对象。
  var domToJQueryObject = $(div);                    //domToJQueryObject 为JQuery包装集

 

4.jQuery包装集转换成dom对象。

  

   有的时候需要将jQuery转换成dom对象。

   jQuery包装集是一个集合，所以通过索引器访问其中的某一个元素。

   索引器返回的不在是jQuery包装集，而是一个dom对象。

   

  

var jQueryObject = $("#testDiv");                         //这样获得的是jQuery包装集。
var JQueryObjectToDom = jQueryObject [0] ;     //JQueryObjectToDom 为Dom对象。

 

5.

jQuery包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素,

所以有的时候this不能调用jQuery中的方法。

比如:

$("#testDiv").each(function() { alert(this) })

如果我们要使用jQuery的方法操作Dom对象,怎么办? 用上面介绍过的转换方法即可:

$("#testDiv").each(function() { $(this).html("修改内容") })

 

理解好jQuery对象和dom对象很重要。