jQuery的強大自不必我多言，我想是時候的來認真的學習一下它了，不說廢話了，一起來領會jQuery的偉大吧！

導航：

一	基本原理
二	jQuery包裝器
三	實用工具函式
四	文件就緒處理程式
五	建立DOM元素
六	擴充套件jQuery
七	jQuery和其他庫

一、基本原理

1、jQuery核心部分就是如何從HTML頁面裡獲取元素並對其進行操作。即選擇器（selector）。

2、選擇器是透過元素的特性或元素在HTML文件中的位置去描述元素組。

二、jQuery包裝器

當收集一組元素時，可以使用的簡單語法如下：

$(selector)或者jQuery(selector)

由此可以看出，$()函式是jQuery()函式的別名。“$”剛接觸可能有點奇怪，但是你很快就會喜歡上它的簡潔。

舉個例子：為了獲取巢狀在<p>元素內的一組連結（<a>元素）。jQuery語句如下：

$("p a");

$()函式返回特別的JavaScript物件，它包含著與選擇器相匹配的DOM元素的陣列。

下面說一個比較好玩的東西，就是jQuery鏈。

舉個例子：讓帶有CSS類star的所有<div>元素呈現淡出效果，同時再給它們新增一個新的CSS類big。jQuery語句如下：

$("div.star").fadeOut().addClass("big");

說明一下，fadeOut()是jQuery自帶的淡出效果的方法，addClass()是jQuery的新增類方法。

我想說的這條語句的重點是：選擇一次，可以進行多次不同的操作。這就是jQuery鏈，它可以無限延續。之所以可以這樣做是因為，當$()完成一個操作（比如淡出操作）時，它們返回相同的一組元素，提供給下一個操作。

jQuery選擇器還有更加高階的用法，下面舉幾個例子大家體會一下：

（1）選擇所有偶數的<p>元素

$("p:even");    even指偶數的意思

（2）選擇每個表格的第一行

$("tr:nth-child(1)");

（3）選擇作為<body>直接子節點的<div>

$("body > div");

（4）選擇指向PDF檔案的連結

$("a[href$=pdf]");

（5）選擇作為<body>直接子節點、包含連結（<a>元素）的<div>

$("body > div:has(a)");

三、jQuery實用工具函式

$()函式不光是能作為選擇器使用，它還有另外的一個職責就是作為幾個通用的實用工具的名稱空間字首。通常我們可能很少會用到，因為透過選擇器的使用，就覺得jQuery已經很強大了，不過作為jQuery的一部分，有必要了解一下。

什麼是實用工具？舉個例子大家就都會明白。刪除字串前後空格的實用工具函式，寫法如下：

$.trim(someString);

大家如果覺得$.不得勁，那就把它當成一個類的名稱空間就好了，就好像string.一樣的意思，或許用jQuery代替會覺得更加熟悉一些。

jQuery.trim(someString);

雖然被稱作實用工具函式，事實上就把它當成函式$()的一個方法就好。

四、文件就緒處理程式

通常頁面在瀏覽器視窗顯示前要經歷兩個步驟：

（1）構建DOM樹

（2）載入影像和其他外部資源

我們都知道如果使用JavaScript對頁面元素進行操作的時候，必須要在瀏覽器把HTML轉換成DOM樹之後。傳統上，window例項的onload處理程式被用於上述上的，語法通常如下：

window.onload = function(){    $("div.star").fadeOut().addClass("big");}

這樣就能在文件完整地載入之後，執行淡出效果和新增CSS類big。

但是需要注意一點的是這並不是最好的時機，因為onload的執行不僅是在步驟（1）之後，它也在步驟（2）之後，這就會導致一個問題，如果影像或外部資源比較大的時候，我們不僅要等待載入的這段時間，甚至我們會看到頁面到我們指令碼執行的效果的延時。如果是一個沒什麼耐心的使用者，可能還沒等資源載入完成，就已經把頁面關掉了，那也就看不到你的“效果”了。

所以jQuery提供了我們一個簡單的方法，它可以在一個完美的時機去展示我們的效果。下面我們來看看它是什麼

$(document).ready(function() {    $("div.star").fadeOut().addClass("big");});

把“效果”寫在這個函式里，只要等到步驟（1）結束之後，我們的程式碼就會被啟用。上述程式碼也可以簡寫成：

$(function() {    $("div.star").fadeOut().addClass("big");});

還有一個是$()比window.onload好的地方，$()可以同一個HTML文件中多次使用，而瀏覽器則會按照函式在頁面中定義的先後順序一一執行。而window.onload機制只能使用一次，如果我們引入任何第三方程式碼裡採用了onload機制，就會很麻煩。

五、建立DOM元素

透過給$()函式傳遞包含HTML標記的字串，可以即時建立相應的DOM元素。

舉個例子：新建段落元素。寫法如下：

$("<p>Hello World</p>");

但是隻建立了一個元素，但並不知道它的層次結構（即它的位置），看起來其作用不大，所以通常會在建立DOM元素之後直接對其安排位置。

舉個例子：在id="paragraph"的<p>元素後新建一個段落元素。寫法如下：

$("<p>Hello World</p>").insertAfter("#paragraph");

六、擴充套件jQuery

關於擴充套件jQuery讓我有點熱血沸騰，我們都知道沒有哪個庫能設法將每個人需要的東西都預先準備好。所以jQuery核心庫裡只為我們準備了大多數頁面作者需要的功能（當然，這也是相當多的功能了）。

下面舉個例子展示一下擴充套件jQuery有多爽，我們做一個“用於禁用一組表單元素的函式”。

$("form#myform input.special").disable();

因為jQuery並沒有提供disable()這樣的方法，所以我們要擴充套件，基本慣用語法如下：

$.fn.disable = function(){    return this.each(function() {        if(typeof this.disabled != "undefined"){            this.disabled = true;        }    });}

突然看到這麼一堆亂糟糟的大家別怕，下面一一進行解釋，等大家繼續學習，這些就很easy了，反正我是這樣想的，我也是在這正邊看邊學，感覺看明白了這塊的知識點才敢表上來的。

首先，$.fn.disable表示我們用名為disable的函式來擴充套件$包裝器。大家有沒有發現$.fn屬於一個實用工具函式，第2行的this表示將被操作的包裝DOM元素集合（其實就是所有滿足“form#myform input.special”這一條件的DOM元素集合）。

然後，each()方法就是遍歷this集合裡的每個元素，第3行的this表示的是當前遍歷到的元素，它不是集合，是指特定的這一DOM元素。如果這塊大家有點沒理解也不要慌，多寫寫慢慢就懂了。

最後，if條件句裡表示當前遍歷到的這個元素有沒有disabled特性，如果有，將其值置為true。

這樣我們就把一個擴充套件jQuery寫好了。同時它也支援jQuery命令鏈的。

$("form#myform input.special").disable().addClass("moreSpecial");

這裡面其實大家仔細琢磨會發現一些有趣的東西，現在可能是一腦子漿糊，不過繼續學習就Ok啦！

七、jQuery和其他庫

jQuery可以說是一個和平使者，即便其本身很強大，但也從來未想過獨霸天下，創造者也是本著滿足使用者需求，但是由於其別名$，有時還是與其他庫造成小小的衝突，比如Prototype庫（我個人是不知道其是什麼東東）。不過jQuery還是把這個問題給解決了，那就是使用另一個實用工具函式noConflict()來消除衝突。

jQuery.noConflict();

它會把$還原到非jQuery庫所定義的含義。

jQuery 學習系列筆記

相關文章