jQuery object 和 DOM element 之間的關系

在使用jQuery時，發現有兩種對象，一個是[object Object]，另一個是就像[object HTMLDivElement]

前者是jQuery對象，通過jQuery的選擇器$('selector')獲得；后者是DOM元素，為 javascript中的getElementById, getElementsByTagName等方法的返回類型。

只有jQuery對象才能使用jQuery的一系列方法，DOM元素是不能用的。

其實，jQuery對象就類似一個數組，它包含了一個或多個與jQuery選擇器匹配的DOM元素。

//一個js獲取的標簽為li的元素數組
var normalArray = document.getElementsByTagName('li');  

//相當於上面的，但是是一個jQuery對象
var jQueryArray = $('li');

//如果是由元素Id獲得DOM元素的話，則jQuery對象就像一個長度為1的數組。
//比如，以下三個alert的結果是相同的
alert(document.getElementById('myID'));
alert($('#myID')[0]);
alert($('#myID').get(0));

//*** jQuery對象與DOM元素之間的轉換 ***

//返回與 jQuery 選擇器匹配的DOM元素的數量
jQueryArray.length;
jQueryArray.size();

//從jQuery對象獲得普通的DOM集合，[<li id="foo">, <li id="bar">]
jQueryArray.get();
jQueryArray.toArray();

//根據index獲取數組中的某個元素
jQueryArray.get(index);
jQueryArray[index];

//當index是-1時，由於負數index是從數組最后開始算，所以返回數組的最后一個元素
jQueryArray.get(-1);

//當從一個jQuery對象獲得一個DOM元素后，把該元素再轉變成一個jQuery對象，以便調用jQuery的方法
$(jQueryArray[0]);
注意：$()函數能把一個DOM元素轉變為一個jQuery對象