Dom對象與jQuery對象的轉換

原文連接:http://www.cnblogs.com/qiantuwuliang/archive/2009/08/12/1544584.html

(1) Dom轉jQuery包裝集

若是要使用jQuery提供的函數,  就要首先構造jQuery包裝集.  咱們可使用本文即將介紹的jQuery選擇器直接構造jQuery包裝集,好比:

$("#testDiv");上面語句構造的包裝集只含有一個id是testDiv的元素. 或者咱們已經獲取了一個Dom元素,好比:

var div = document.getElementById("testDiv");上面的代碼中div是一個Dom元素, 咱們能夠將Dom元素轉換成jQuery包裝集:

var domToJQueryObject = $(div);小竅門:由於有了智能感知, 因此咱們能夠經過智能感知的方法列表來判斷一個對象啊是Dom對象仍是jQuery包裝集.

(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("修改內容") })

小結: 先讓你們明確Dom對象和jQuery包裝集的概念, 將極大的加快咱們的學習速度. 我在學習jQuery的過程當中就花了很長時間沒有領悟到二者的具體差別, 由於書上並無專門講解二者的區別, 因此常常被"this指針爲什麼不能調用jQuery方法"等問題迷惑.  直到某一天豁然開朗, 發現只要可以區分這二者, 就可以在寫程序時變得清清楚楚.