jQuery實戰筆記（一）-jQuery基本原理

jQuery核心：從HTML頁面獲取元素並對其進行操作。
一、jQuery包裝器
$()函數（jQuery()函數的別名）返回特別的JavaScript對象，它包含着與選擇器相匹配的DOM元素的數組。
該對象擁有大量預定義的有用方法，能夠作用於該組元素。這種構造成爲包裝器，因爲它用擴展功能來對匹配的元素進行包裝。
jQuery包裝器方法的特徵是，當完成了一個操作時，它們返回相同的一組元素，提供給下一個操作。如：

$("div.notLongForThisWorld").fadeOut().addClass("removed");

這些jQuery鏈可以無限延續。

二、實用工具函數
包裝元素以便於操作是jQuery的$()函數最常見的用途之一，它的另一個職責是作爲幾個通用的實用工具函數的命名空間前綴。
如:$.trim(someString); 即jQuery.trim(someString);函數trim()不過是存在於別名爲$的命名空間jQuery裏。


三、文檔就緒處理函數
處理方式：
1.在文檔完整加載之後執行(不僅是在構建DOM樹之後，也是在所有圖像和其他外部資源完整地加載並且頁面在瀏覽器窗口顯示完畢之後)

window.onload = function() {
   $("table tr:nth-child(even)").addClass("even");
}

【onload機制只接受一個函數。(並非最優方法)】
2.只要等到文檔結構被完整地解析，瀏覽器把HTML轉換成DOM樹形式的時候，立刻執行腳本使豐富的行爲生效。

$(document).ready(function() {
   $("table tr:nth-child(even)").addClass("even");
});

【首先，用$()即jQuery()函數來包裝文檔實例，然後調用ready()方法，給其傳遞一個函數。當文檔爲操作準備就緒的時候，就去執行該函數。】
簡寫形式：

$(function() {
   $("table tr:nth-child(even)").addClass("even");
});

【可以在同一個HTML文檔中多次使用，並且瀏覽器按照函數在頁面中定義的先後順序，一一執行指定的函數。】

四、創建DOM對象
到目前爲止，jQuery的作者使得$()函數（你的記憶裏它只是jQuery()函數的別名而已）足夠通用以便履行許多職責，從而避免把一堆全局性的名稱引入JavaScript命名空間。
此外，通過給$()函數傳遞包含HTML標記的字符串，可以即時創建相應的DOM元素。如：$("<p>Hi there!</p>").insertAfter("#followMe");

五、擴展jQuery
即使我們已經大量使用jQuery包裝器所提供的有用函數，但是jQuery庫不可能預料所有人的需求，也不應該將每個人需要的東西都預先準備好，這樣子可能導致一大堆大而笨重的、包含很少用到的功能的代碼。所以jQuery在設計上易於用附加功能來進行擴展。
特別示例：
jQuery並不提供預定義的、用於禁用一組表單元素的函數。如果在Web應用中大量使用表單，就會發現利用以下語法非常便利：
$("form#myForm input.special").disable();
幸運的是，通過擴展在調用$()時返回的包裝器，jQuery從設計上就便於擴展函數集。擴展jQuery的基本慣用語法如下：

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

【首先，$.fn.disable表示我們用名爲disable的函數來擴展$包裝器。在函數內部，this是將被操作的包裝DOM元素的集合。
然後，調用包裝器的each()方法遍歷包裝集裏的每個元素。對於每個元素，檢查該元素是否擁有disabled特性，如果擁有，則把disabled的值設爲true。
因爲我們返回each()方法的結果（即包裝器），所以擴展的全新的disable()也支持jQuery命令鏈。】

六、使用jQuery和其他庫
如果需要採用多個JavaScript庫，可能會產生衝突。jQuery避免使用大量的標識符而污染全局命名空間——可能不僅妨礙到其他庫，也妨礙到你想在頁面上採用的名稱。jQuery標識符和他的$別名防止jQuery對全局命名空間的侵入。
同時，jQuery提供了noConflict()實用工具函數來消除衝突。jQuery.noConflict();把$還原到非jQuery庫所定義的含義。

七、小結
事實上，jQuery在JavaScript命名空間中只引入了兩個新名稱——自命名的jQuery函數和它的$別名——通過使該函數高度多功能化，或基於函數的不同參數來調整所執行的操作，該庫還是提供了大量的功能。
1.選擇和包裝DOM元素以便操作。
2.充當全局實用工具函數的命名空間。
3.根據HTML標記來創建DOM元素。
4.建立代碼，當DOM爲操作準備好時立刻執行。