原標題：jQuery基礎教程 · 摘要

一、jQuery 能做什么？

二、通過使用$(document).ready() 方法，jQuery支持我們預定在DOM加載完畢后調用某個函數，而不必等待頁面中的圖像加載。盡管不使用jQuery，也可以做到這種預定，但$(document).ready() 為我們提供了很好的跨瀏覽器解決方案，涉及如下功能：

.ready() 方法的參數可以是一個已經定義好的函數的引用，也可以是一個匿名函數。

{ $('div.poem-stanza').addClass('highlight'); } $(document).ready(addHighlightClass);

三、jQuery最強大的特性之一就是它能夠簡化在DOM中選擇元素的任務。DOM（Document Object Model，文檔對象模型）充當了JavaScript與網頁之間的接口；它以對象網路而非純文本的形式來表現HTML的源代碼。

四、 $() 函數接受CSS選擇符作為參數，充當一個工廠，返回包含頁面中對應元素的jQuery對象。

五、jQuery中的多數自定義選擇符都可以讓我們從已經找到的元素中選出一或多個元素。自定義選擇符通常跟在一個CSS選擇符后面，基于已經選擇的元素集的位置來查找元素。自定義選擇符的文法與CSS中的偽類選擇符文法相同，即選擇符以冒號（ : ）開頭。

六、告訴大家一條通用的經驗法則：要盡可能使用CSS規范中規定的選擇符，除非沒有，可使用jQuery的自定義選擇符。同樣，在修改選擇符之前，也要記住只在確實有必要提升性能的情況下再去提升。至于測量修改選擇符之后的性能提升了多少，可以使用類似所提供的基準測試工具。

七、眾所周知，要得到一個jQuery對象的實例，需要向 $() 函數傳入一個選擇符表達式。而得到的對象是一個數組結構，其中包含著與該選擇符匹配的每個DOM元素的引用。可是我們并不知道的是，這個對象中還隱藏著其他一些內容。
比如 .context 內容中包含著一個DOM節點（通常是 document ）的引用，搜索就是從這個節點開始的；
比如 .selector 內容中保存著創建最終對象的選擇符表達式。在調用 .on() 等事件委托方法時，這兩個內容就會派上用場。
不過，在調用某個DOM遍歷方法時，則會用上第三個內容： .prevObject 。這個內容中保存著調用遍歷方法的那個jQuery對象。

$(document).ready(function() { var $cell = $('#release').nextAll(); $cell.addClass('highlight'); console.log($cell.context); console.log($cell.selector); console.log($cell.prevObject); });

八、無論什么時候，都應該把簡化代碼的編寫和維護工作放在首位。只有在性能確確實實是一個可以感知的問題時，再考慮犧牲可讀性來優化代碼執行速度。
雖然應該避免過早優化，但最低限度地重復選擇符和遍歷方法則始終是值得提倡的。因為這些操作都可能會耗費較多時間，用得越少越好。而要避免重復，有兩個策略值得討論，那就是連綴和緩存對象。

九、當觸發任何事件處理程式時，關鍵字 this 引用的都是攜帶相應行為的DOM元素。前面我們談到過，$() 函數可以將DOM元素作為參數，而 this 關鍵字是實現這個功能的關鍵 。 不過在事件處理程式中使用 $(this) ，可以為相應的元素創建jQuery對象，然后就如同使用CSS選擇符找到該元素一樣對它進行操作。

十、事件處理程式中的變數 event 保存著事件對象。

事件傳播和默認操作是相互獨立的兩套機制，在二者任何一方發生時，都可以終止另一方。
如果想要同時停止事件傳播和默認操作，可以在事件處理程式中返回 false ，這是對在事件對象上同時調用 .stopPropagation() 和 .preventDefault() 的一種簡寫方式。

十一、內置的事件委托功能。
.on() 方法可以接受相應參數實現事件委托，如果給 .on() 方法傳入的第二個參數是一個選擇符表達式，jQuery會把 click 事件處理程式綁定到 #switcher 對象，同時比較 event.target 和選擇符表達式（這里的 ‘button’ ）。如果匹配，jQuery會把 this 關鍵字映射到匹配的元素，否則不會執行事件處理程式。

$(bodyClass = event.target.id.split('-')[1]; $('body').removeClass().addClass(bodyClass); $('#switcher button').removeClass('selected'); $(this).addClass('selected'); });

十二、為事件處理程式添加命名空間
調用 .off() 方法可以移除事件處理程式，但這樣會移除所有的相關事件處理程式，應該讓.off() 方法有針對性的移除，所以要達成目標的一種方式是使用事件命名空間，即在綁定事件時引入附加資訊，以便將來識別特定的處理程式。要使用命名空間，需要退一步使用綁定事件處理程式的非簡寫方法，即 .on() 方法本身。

我們為 .on() 方法傳遞的第一個參數，應該是想要截獲的事件的名稱。不過，在此可以使用一種特殊的文法形式，即對事件加以細分。

$(document).ready(function() { $((!$(event.target).is('button')) { $('#switcher button').toggleClass('hidden'); } }); $('#switcher-narrow, #switcher-large').click(function() { $('#switcher').off('click.collapse'); }); });

對于事件處理系統而言，后綴 .collapse 是不可見的。換句話說，這里仍然會像編寫 .on(‘click’) 一樣，讓注冊的函數響應單擊事件。但是，通過附加的命名空間資訊，則可以解除對這個特定處理程式的綁定，同時不影響為按鈕注冊的其他單擊處理程式。

十三、鍵盤事件可以分為兩類：直接對鍵盤按鍵給出響應的事件（ keyup 和 keydown ）和對文本輸入給出響應的事件（ keypress ）。

有一條實踐經驗還是比較可靠的：如果想知道用戶按了哪個鍵，應該偵聽 keyup 或 keydown 事件；如果想知道用戶輸入的是什么字符，應該偵聽 keypress 事件。

鍵盤事件的目標是當前擁有鍵盤焦點的元素。元素的焦點可能會在幾種情況下轉移，包括單擊滑鼠和按下Tab鍵。并非所有元素都可以獲得焦點，只有那些默認情況下具有鍵盤驅動行為的元素，如表單字段、鏈接，以及指定了 tabIndex內容的元素才可以獲得焦點。