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对象