jQuery是目前使用最廣泛的javascript函式庫。
據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。
對於網頁開發者來說，學會jQuery是必要的。因為它讓你瞭解業界最通用的技術，為將來學習更高階的庫打下基礎，並且確實可以很輕鬆地做出許多複雜的效果。
雖然jQuery上手簡單，比其他庫容易學會，但是要全面掌握，卻不輕鬆。因為它涉及到網頁開發的方方面面，提供的各種方法和內部變化有上千種之多。初學者常常感到，入門很方便，提高很困難。
目前，網際網路上最好的jQuery入門教材，是Rebecca Murphey寫的《jQuery基礎教程》（jQuery Fundamentals）。在Google裡搜尋”jQuery培訓”，此書排在第一位。jQuery官方團隊已經同意，把此書作為官方教程的基礎。
這本書雖然是入門教材，但也足足有100多頁。我對它做了一個詳細的筆記，試圖理清jQuery的設計思想，找出學習的脈絡。我的目標是全面掌握jQuery，遇到問題的時候，心裡有底，基本知道使用它的哪一個功能，然後可以迅速從手冊中找到具體的寫法。
下面就是我的筆記，它應該是目前網上不多的jQuery中文教程之一。你只需要一點javascript語言的基本知識，就能看懂它，在最短的時間裡，掌握jQuery的所有主要方面（除了ajax和外掛開發）。
===========================================
jQuery設計思想
原文網址：http://jqfundamentals.com/book/
阮一峰翻譯整理
【目錄】
一、選擇網頁元素
二、改變結果集
三、鏈式操作
四、元素的操作：取值和賦值
五、元素的操作：移動
六、元素的操作：複製、刪除和建立
七、工具方法
八、事件操作
九、特殊效果
【正文】
一、選擇網頁元素
jQuery的基本設計和主要用法，就是“選擇某個網頁元素，然後對其進行某種操作”。這是它區別於其他函式庫的根本特點。
使用jQuery的第一步，往往就是將一個選擇表示式，放進建構函式jQuery()（簡寫為$），然後得到被選中的元素。
選擇表示式可以是CSS選擇器：
|
1 |
|
1 |
$(document) //選擇整個文件物件 |
|
1 2 3 |
$('#myId') //選擇ID為myId的網頁元素 $('div.myClass') //選擇class為myClass的div元素 $('input[name=first]') //選擇name屬性等於first的input元素 |
也可以是jQuery特有的表示式：
|
1 |
|
1 |
$('a:first') //選擇網頁中第一個a元素 |
|
1 2 3 4 5 |
$('tr:odd') //選擇表格的奇數行 $('#myForm :input') //選擇表單中的input元素 $('div:visible') //選擇可見的div元素 $('div:gt(2)') //選擇所有的div元素，除了前三個 $('div:animated') //選擇當前處於動畫狀態的div元素 |
二、改變結果集
如果選中多個元素，jQuery提供過濾器，可以縮小結果集：
|
1 |
|
1 |
$('div').has('p'); //選擇包含p元素的div元素 |
|
1 2 3 4 |
$('div').not('.myClass'); //選擇class不等於myClass的div元素 $('div').filter('.myClass'); //選擇class等於myClass的div元素 $('div').first(); //選擇第1個div元素 $('div').eq(5); //選擇第6個div元素 |
有時候，我們需要從結果集出發，移動到附近的相關元素，jQuery也提供了在DOM樹上的移動方法：
|
1 |
|
1 |
$('div').next('p'); //選擇div元素後面的第一個p元素 |
|
1 2 3 4 |
$('div').parent(); //選擇div元素的父元素 $('div').closest('form'); //選擇離div最近的那個form父元素 $('div').children(); //選擇div的所有子元素 $('div').siblings(); //選擇div的同級元素 |
三、鏈式操作
選中網頁元素以後，就可以對它進行某種操作。
jQuery允許將所有操作連線在一起，以鏈條的形式寫出來，比如：
|
1 |
$('div').find('h3').eq(2).html('Hello'); |
分解開來，就是下面這樣：
|
1 |
|
1 |
$('div') //找到div元素 |
|
1 2 3 |
.find('h3') //選擇其中的h3元素 .eq(2) //選擇第3個h3元素 .html('Hello'); //將它的內容改為Hello |
這是jQuery最令人稱道、最方便的特點。它的原理在於每一步的jQuery操作，返回的都是一個jQuery物件，所以不同操作可以連在一起。
jQuery還提供了.end()方法，使得結果集可以後退一步：
|
1 |
|
1 |
$('div') |
|
1 2 3 4 5 6 |
.find('h3') .eq(2) .html('Hello') .end() //退回到選中所有的h3元素的那一步 .eq(0) //選中第一個h3元素 .html('World'); //將它的內容改為World |
四、元素的操作：取值和賦值
操作網頁元素，最常見的需求是取得它們的值，或者對它們進行賦值。
jQuery使用同一個函式，來完成取值（getter）和賦值（setter）。到底是取值還是賦值，由函式的引數決定。
|
1 |
|
1 |
$('h1').html(); //html()沒有引數，表示取出h1的值 |
|
1 |
$('h1').html('Hello'); //html()有引數Hello，表示對h1進行賦值 |
常見的取值和賦值函式如下：
.html()取出或設定html內容
.text() 取出或設定text內容
.attr() 取出或設定某個屬性的值
.width() 取出或設定某個元素的寬度
.height() 取出或設定某個元素的高度
.val() 取出某個表單元素的值
需要注意的是，如果結果集包含多個元素，那麼賦值的時候，將對其中所有的元素賦值；取值的時候，則是隻取出第一個元素的值（.text()例外，它取出所有元素的text內容）。
五、元素的操作：移動
如果要移動選中的元素，有兩種方法：一種是直接移動該元素，另一種是移動其他元素，使得目標元素達到我們想要的位置。
假定我們選中了一個div元素，需要把它移動到p元素後面。
第一種方法是使用.insertAfter()，把div元素移動p元素後面：
|
1 |
$('div').insertAfter('p'); |
第二種方法是使用.after()，把p元素加到div元素前面：
|
1 |
$('p').after('div'); |
表面上看，這兩種方法的效果是一樣的，唯一的不同似乎只是操作視角的不同。但是實際上，它們有一個重大差別，那就是返回的元素不一樣。第一種方法返回div元素，第二種方法返回p元素。你可以根據需要，選擇到底使用哪一種方法。
使用這種模式的操作方法，一共有四對：
.insertAfter()和.after()：在現存元素的外部，從後面插入元素
.insertBefore()和.before()：在現存元素的外部，從前面插入元素
.appendTo()和.append()：在現存元素的內部，從後面插入元素
.prependTo()和.prepend()：在現存元素的內部，從前面插入元素
六、元素的操作：複製、刪除和建立
複製元素使用.clone()。
刪除元素使用.remove()和.detach()。兩者的區別在於，前者不保留被刪除元素的事件，後者保留，有利於重新插入文件時使用。
清空元素內容（但是不刪除該元素）使用.empty()。
建立新元素的方法非常簡單，只要把新元素直接傳入jQuery的建構函式就行了：
|
1 2 3 4 5 |
$('Hello '); $('<li class="new">new list item'); $('ul').append('list item '); |
七、工具方法
jQuery設計思想之六：除了對選中的元素進行操作以外，還提供一些與元素無關的工具方法（utility）。不必選中元素，就可以直接使用這些方法。
如果你懂得Javascript語言的繼承原理，那麼就能理解工具方法的實質。它是定義在jQuery建構函式上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定義在建構函式的prototype物件上的方法，即jQuery.prototype.method()，所以必須生成例項（即選中元素）後使用。如果不理解這種區別，問題也不大，只要把工具方法理解成，是像javascript原生函式那樣，可以直接使用的方法就行了。
常用的工具方法有以下幾種：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$.trim() 去除字串兩端的空格。 $.each() 遍歷一個陣列或物件。 $.inArray() 返回一個值在陣列中的索引位置。如果該值不在陣列中，則返回-1。 $.grep() 返回陣列中符合某種標準的元素。 $.extend() 將多個物件，合併到第一個物件。 $.makeArray() 將物件轉化為陣列。 $.type() 判斷物件的類別（函式物件、日期物件、陣列物件、正則物件等等）。 $.isArray() 判斷某個引數是否為陣列。 $.isEmptyObject() 判斷某個物件是否為空（不含有任何屬性）。 $.isFunction() 判斷某個引數是否為函式。 $.isPlainObject() 判斷某個引數是否為用"{}"或"new Object"建立的物件。 $.support() 判斷瀏覽器是否支援某個特性。 |
八、事件操作
jQuery設計思想之七，就是把事件直接繫結在網頁元素之上。
|
1 2 3 |
$('p').click(function(){ alert('Hello'); }); |
目前，jQuery主要支援以下事件：
.blur()?表單元素失去焦點。
.change()?表單元素的值發生變化
.click()?滑鼠單擊
.dblclick()?滑鼠雙擊
.focus()?表單元素獲得焦點
.focusin()?子元素獲得焦點
.focusout()?子元素失去焦點
.hover()?同時為mouseenter和mouseleave事件指定處理函式
.keydown()?按下鍵盤（長時間按鍵，只返回一個事件）
.keypress()?按下鍵盤（長時間按鍵，將返回多個事件）
.keyup()?鬆開鍵盤
.load()?元素載入完畢
.mousedown()?按下滑鼠
.mouseenter()?滑鼠進入（進入子元素不觸發）
.mouseleave()?滑鼠離開（離開子元素不觸發）
.mousemove()?滑鼠在元素內部移動
.mouseout()?滑鼠離開（離開子元素也觸發）
.mouseover()?滑鼠進入（進入子元素也觸發）
.mouseup()?鬆開滑鼠
.ready()?DOM載入完成
.resize()?瀏覽器視窗的大小發生改變
.scroll()?滾動條的位置發生變化
.select()?使用者選中文字框中的內容
.submit()?使用者遞交表單
.toggle()?根據滑鼠點選的次數，依次執行多個函式
.unload()?使用者離開頁面
以上這些事件在jQuery內部，都是.bind()的便捷方式。使用.bind()可以更靈活地控制事件，比如為多個事件繫結同一個函式：
|
1 2 3 4 5 6 |
$('input').bind( 'click change', //同時繫結click和change事件 function() { alert('Hello'); } ); |
有時，你只想讓事件執行一次，這時可以使用.one()方法。
$(“p”).one(“click”, function() {
alert(“Hello”); //只執行一次，以後的點選不會執行
});
|
1 |
<a href="http://api.jquery.com/unbind/" target="_blank">.unbind()</a>用來解除事件繫結。 |
$(‘p’).unbind(‘click’);
所有的事件處理函式，都可以接受一個事件物件（event object）作為引數，比如下面例子中的e：
|
1 2 3 |
$("p").click(function(e) { alert(e.type); // "click" }); |
這個事件物件有一些很有用的屬性和方法：
event.pageX?事件發生時，滑鼠距離網頁左上角的水平距離
event.pageY?事件發生時，滑鼠距離網頁左上角的垂直距離
event.type?事件的型別（比如click）
event.which?按下了哪一個鍵
event.data?在事件物件上繫結資料，然後傳入事件處理函式
event.target?事件針對的網頁元素
event.preventDefault()?阻止事件的預設行為（比如點選連結，會自動開啟新頁面）
event.stopPropagation()?停止事件向上層元素冒泡
在事件處理函式中，可以用this關鍵字，返回事件針對的DOM元素：
|
1 2 3 4 5 6 |
$('a').click(function(e) { if ($(this).attr('href').match('evil')) { //如果確認為有害連結 e.preventDefault(); //阻止開啟 $(this).addClass('evil'); //加上表示有害的class } }); |
有兩種方法，可以自動觸發一個事件。一種是直接使用事件函式，另一種是使用.trigger()或.triggerHandler()。
|
1 2 |
$('a').click(); $('a').trigger('click'); |
九、特殊效果
最後，jQuery允許物件呈現某些特殊效果。
|
1 |
$('h1').show(); //展現一個h1標題 |
常用的特殊效果如下：
.fadeIn()?淡入
.fadeOut()?淡出
.fadeTo()?調整透明度
.hide()?隱藏元素
.show()?顯示元素
.slideDown()?向下展開
.slideUp()?向上捲起
.slideToggle()?依次展開或捲起某個元素
.toggle()?依次展示或隱藏某個元素
除了.show()和.hide()，所有其他特效的預設執行時間都是400ms（毫秒），但是你可以改變這個設定。
$(‘h1’).fadeIn(300); // 300毫秒內淡入
$(‘h1’).fadeOut(‘slow’); // 緩慢地淡出
在特效結束後，可以指定執行某個函式。
|
1 |
$('p').fadeOut(300, function() { $(this).remove(); }); |
更復雜的特效，可以用.animate()自定義。
|
1 2 3 4 5 6 7 8 |
$('div').animate( { left : "+=50", //不斷右移 opacity : 0.25 //指定透明度 }, 300, // 持續時間 function() { alert('done!'); } //回撥函式 ); |
$.fx.off如果設定為true，則關閉所有網頁特效。
（完）
作者：阮一峰