6.1.3 jQuery常用語法及介面
無論是寫程序還是看API文檔，要時刻注意區分Dom對象和jQuery包裝集。
1. Dom對象
在傳統的JavaScript開發中，都是首先獲取Dom對象，比如：
- var div = document.getElementById("testDiv");
- var divs = document.getElementsByTagName("div");
使用document.getElementById方法根據id獲取單個Dom對象，或者使用document. getElementsByTagName方法根據HTML標籤名稱獲取Dom對象集合。
另外，在事件函數中，可以通過在方法函數中使用this引用事件觸發對象，或者使用event對象的target(FF)或srcElement(IE6)獲取引發事件的Dom對象。
這裡獲取的都是Dom對象，Dom對象也有不同的類型，如input、div、span等。Dom對象只有有限的屬性和方法，如圖6-2所示。
 |
| 圖6-2 Dom對象屬性、方法 |
2. jQuery包裝集
jQuery包裝集可以說是Dom對象的擴充。在jQuery的世界中將所有的對象，無論是一個還是一組，都封裝成一個jQuery包裝集，比如獲取包含一個元素的jQuery包裝集：
- var jQueryObject = $("#testDiv");
jQuery包裝集都是作為一個對象一起調用的。jQuery包裝集擁有豐富的屬性和方法，jQuery特有的屬性和方法如圖6-3所示。
 |
| 圖6-3 jQuery特有的屬性、方法 |
3. Dom對象與jQuery對象的轉換
（1）Dom轉jQuery包裝集
如果要使用jQuery提供的函數，首先就需要構造jQuery包裝集。可以使用本文即將介紹的jQuery選擇器直接構造jQuery包裝集，比如：
- $("#testDiv");
上面語句構造的包裝集只含有一個id是testDiv的元素。或者已經獲取了一個Dom元素，比如：
- var div = document.getElementById("testDiv");
上面的代碼中div是一個Dom元素，可以將Dom元素轉換成jQuery包裝集：
- var domToJQueryObject = $(div);
（2）jQuery包裝集轉Dom對象
jQuery包裝集是一個集合，所以可以通過索引器訪問其中的某一個元素：
- var domObject = $("#testDiv")[0];
通過索引器返回的不再是jQuery包裝集，而是一個Dom對象！jQuery包裝集的某些遍歷方法，比如each()中，可以傳遞遍歷函數，在遍歷函數中的this也是Dom元素，比如：
- $("#testDiv").each(function() { alert(this) })
如果要使用jQuery的方法操作Dom對象，用上面介紹過的轉換方法即可：
- $("#testDiv").each(function() { $(this).html("修改內容") })
[火星人 ] 6.1.3 jQuery常用語法及介面已經有431次圍觀
