jQuery學習（一）

一、jQuery概念
jQuery 是一個 JavaScript 庫，可以簡化JavaScript編程，便於實現網頁的各種動作效果。
（一）JQuery的使用
下載jQuery庫引用。或者通過 CDN（內容分發網絡） 引用它。建議使用百度、又拍雲、新浪等國內CDN地址，如果你站點用戶是國外的可以使用谷歌和微軟。
（二）語法
jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。
1、 $(selector).action([function(){//jQuery動作代碼}])；美元符號$定義 jQuery；選擇器（selector）"查詢"和"查找" HTML 元素；其中選擇器要使用雙引號括起來。
注意：action([function(){//jQuery動作代碼}])；中多個執行函數表達式用逗號分隔；其中函數表達式會立即執行。
注意：jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
2、文檔就緒事件
$(document).ready(function(){//jQuery執行代碼});簡潔寫法：$(function(){//jQuery代碼});爲了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成後纔可以對 DOM 進行操作。
3、JavaScript 入口函數
window.onload = function () {//執行代碼}
4、jQuery 入口函數與 JavaScript 入口函數的區別
jQuery 的入口函數是在 html 所有標籤(DOM)都加載之後，就會去執行。
JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完後，纔會執行。
（三）jQuery事件
在 jQuery 中，網頁html的事件屬性大都有一個等效的 jQuery 方法。jQuery事件就是指元素被觸發（發生該事件）之後的響應動作即jQuery語法中action([function(){//jQuery動作代碼}]);。
1、常用的jQuery事件方法
$(document).ready() 方法允許我們在文檔完全加載完後執行函數。
click()方法是當按鈕點擊事件被觸發時會調用一個函數。
dblclick()方法觸發 dblclick鼠標雙擊事件;
mouseenter()方法當鼠標指針穿過元素時，會發生 mouseenter 事件；
mouseleave() 方法觸發 mouseleave 事件當鼠標指針離開元素時。
hover()方法用於模擬光標懸停事件，當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。
focus() 方法觸發 focus 事件當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。
blur() 方法觸發 blur 事件，當元素失去焦點時，發生 blur 事件。
注意:和HTML中的事件屬性要做好對比區分。

二、jQuery 效果（效果中大多是相對的）
（一）隱藏和顯示效果
$(selector).hide(speed,callback);和$(selector).show(speed,callback); speed可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
注意：可選的 callback 參數對於$(selector)選擇器選中n個元素，callback函數就執行n次；當 callback 函數加上括號時，函數立即執行並且只會調用一次，函數執行比效果提前執行；不加括號，選中n個元素，就執行n次。
1、隱藏顯示切換
可以使用 toggle() 方法來切換 hide() 和 show() 方法。
（二）淡入淡出效果
1、fadeIn() 用於淡入已隱藏的元素；
2、fadeOut()用於淡出可見元素； 
3、fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
4、fadeTo() 方法允許漸變爲給定的不透明度（值介於 0 與 1 之間）。語法：$(selector).fadeTo(speed,opacity,callback);其中opacity是透明度。
（三）上下滑動效果
1、slideDown()用於向下滑動元素。
2、slideUp()用於向上滑動元素。
3、slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。
（四）動畫效果
 animate() 方法允許您創建自定義的動畫。語法：$(selector).animate({params},speed,callback);
 1、必需的 params 參數定義形成動畫的 CSS 屬性。
注意：params可以設置所有css屬性，但是要使用Camel（駝峯命名法）標記法書寫所有的屬性名，例如：paddingLeft 而不是 padding-left；
 注意：所有 HTML 元素都有一個靜態位置，且無法移動。如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！
 2、屬性參數值可以使用相對值，也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=；可以把屬性的動畫值設置爲 "show"、"hide" 或 "toggle",例如： $("div").animate({  height:'toggle' });
 3、動畫效果可以使用鏈式連接，原理是使用隊列算法實現多個animate()調用。
注意：要理解JavaScript對於異步的實現原理：對於耗時的程序不進入主線程、而進入"任務隊列"（task queue）的任務，只有等主線程任務執行完畢，"任務隊列"開始通知主線程，請求執行任務，該任務纔會進入主線程執行。

參考JavaScript實現同步和異步的原理
4、stop(stopAll,goToEnd) 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。
注意：可選的 stopAll 布爾參數規定是否清除所有動畫隊列；可選的 goToEnd 參數規定是否立即完成當前動畫，默認是 false。
注意：動畫效果中Callback 函數在當前動畫 100% 完成之後才執行。沒有回調函數，程序例如彈窗會在效果完成前彈出。
5、jQuery方法鏈接允許我們在相同的元素上運行多條 jQuery 命令，一條接着另一條。
注意：在編寫方法鏈接時，可以換行或者縮進，jQuery 會拋掉多餘的空格，並當成一行長代碼來執行上面的代碼行。

三、jQuery HTML
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
 （一）jQuery DOM 操作
1、text() - 設置或返回所選元素的文本內容，其中包括換行和空格；
2、html() - 設置或返回所選元素的內容（包括 HTML 標記），其中包括換行和空格；
3、val() - 設置或返回表單字段的值；
4、attr()方法對於 HTML 元素我們自己自定義的 DOM 屬性。
5、prop()函數對於 HTML 元素本身就帶有的固有屬性
注意：如果沒有相應的屬性，prop()方法返回空字符串；attr()返回值是 undefined；
（二）設置內容和屬性
1、text(“內容”) - 設置或返回所選元素的文本內容，其中包括換行和空格；
2、html(“內容”) - 設置或返回所選元素的內容（包括 HTML 標記），其中包括換行和空格；
3、val(“內容”) - 設置或返回表單字段的值；
（三）text()、html() 以及 val() 的回調函數
回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字符串。
例如： $("#test1").text(function(i,origText){
        return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
1、attr() 方法也用於設置/改變屬性值。可以設置多個屬性值，用逗號分隔。
2、attr()方法也提供回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函數新值返回您希望使用的字符串。
注意：回調函數是用於獲取原始值，通過函數返回新的要設置的值。
例如： $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
（四）添加元素
1、append() - 在被選元素的結尾插入內容；
2、prepend() - 在被選元素的開頭插入內容；
3、after() - 在被選元素之後插入內容；
4、before() - 在被選元素之前插入內容；
注意：append/prepend 是在選擇元素內部嵌入。after/before 是在元素外面追加。
5、append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。多個參數用逗號分隔。
注意：這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。
6、after() 和 before() 方法添加若干新元素。同append/prepend方法類似。多個參數用逗號分隔。
注意：這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。
（五）刪除元素
1、remove() - 刪除被選元素（及其子元素）；
注意：remove() 方法也可接受一個參數，用於刪除指定的元素。參數可以是任何 jQuery 選擇器的語法。
2、empty() - 從被選元素中刪除子元素；
（六）獲取並設置 CSS 類
jQuery設置元素css樣式的原理：通過給元素添加或者刪除類屬性，利用類選擇器來設置其樣式。
1、addClass() - 向被選元素添加一個或多個類；
2、removeClass() - 從被選元素刪除一個或多個類；
3、toggleClass() - 對被選元素進行添加/刪除類的切換操作；
注意：元素的類屬性可以設置多個值，用空格分隔。
4、css("propertyname");方法返回指定CSS 屬性的值；
5、css("propertyname","value");設置指定的 CSS 屬性；
6、css({"propertyname":"value","propertyname":"value",...});設置多個 CSS 屬性；
（六）jQuery 尺寸
1、width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
2、height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
3、innerWidth() 方法返回元素的寬度（包括內邊距）。
4、innerHeight() 方法返回元素的高度（包括內邊距）。
5、outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
6、outerHeight() 方法返回元素的高度（包括內邊距和邊框）。

四、jQuery 遍歷
jQuery 遍歷，意爲"移動"，用於根據其相對於其他元素的關係來"查找"（或選取）HTML 元素。以某項選擇開始，並沿着這個選擇移動，直到抵達您期望的元素爲止。遍歷方法中最大的種類是樹遍歷（tree-traversal）。
（一）遍歷 - 祖先
通過 jQuery，您能夠向上遍歷 DOM 樹，以查找元素的祖先。
1、parent() 方法返回被選元素的直接父元素。
2、parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。
3、parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素。
例如：返回介於 <span> 與 <div> 元素之間的所有祖先元素： $("span").parentsUntil("div");
（二）遍歷 - 後代
通過 jQuery，您能夠向下遍歷 DOM 樹，以查找元素的後代。
1、children() 方法返回被選元素的所有直接子元素。
注意：可以使用可選參數來過濾對子元素的搜索，參數可以是任何 jQuery 選擇器的語法來選取指定直接子元素。
2、find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。其中參數爲*，會返回所有後代元素。
（三）遍歷 - 同胞(siblings)
通過 jQuery，您能夠在 DOM 樹中遍歷元素的同胞元素。
1、siblings() 方法返回被選元素的所有同胞元素。
2、next() 方法返回被選元素的下一個同胞元素。
3、nextAll() 方法返回被選元素的所有跟隨的同胞元素。
4、nextUntil() 方法返回介於兩個給定參數之間的所有跟隨的同胞元素。
注意：prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿着同胞之前元素遍歷，而不是之後元素遍歷）。
（四）遍歷- 過濾
三個最基本的過濾方法是：first(), last() 和 eq()，它們允許您基於其在一組元素中的位置來選擇一個特定的元素。其他過濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標準的元素。
1、first() 方法返回被選元素的首個元素。
2、last() 方法返回被選元素的最後一個元素。
3、eq() 方法返回被選元素中帶有指定索引號的元素。索引號從 0 開始。
4、filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
注意：參數可以是任何 jQuery 選擇器的語法來過濾指定元素，例如：$("p").filter(".url");返回帶有類名 "url" 的所有 <p> 元素；
5、not() 方法返回不匹配標準的所有元素。
注意：not() 方法與 filter() 相反。

五、jQuery Ajax（重點）
（一）AJAX 簡介
AJAX 是與服務器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。簡短地說，在不重載整個網頁的情況下，AJAX 通過後臺加載數據，並在網頁上進行顯示。
1、load() 方法從服務器加載數據，並把返回的數據放入被選元素中。語法：$(selector).load(URL,data,callback);
必需的 URL 參數規定您希望加載的 URL；可選的 data 參數是與請求一同發送的查詢字符串鍵/值對集合；可選的 callback 參數是 load() 方法完成後所執行的函數名稱。
注意：可以把 jQuery 選擇器添加到 URL 參數。例如：$("#div1").load("demo_test.txt #p1");把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中。
2、可選的 callback 參數規定當 load() 方法完成後所要允許的回調函數。回調函數可以設置不同的參數：
（1）responseTxt - 包含調用成功時的結果內容；
（2）statusTXT - 包含調用的狀態；
（3）xhr - 包含 XMLHttpRequest 對象；
注意：爲了避免多頁面情形下的代碼重複，在index文件裏只寫重複部分，剩下的一股腦放各自單獨文件 load() 進來。
（二）XMLHttpRequest 對象：用於在後臺與服務器交換數據。
（1）在不重新加載頁面的情況下更新網頁；
（2）在頁面已加載後從服務器請求數據；
（3）在頁面已加載後從服務器接收數據；
（4）在後臺向服務器發送數據；
1、XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，並且能夠以文本或者一個 DOM 文檔的形式返回內容。
注意：儘管名爲 XMLHttpRequest，它並不限於和 XML 文檔一起使用：它可以接收任何形式的文本文檔。
2、XMLHttpRequest 對象屬性
（1）readyState
HTTP 請求的狀態.當一個 XMLHttpRequest 初次創建時，這個屬性的值從 0 開始，直到接收到完整的 HTTP 響應，這個值增加到 4。

5 個狀態中每一個都有一個相關聯的非正式的名稱，下表列出了狀態、名稱和含義：

狀態	名稱	描述
0	Uninitialized	初始化狀態。XMLHttpRequest 對象已創建或已被 abort() 方法重置。
1	Open	open() 方法已調用，但是 send() 方法未調用。請求還沒有被髮送。
2	Sent	Send() 方法已調用，HTTP 請求已發送到 Web 服務器。未接收到響應。
3	Receiving	所有響應頭部都已經接收到。響應體開始接收但未完成。
4	Loaded	HTTP 響應已經完全接收。

readyState 的值不會遞減，除非當一個請求在處理過程中的時候調用了 abort() 或 open() 方法。每次這個屬性的值增加的時候，都會觸發 onreadystatechange 事件句柄。

（2）responseText屬性
包含客戶端接收到的HTTP響應的文本內容。當readyState值爲0、1或2時，responseText包含一個空字符串。當readyState值爲3(正在接收)時，響應中包含客戶端還未完成的響應信息。當readyState爲4(已加載)時，該responseText包含完整的響應信息。
（三）AJAX get() 和 post() 方法
1、$.get(URL,callback);通過 HTTP GET 請求從服務器上請求數據。
（1）必需的 URL 參數規定您希望請求的 URL；
（2）可選的 callback 參數是請求成功後所執行的函數名。回調函數有兩個參數：第一個回調參數存有被請求頁面的內容，第二個回調參數存有請求的狀態。
2、$.post(URL,data,callback);通過 HTTP POST 請求向服務器提交或獲取數據。
（1）必需的 URL 參數規定您希望請求的 URL。
（2）可選的 data 參數是連同請求發送的數據。
注意：提交到服務器的數據，多個數據使用逗號分隔，格式是鍵值對。語法和json一樣。
（3）可選的 callback 參數是請求成功後所執行的函數名。第一個回調參數存有被請求頁面的內容，第二個回調參數存有請求的狀態。
（四）noConflict() 方法
如果其他 JavaScript 框架也使用 $ 符號作爲簡寫怎麼辦？可以使用noConflict() 方法會釋放對 $ 標識符的控制，這樣其他腳本就可以使用它了。
1、可以通過全名替代簡寫的方式來使用 jQuery；
2、利用noConflict（）方法使用其他字符代替$，例如：var jq = $.noConflict();

（五）JSONP 
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。
同源策略，它是由Netscape提出的一個著名的安全策略，現在所有支持JavaScript 的瀏覽器都會使用這個策略。
1、ajax和jsonp這兩種技術在調用方式上”看起來”很像，目的也一樣，都是請求一個url，然後把服務器返回的數據進行處理，因此jquery和ext等框架都把jsonp作爲ajax的一種形式進行了封裝；
2、但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加；
3、JSONP原理
ajax請求受同源策略影響，不允許進行跨域請求，而script標籤src屬性中的鏈接卻可以訪問跨域的js腳本，利用這個特性，服務端不再返回JSON格式的數據，而是返回一段調用某個函數的js代碼，在src中進行了調用，這樣實現了跨域。

六、jQuery 插件（插件即簡化各種操作的程序）
插件的使用：引入相關文件，配置相關參數即可。
（一）Validate校驗插件
jQuery Validate 插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作爲錯誤信息，且已翻譯成其他 37 種語言。
（二）jQuery Cookie 插件
jQuery 可以通過 jquery.cookie.js 插件來操作 Cookie。
（三）jQuery Accordion
jQuery Accordion 插件用於創建摺疊菜單。它通常與嵌套的列表、定義列表或嵌套的 div 一起使用。選項用於指定結構、激活的元素和定製的動畫。
（四）jQuery Autocomplete 插件根據用戶輸入值進行搜索和過濾，讓用戶快速找到並從預設值列表中選擇。通過給 Autocomplete 字段焦點或者在其中輸入字符，插件開始搜索匹配的條目並顯示供選擇的值的列表。通過輸入更多的字符，用戶可以過濾列表以獲得更好的匹配。
（五）jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒) 允許您很容易地在一個覆蓋層顯示反饋消息。消息會在一段時間後自動消失，不需要單擊"確定"按鈕等。用戶也可以通過移動鼠標或點擊關閉按鈕加快隱藏信息。
（六）jQuery Password Validation（密碼驗證）
jQuery Password Validation（密碼驗證）插件擴展了 jQuery Validate 插件，提供了兩種組件：
一種評價密碼的相關因素的功能：比如大小寫字母的混合情況、字符（數字、特殊字符）的混合情況、長度、與用戶名的相似度（可選的）。
一種使用評價功能顯示密碼強度的驗證插件自定義方法。顯示的文本可以被本地化。
（七）jQuery Tooltip
jQuery Tooltip 插件取代了原生的工具提示框，讓它們可自定義，您只需要調整它們的內容、位置和外觀即可。
（八）jQuery 樹型菜單插件(Treeview)
jQuery Treeview 提供了一個無序靈活的可摺疊的樹形菜單。適用於一些菜單的導航，支持基於 cookie 的持久性菜單。