初學jQuery，感覺jQuery對象和DOM對象的區分，對於以後的學習還是很重要的，把自己的體會給大家分享一下，歡迎噴！
DOM稱爲文檔對象模型，是W3C制定的一套標準，是把構成html頁面元素（如html, title, body, input等）定義爲標準對象，通過這些對象可以訪問到這些元素並可以進行處理（如修改屬性，增刪元素等操作）。
jQuery對象，我在網上沒有找到官方的解釋，我認爲可以粗暴地認爲jQuery對象就是把DOM對象用一個數組進行了封裝，數組中的元素就是DOM元素。
我們來做以下驗證：
在頁面中，我們添加一個input標籤（這個標籤是什麼類型無所謂，只是爲了演示而已）：
<input id="id1" name="name1" class="abc"/>然後分別用DOM方式和jQuery方式選擇到這個元素，並將這個元素打印到控制檯：
//DOM方式獲取元素
var dom_obj = document.getElementById("id1")
console.log(dom_obj);
//jQuery方式獲取元素
var $jq_obj = $('#id1');
console.log($jq_obj);控制檯輸出爲：
從輸出可以看出，DOM方式只是單獨的一個元素，而jQuery方式則是將這個元素用一個數組包起來，並還加了一些其他的信息（這些其他信息，呃，我還沒弄明白，就不亂說了……）
我們來將這兩個元素展開，看看這個對象都包含些什麼內容
先來展開DOM方式獲取的元素
由於這個展示內容很多，我截圖就只截前面一部分了，後面的都是一樣的各種屬性。這些屬性，我們都可以使用 “.”操作符來訪問：
console.log(dom_obj.attributes);//返回一個屬性數組
console.log(dom_obj.attributes[0]);//通過下標可以獲取屬性數組中具體的屬性
console.log(dom_obj.autofocus);//直接返回元素中的autofocus的屬性值控制檯輸出爲：
可以看出，DOM元素的屬性，我們可以直接通過“.”操作符來訪問，如果是單屬性的，則直接返回這個屬性的值，對於有多個值的屬性，則以數組的形式返回，然後通過下標的形式訪問到具體的值。當然，也可以對這些屬性進行賦值。這裏就不演示了。
我們再來看看jQuery對象，展開是什麼樣子：
jQuery對象就是一個數組，展開後，首先是獲取到的DOM元素，後面是一些附加信息。從這裏，我們也可以知道，通過“.”操作符，我們只能獲取到context, length, selector，分別對應於Element類型（jQuery1.10標記爲過時，後期可能會被移除，我們就不再分析了），獲取的元素個數，選擇器屬性
除了以上三個屬性，我們再無法直接訪問到其他屬性了，這也是我們不能使用DOM方式獲取jQuery對象的屬性值的原因。
對於大多數情況下，我們並不關心context, length, selector這三個屬性，而是會關心我們選擇到的元素的一些屬性，雖然我們不能使用DOM方式去訪問這些屬性，jQuery爲我們提供了相應的方法去獲取，下面隨便寫兩個，其他的，大家可以自己去試
console.log($jq_obj.attr('id'));//獲取id值
console.log($jq_obj.html());//獲取元素的innerHTML最後，就是DOM對象和jQuery對象的轉換了，方式很簡單：
DOM轉jQuery：
var $jq_obj = $(dom_obj); //直接通過$()方式轉換jQuery轉DOM
var dom_obj1 = $jq_obj[index];//方式一，通過[]方式，index爲下標
var dom_obj2 = $jq_obj.get(index);//方式二，通過get()方法，index爲下標爲演示可以選擇到多上元素的選擇器，我們將頁面中的元素添加到三個，這三個元素都有同樣的class屬性值：
<input id="id1" name="name1" class="abc"/>
<input class="abc" id="id2" name="name2">
<button class="abc" name="name3"></button>下面，是對DOM對象和jQuery對象的轉換進行演示：
/*DOM對象*/
//id選擇器，只會選擇到最多一個元素
var dom_obj1 = document.getElementById("id1");//選擇到一個元素，返回這個元素
var dom_obj2 = document.getElementById("fhdf");//選擇不到元素，返回null
console.log("id選擇器選擇的DOM對象");
console.log(dom_obj1);
console.log(dom_obj2);
//轉換爲jQuery對象
var $dom_obj1 = $(dom_obj1);
var $dom_obj2 = $(dom_obj2);
console.log("將id選擇器選擇的DOM對象轉換爲jQuery對象");
console.log($dom_obj1);
console.log($dom_obj2);
//類選擇器，可能會選擇到多個元素
var dom_obj3 = document.getElementsByClassName("abc");//選擇到三個元素，返回包含這些元素的數組
var dom_obj4 = document.getElementsByClassName("afgjdfg");//選擇不到元素，返回長度爲0的數組
console.log("類選擇器選擇的DOM對象");
console.log(dom_obj3);
console.log(dom_obj4);
//轉換爲jQuery對象
var $dom_obj3 = $(dom_obj3);
var $dom_obj4 = $(dom_obj4);
console.log("將類選擇器選擇的DOM對象轉換爲jQuery對象");
console.log($dom_obj3);
console.log($dom_obj4);
/*jQuery對象*/
//id選擇器，只會選擇到最多一個元素
var $jq_obj1 = $("#id1");//選擇到一個元素
var $jq_obj2 = $("#fjkhfhg");//選擇不到元素
console.log("id選擇器選擇的jQuery對象");
console.log($jq_obj1);
console.log($jq_obj2);
var jq_obj1 = $jq_obj1[0];
var jq_obj2 = $jq_obj1.get(0);
console.log("將id選擇器選擇的jQuery對象轉換爲DOM對象");
console.log(jq_obj1);
console.log(jq_obj2);
//類選擇器，可能會選擇到多個元素
var $jq_obj3 = $(".abc");//選擇到三個元素
var $jq_obj4 = $(".lkj");//選擇不到元素
console.log("類選擇器選擇的DOM對象");
console.log($jq_obj3);
console.log($jq_obj4);
var jq_obj3 = $jq_obj3[0];
var jq_obj4 = $jq_obj3.get(0);
var jq_obj5 = $jq_obj3[1];
var jq_obj6 = $jq_obj3.get(1);
console.log("將id選擇器選擇的jQuery對象轉換爲DOM對象");
console.log(jq_obj3);
console.log(jq_obj4);
console.log(jq_obj5);
console.log(jq_obj6);控制檯輸出爲：
綜上所述：
- jQuery對象可以看作是將DOM對象進行了封裝
- DOM對象選擇不到元素，如果是單元素選擇器是返回null，多元素選擇器是返回一個長度爲0的空數組；jQuery對象，無論是多元素還是單元素選擇器，都是返回一個長度爲0的空數組
- DOM對象一般是通過“.”操作符來訪問和操作屬性，jQuery對象是提供了一系列方法來訪問和操作屬性，二者訪問操作屬性的方式不能通用。
- 兩種對象之間可以方便地轉換