jQuery對象及DOM對象

標籤：讀取   api   個數   加工   介紹   混合   修改   簡單   區分   

jQuery對象與DOM對象

對於才開始接觸jQuery庫的初學者，我們需要清楚認識一點：

jQuery對象與DOM對象是不一樣的

可能一時半會分不清楚哪些是jQuery對象，哪些是DOM對象，下面重點介紹一下jQuery對象，以及兩者相互間的轉換。

通過一個簡單的例子，簡單區分下jQuery對象與DOM對象：

<p id=”imooc”></p>

我們要擷取頁面上這個id為imooc的p元素，然後給這個文本節點增加一段文字：“您好！通過慕課網學習jQuery才是最佳的途徑”，並且讓文字顏色變成紅色。

普通處理，通過標準JavaScript處理：

var p = document.getElementById(‘imooc‘);p.innerHTML = ‘您好！通過慕課網學習jQuery才是最佳的途徑‘;p.style.color = ‘red‘;

通過原生DOM模型提供的document.getElementById(“imooc”) 方法擷取的DOM元素就是一個DOM對象，再通過innerHTML與style屬性處理文本與顏色。

jQuery的處理：

var $p = $(‘#imooc‘);$p.html(‘您好！通過慕課網學習jQuery才是最佳的途徑‘).css(‘color‘,‘red‘);

通過$(‘#imooc‘)方法會得到一個$p的jQuery對象，$p是一個類數組對象。這個對象裡麵包含了DOM對象的資訊，然後封裝了很多操作方法，調用自己的方法html與css，得到的效果與標準的JavaScript處理結果是一致的。

通過標準的JavaScript操作DOM與jQuyer操作DOM的對比，我們不難發現：

1. 通過jQuery方法封裝後的對象，是一個類數組對象。它與DOM對象完全不同，唯一相似的是它們都能操作DOM。
2. 通過jQuery處理DOM的操作，可以讓開發人員更專註商務邏輯的開發，而不需要我們具體知道哪個DOM節點有那些方法，也不需要關心不同瀏覽器的相容性問題，我們通過jQuery提供的API進行開發，代碼也會更加精短。

 

jQuery對象轉化成DOM對象

1.     jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行封裝處理，為的是提供更好更方便快捷的DOM處理與開發中經常使用的功能。我們使用jQuery的同時也能混合JavaScript原生代碼一起使用。在很多情境中，我們需要jQuery與DOM能夠相互的轉換，它們都是可以操作的DOM元素，jQuery是一個類數組對象，而DOM對象就是一個單獨的DOM元素。

   如何把jQuery對象轉成DOM對象？

   利用數組下標的方式讀取到jQuery中的DOM對象

   HTML代碼

   <div>元素一</div><div>元素二</div><div>元素三</div>

   JavaScript代碼

   var $div = $(‘div‘) //jQuery對象var div = $div[0] //轉化成DOM對象div.style.color = ‘red‘ //操作dom對象的屬性

   用jQuery找到所有的div元素（3個），因為jQuery對象也是一個數組結構，可以通過數組下標索引找到第一個div元素，通過返回的div對象，調用它的style屬性修改第一個div元素的顏色。這裡需要注意的一點是，數組的索引是從0開始的，也就是第一個元素下標是0

   通過jQuery內建的get()方法

   jQuery對象自身提供一個.get() 方法允許我們直接存取jQuery對象中相關的DOM節點，get方法中提供一個元素的索引：

   var $div = $(‘div‘) //jQuery對象var div = $div.get(0) //通過get方法，轉化成DOM對象div.style.color = ‘red‘ //操作dom對象的屬性

   其實我們翻開源碼，看看就知道了，get方法就是利用的第一種方式處理的，只是封裝成一個get讓開發人員更直接方便的使用。

    

   DOM對象轉化成jQuery對象

   相比較jQuery轉化成DOM，開發中更多的情況是把一個dom對象加工成jQuery對象。$(參數)是一個多功能的方法，通過傳遞不同的參數而產生不同的作用。

   如果傳遞給$(DOM)函數的參數是一個DOM對象，jQuery方法會把這個DOM對象給封裝成一個新的jQuery對象

   通過$(dom)方法將普通的dom對象加工成jQuery對象之後，我們就可以調用jQuery的方法了

   HTML代碼

   <div>元素一</div><div>元素二</div><div>元素三</div>

   JavaScript代碼

   var div = document.getElementsByTagName(‘div‘); //dom對象var $div = $(div); //jQuery對象var $first = $div.first(); //找到第一個div元素$first.css(‘color‘, ‘red‘); //給第一個元素設定顏色

   通過getElementsByTagName擷取到所有div節點的元素，結果是一個dom合集對象，不過這個對象是一個數組合集(3個div元素)。通過$(div)方法轉化成jQuery對象，通過調用jQuery對象中的first與css方法尋找第一個元素並且改變其顏色。

jQuery對象及DOM對象