前端學習——選擇結果為JQuery對象還是DOM對象?

標籤：jquery   dom   

0.前言    在學習和使用javascript過程中經常使用JQuery的選取器，但是在擷取到選擇結果之後經常“犯迷糊”，需要一個DOM對象時或者一個JQuery對象，這樣的尷尬經常遇到。為了讓自己不再迷糊通過博文總結經驗教訓，希望自己在總結過程中緩慢提高。    【相關博文】    【前端學習——如何修改<a href="#">url name</a> 使用javascript和JQuery】    【樣本頁面】——test-ul.html

<!DOCTYPE html><meta charset="utf-8"><html><head> <!-- <script src="jquery.js"></script> --><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></head> <body> <ul><li>Raspberry</li> <li>Arduino</li> <li>Intel Galileo</li> </ul></body> </html>

1.選擇所有的li    【使用jquery】

var $obj = $("li");console.log($obj);

    【使用javascript】

var obj = document.getElementsByTagName("li");console.log(obj);

     【主要區別】    此時$obj為Jquery對象集合，而obj為DOM對象集合。
2.Jquery對象變為DOM對象——[]方法

var obj = $("li")[0];console.log(obj);                    // <li>Raspberry</li>console.log(obj.innerHTML);     // Raspberry

    【說明】    此處obj為DOM對象，可以使用屬性innerHTML。如果使用Jquery的html方法那麼瀏覽器將會發出錯誤警告。
3.Jquery對象變為DOM對象——get方法

var obj = $("li").get(1);console.log(obj);                    // <li>Arduino</li>console.log(obj.innerHTML);     // Arduino

    【說明】    []方式和Jquery的get方法效果相同。
4.使用javascript達到相同效果

var obj = document.getElementsByTagName("li")[2];console.log(obj);                    // <li>Intel Galileo</li>console.log(obj.innerHTML);     // Intel Galileo

5.選擇子項目時仍為Jquery對象——eq方法

var $obj = $("li").eq(0);console.log($obj);console.log($obj.html());           // Raspberry

    【說明】    使用eq方法獲得Jquery對象，那麼獲得此對象的HTML內容需要使用Jquery的html()方法，而不是javascript的innerHTML 屬性。
6.使用Jquery遍曆所有子節點

$("li").each(function(index,item){    console.log(item);                  // item為DOM對象    console.log(item.innerHTML);   // 依次輸出 Raspberry Arduino Intel Galileo});

    【說明】    each遍曆的item為DOM對象而不是Jquery對象。
7.遍曆時再變為Jquery對象

$("li").each(function(index,item){    $item = $(item);                    // 再次變為Jquery對象    // console.log($item);                  console.log($item.html());       // 依次輸出 Raspberry Arduino Intel Galileo});

    【說明】     $item = $(item)再一次變化出JQuery對象，$(item)此時和$(<li>Raspberry<li>)等價，意為選擇一個DOM對象並變為JQuery對象。  
8.使用Javascript遍曆所有子節點

var objs = document.getElementsByTagName("li");for(var i=0; i<objs.length; i++) {    console.log(objs[i]);    console.log(objs[i].innerHTML);    // 依次輸出 Raspberry Arduino Intel Galileo}

9.總結    【1】使用Jquery選取器之後可以使用[]和get獲得子DOM，也就是說[]和get具有把Jquery對象轉換為DOM對象的功能。    【2】eq方法獲得的對象仍為JQuery對象    【3】each方法遍曆時的item為DOM對象    【4】JQuery對象使用JQuery方法，DOM對象使用DOM方法。