本文首發於我的個人部落格：cherryblog.site/
最近開啟了閱讀原始碼之旅，有興趣的童靴可以持續關注，這幾天再看 Zepto.js 的原始碼，估計博文過幾天就會出來~另外，買的十幾本書陸陸續續的在看，立志每本書都寫一本讀書筆記（相當於這本書的濃縮版 + 個人見解）

前一段在噹噹和京東上趁著打折買了十幾本程式設計的書，勵志要全部看完！在此立一個 flag，最近也是一直在讀書，發現書中更能深入的學到系統的知識。並且如果再能將書中的內容用自己的語言表達出來那就更好了。

書名：《鋒利的 jQuery》
推薦指數：☆☆☆

簡介：這本書適合初學 JS 的童靴看~內容比較基礎，我是想看 JQ 原始碼，然後發現和原始碼沒有半毛錢關係，只是比較全的介紹 jQuery 的用法。對沒有系統看過 jQuery 用法的，或者 js 的初學者還是有一定幫助的，但是如果你有一定的 js 基礎，還是不要浪費時間了。其實 jQuery 好多的用法我們並不清楚，只是將 jQuery 當做方便的元素選擇器來使用，其實 jQuery 能做的遠比這多得多。看完本篇文章，jQuery 的功能你就瞭解的差不多了。

jQuery 的優勢

強大的選擇器
出色的 DOM 操作的封裝
可靠的事件處理機制
完善的 Ajax
不汙染頂級變數
出色的瀏覽器相容性
鏈式操作方式
隱式迭代
行為層與結構層分離
豐富的外掛支援
完善的文件
開源

不汙染頂級變數

jQuery 只建立一個名為 jQuery 的物件，其所有的函式方法都在這個物件之下。其別名 $ 也可以隨時交出控制權，絕對不會汙染其他變數。該特性使 jQuery 可以與其他 JavaScript 庫共存。

鏈式操作方式

jQuery 的鏈式操作方式：對放生在同一個 jQuery 物件上的一組動作，可以直接連寫而無需重複獲取物件。

隱式迭代

當用 jQuery 找到帶有 “.myClass” 類的全部元素，然後隱藏它們時，無需迴圈遍歷每一個返回的元素。jQuery 裡的方法都被設計成自動操作物件集合，而不是單獨的物件

jQuery 程式碼的編寫

在 jQuery 庫中，$ 就是 jQuery 的一個簡寫形式，例如 $(#.foo) 與 jQuery(#.foo) 是等價的

`window.onload` 和 `$(document).ready()` 對比

--	`window.onload`	`$(document).ready()`
執行時間	必須等待網頁中所有的內容載入完畢（）包括圖片才執行	只需要 DOM 載入完就執行（不包括圖片等）
編寫個數	不能同時編寫多個	能同時編寫多個
簡化寫法	無	$(document).ready(function(){}) 可以簡寫成 $(function(){})

jQuery 的鏈式操作風格

jQuery 的鏈式操作方式：對放生在同一個 jQuery 物件上的一組動作，可以直接連寫而無需重複獲取物件。
例如：

$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();複製程式碼

為了閱讀方便，也可以將程式碼改為如下格式：

  $(this).addClass("current")            // 給當前元素新增 "current" 樣式
  .next().show()                         // 下一個元素顯示
  .parent().siblings().children("a").removeClass("current")  // 父元素的同輩元素的子元素 <a> 移除 "current" 樣式
  .next().hide();                        // 他們的下一個元素隱藏複製程式碼

jQuery 物件和 DOM 物件

DOM 物件就是 DOM 樹種的節點，通過原生 JavaScript 的 getElementsByTagName 或者 getElementsByTagId 等獲取，DOM 物件可以使用 JavaScript 中的方法。

jQuery 物件是通過 jQuery 包裝 DOM 過後的物件。

在 jQuery 物件上無法使用 DOM 物件的任何方法，同理，也不能在 DOM 物件上使用任何 jQuery 的方法啊。所以我們要區分什麼是 jQuery 的方法，什麼是 JS 原生的方法。例如，下面這些都是錯誤的

   $("#id").innerHTML
   $("#id").checked
   document.getElementById("id").html()複製程式碼

jQuery 物件和 DOM 物件相互轉換

為了能更好的區分哪些是 jQuery 哪些是 DOM 物件，我們約定俗成使用 jQuery 獲取的物件我們在變數前面加上 $ 符號。

jQuery 物件轉化為 DOM 物件

[index] 方法，就是在 jQuery 物件後面加上索引，比如：

var $cr = $(#cr);           // jQuery 物件
var cr = $cr[0];            // 將 jQuery 轉化為 DOM 物件
alert( cr.checked );        // 檢查是否轉化成功複製程式碼

get(index) 方法

var $cr = $(#cr);           // jQuery 物件
var cr = $cr.get(0);        // 將 jQuery 轉化為 DOM 物件
alert( cr.checked );        // 檢查是否轉化成功複製程式碼

DOM 物件轉化為 jQuery 物件

DOM 物件轉化為 jQuery 物件很簡單，只需要用 $() 將 DOM 物件包裝起來就好。

var cr = document.getElmentByID("cr");     // DOM 物件
var $cr = $(cr)                             // 將 DOM 物件轉為 jQuery 物件複製程式碼

解決 jQuery 和其他庫的衝突

之前遇到過類似的問題，是使用的外掛需要較低版本的 jQuery（因為不進行維護了），然後和專案中使用的較高版本的 jQuery 不相容，所以在網上查到了一個專案中是可以使用兩個不同版本的 jQuery 的。

在 jQuery 庫中，幾乎所有的外掛都被限制在它的名稱空間裡。通常，全域性物件都被很好地儲存在 jQuery 的名稱空間裡。因此和其他庫一起使用時，不會引起衝突。

預設情況下，jQuery 用 $ 作為自身的快捷方式。

jQuery 庫在其他庫之後匯入

在其他庫和 jQuery 庫都被載入完畢後，可以在任何時候呼叫 jQuery.noConflict()
函來將變數 $ 的控制權移交給其他 JavaScript 庫。

   // 引入 其他 JS 庫
   // 引入 jQuery
   <script>
        jQuery.noConflict();   // 將變數 $ 的控制權移交給其他 JS 庫
        jQuery(function(){
            jQuery("p").click(function){
                alert( jQuery(this).text() );
            }
        })
   </script>複製程式碼

也可以自定義一個快捷方式：

   // 引入 其他 JS 庫
   // 引入 jQuery
   <script>
        $j.noConflict();   // 將變數 $ 的控制權移交給其他 JS 庫
        $j(function(){
            $j("p").click(function){
                alert( $j(this).text() );
            }
        })
   </script>複製程式碼

如果你還想繼續使用 $ 而不管其他函式的 $() 方法，同時又不想與其他庫衝突，那麼你可以

        jQuery.noConflict();   // 將變數 $ 的控制權移交給其他 JS 庫
        (function( $ ){        // 定義匿名函式並設定形參 $
            $("p").click(function){
                alert( $(this).text() );
            };
        }(jQuery));            // 執行匿名函式並設定形參 jQuery複製程式碼

jQuery 庫在其他庫之前匯入

如果 jQuery 庫在其他庫之前匯入，那麼就可以直接使用“jQuery”來做一些 jQuery 的工作，同時可以使用 $() 方法作為其他庫的快捷方式（也就是說不需要寫 jQuery.noConflict();）

jQuery 選擇器

基本選擇器

選擇器	描述	返回
#id	根據給定的 ID 匹配一個元素	單個元素
.class	根據給定的類名匹配一個元素	集合元素
element	根據給定的元素名匹配一個元素（相當於 tagName ）	集合元素
*	匹配所有元素	集合元素
select1,select2,select3	將每一個選擇器匹配到的元素合併後一起返回	集合元素

層次選擇器

選擇器	描述	返回
ancestor descendant(空格)	選取 ancestor 元素裡所有的 descendant（後代）元素	集合元素
parent > child	選取子元素	集合元素
prev + next	選取緊接在 prev 元素後面的 next 元素	集合元素
prev + siblings	選取 prev 元素之後的所有 siblings 元素	集合元素

過濾選擇器

選擇器	描述	返回
:first	選取第一個元素	單個元素
:last	選取最後一個元素	單個元素
:not(selector)	去除所有與給定選擇器匹配的元素	集合元素
:even	索引為偶數（索引從 0 開始）	集合元素
:odd	索引為奇數（索引從 0 開始）	集合元素
:eq(index)	索引等於 index 的元素（index 從 0 開始）	單個元素
:gt(index)	索引大於 index	集合元素
:lt(index)	索引小於 index	集合元素
:header(index)	所有的標題元素 h1、h2、h3 等	集合元素
:animated	正在執行動畫的所有元素	集合元素
:focus	當前獲取焦點的元素	集合元素

內容過濾選擇器

選擇器	描述	返回
:contains(text)	文字中含有 “text” 的元素	集合元素
:empty	不包含子元素或者文字的空元素	集合元素
:has(selector)	含有選擇器所匹配的元素	集合元素
:parent	含有子元素或文字	集合元素
:hidden	選取所有不可見的元素	集合元素
:visible	選取所有可見的元素	集合元素

屬性過濾選擇器

選擇器	描述	返回	示例
[attribute]	擁有此屬性的元素	集合元素	`$("div[id]")` 選擇所有擁有 id 屬性的 div
[attribute=value]	屬性的值為 value 的元素	集合元素	`$("div[tittle = test]")` 屬性 `title` 為 `test` 的 div
[attribute!=value]	屬性的值不為 value 的元素	集合元素	`$("div[tittle != test]")` 屬性 `title` 不為 `test` 的 div
[attribute^=value]	屬性的值以 value 開始的元素	集合元素	`$("div[tittle^ = test]")` 屬性 `title` 以 `test` 開始的 div
[attribute$=value]	屬性的值為 value 結束的元素	集合元素
[attribute*=value]	屬性的值含有 value 的元素	集合元素
[attribute\	=value]	屬性的值等於或者以該字串為字首（該字元後跟 `-` 字元）的元素 value 的元素	集合元素
[attribute~=value]	屬性的用空格分隔的值中包含一個給定的 value	集合元素
[attribute][attrubute][attribute]	用屬性選擇器合併成一個複合屬性選擇器，滿足多個條件，每選擇一次，縮小一次範圍	集合元素

子元素過濾選擇器

選擇器	描述	返回
:nth-child(index/even/odd/equation)	選取每個父元素下的第 index 個子元素或者奇偶元素（index 從 1 開始）	集合元素
:first-child	選取每個父元素第一個子元素	集合元素
:last-child	選取每個父元素最後一個子元素	集合元素
:only-child	如果某個元素是它父元素中唯一的子元素，則會被匹配	集合元素

表單過濾選擇器

選擇器	描述	返回
:enabled	選取所有可用元素	集合元素
:disable	選取所有不可用元素	集合元素
:checked	選取所有被選中元素（核取方塊、單選框）	集合元素
:selected	選取所有被選中元素（下拉選單）	集合元素

表單選擇器

選擇器	描述	返回
:input	選取所有的 `<input>` `<textarea>` `<select>` `<button>`	集合元素
:text	選擇所有單行文字框	集合元素
:password	選擇所有的密碼框	集合元素
:radio	選擇所有的單選框	集合元素
:checkout	選擇所有的多選框	集合元素
:submit	選擇所有的提交按鈕	集合元素
:image	選擇所有的影像按鈕	集合元素
:reset	選擇所有的重置按鈕	集合元素
:button	選擇所有的按鈕	集合元素
:file	選擇所有的上傳域	集合元素
:hidden	選擇所有的不可見元素	集合元素

jQuery 選擇器完善的處理機制

如果元素不存在時，JS 不會儲存阻塞其他程式碼的執行。
$(#ID) 或者其他選擇器獲取的永遠是物件，即使網頁上沒有此元素。使用 jQuery 檢查某個元素是否存在要不能使用

   if( $(#tt) ){
       dosomething
   }複製程式碼

而是根據元素是否有長度判斷：

   if( $(#tt).length > 0 ){
       dosomething
   }複製程式碼

或者轉化為 DOM 元素來判斷

   if( $(#tt)[0] ){
       dosomething
   }複製程式碼

jQuery 中的 DOM 操作

HTML DOM 操作

插入節點

方法	描述	示例
append()	向每個匹配的元素內部追加內容	$(A).append(B) 將 B 追加到 A 中
appendTo()	將所有匹配的元素追加到指定元素中	$(B).appendTo(A) 將 B 追加到 A 中
prepend()	向每個匹配的元素內部前置內容
after()	在每個匹配的元素之後插入內容	$(A).after(B) 將 B 插入到 A 後面
insertAfter()	將所有匹配的元素插入到指定元素的後面	$(B).insert After(A) 將 B 插入到 A 後
before()	在每個匹配的元素之前插入內容	$(A).before(B) 將 B 插入在 A 的前面
insertBefore()	將所有匹配的元素插入到指定元素的前面	$(B).insertBefore(A) 將 B 插入在 A 的前面

刪除節點

remove()

從 DOM 中刪除所有匹配的元素，傳入的引數用於根據 jQuery 表示式來刪選元素

   $("ul li:eq(1)").remove();  // 獲取第二個 <li> 元素節點後，將它從網頁中刪除
   $li.appendTo("ul");         // 把剛才刪除的元素新增到 <ul> 元素中複製程式碼

這個方法的返回值是一個指向已被刪除的節點的引用，因此可以將其儲存在一個變數中，以後還可以使用。

detach()

detach() 和 delete() 一樣，也是從 DOM 中去掉所有匹配的元素，但是兩者的區別是，這個方法不會把匹配的元素從 jQuery 物件中刪除，去掉的元素的所有繫結的事件、附加的資料等都會保留下來。

empty()

清空元素中所有的後代節點。注意是清空元素內的所有節點，並不清除選中的元素

複製節點

複製節點可以使用 clone() 方法

   $("ul li").click(function(){
       $(this).clone().appendTo("ul");
   })複製程式碼

但是這樣複製的節點，被複制的新元素並不具有任何行為，如果需要新元素也具有相同的行為，那麼就需要在 clone() 方法中傳入引數 true

   $("ul li").click(function(){
       $(this).clone(true).appendTo("ul");
   })複製程式碼

其他方法

方法名	描述
replaceWith()	將所有匹配的元素都替換成 HTML 或者 DOM 元素，繫結的事件將會消失
replaceAll()	和 replaceWith() 相反
wrap()	將所有的元素單獨包裹
wrapAll()	將所有匹配的元素用一個元素來包裹如果被包裹的元素中間有其他的元素，那麼其他的元素會被放到包裹元素之後
wrapInner()	將每一個匹配的元素的字內容（包括文字節點）用其他結構化的標記包裹起來
attr()	獲取和設定元素屬性，傳遞一個引數為獲取元素屬性，傳遞兩個引數為設定元素屬性
removeAttr()	刪除文件中某個元素的特定屬性
addClass()	追加樣式
removeClass()	移除樣式如果引數為空，則清空該元素的所有 class
toggleClass()	切換樣式如果類名存在則刪除，如果類名不存在則新增
hasClass()	是否含有某個樣式，返回布林值
html()	讀取或者設定某個元素中的 HTML 內容傳遞一個引數為獲取 HTML 中的內容，傳遞兩個引數為設定 HTML 的內容
text()	讀取或者設定某個元素中的文字內容傳遞一個引數為獲取文字內容，傳遞兩個引數為設定文字內容
val()	讀取或設定元素的值在用於表單元素時，可以設定相應的元素被選中
children()	獲得匹配元素的子元素的集合（子元素非後代元素）
next()	獲得匹配元素後面緊鄰的同輩元素
prev()	獲得匹配元素前面緊鄰的同輩元素
siblings()	獲得匹配元素前後面緊鄰的同輩元
closest()	取得最近的匹配元素
parent()	獲得集合中每個元素的父級元素
parents()	獲得集合中每個元素的祖先元素
closest()	從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素

CSS DOM 操作

方法	描述
css()	讀取和設定 style 物件的各種屬性（如果值是數字，將會自動轉化為畫素值，樣式名不帶

“”樣式使用駝峰寫法）
offset() | 獲取元素在當前視窗的相對偏移，返回的物件包含兩個屬性 top、left
position() | 獲取元素相對於最近一個 position 樣式屬性設定為 relation 或者 absolute 的父節點的相對偏移
scrollTop() 、scrollLeft() | 獲取元素滾動條距離頂端的距離和距離左側的距離

JS 中的事件

事件繫結

  bind(type [, date ], fn )複製程式碼

第一個引數是事件型別，型別包括：blur focus load resize scroll unload cliock dblclick mousedown mouseup mouseover mouseout mouseenter mouseleave change select submit keyup keydown keypress keyup error
第二個引數為可選引數，作為 event.data 屬性值傳遞給事件物件的額外資料物件
第三個引數是用來繫結的處理函式

jQuery 的事件處理函式比 JS 原生的事件處理函式少了個 on

像 click mouseover mouseout 這類事件，可以直接簡寫

合成事件

jQuery 中有兩個合成事件，hover() toggle()

hover()

   hover(enter,leave)複製程式碼

hover(fn1,fn2,...fnN) 方法用於模擬游標懸停事件，當游標移動到元素上時，會觸發第一個函式（enter），當游標移出這個元素時會觸發第二個函式（leave）

toggle()

toggle() 方法用於模擬滑鼠的連續點選事件，第一次單擊元素，觸發第一個函式，第二次單擊同一個元素，會觸發第二個函式，如果有更多的函式，則依次觸發，直到最後一個。

事件冒泡

假設網頁上有兩個元素，其中一個巢狀在另一個元素裡面，並且都被繫結了 click 事件。同時 <body> 元素上也繫結了 click 事件，這樣的話，點選最內層的元素，會觸發三次 click 事件。這是因為 JavaScript 的事件冒泡機制。

在 jQuery 中，提供了 stopPropagation() 方法來停止冒泡。

阻止預設行為

網頁中有自己的預設行為，例如單擊超連結會跳轉，單擊“提交”按鈕後表單會提交，有時需要阻止預設行為。

jQuery 提供了 preventDefault() 方法來阻止元素的預設行為。

事件物件的屬性

方法名稱	描述
event.type	獲取到事件的型別
event.preventDefault()	阻止預設的事件行為
stopPropagation()	阻止事件冒泡
event.tagent()	獲取到觸發事件的元素
event.relatedTarget()	mousover 和 mouseout 所發生的元素
event.pageX event.pageY	獲取到游標相對於頁面的 x 座標和 y 座標
event.which()	滑鼠單擊事件中獲取到的左、中、右鍵，在鍵盤事件中獲取鍵盤的按鍵
event.metaKey()	為鍵盤事件獲取 `ctrl` 鍵

移除事件

   unbind([type],[data])複製程式碼

第一個引數是事件型別，第二個引數是要移除的函式。
如果沒有引數，則刪除所有的繫結事件

one() 方法

對於只要觸發一次，隨後要立即解除繫結的情況，jQuery 提供了 one() 方法。
當處理函式觸發一次後，立即被刪除。

模擬操作

trigger() 方法完成模擬操作，

   trigger(type,[data])複製程式碼

第一個引數是要觸發的事件型別，第二個引數是要傳遞給事件處理函式的附加引數，可以通過傳遞的引數來區分這次事件是程式碼觸發還是使用者觸發的

jQuery 中的動畫

方法名	說明
hide() show()	同時修改多個樣式屬性，即高度、寬度和不透明度
fadeIn() fadeOut()	只改變不透明度
slideUp() slideDown()	只改變高度
toggle()	用來代替 hide() 和 show() 方法
slideToggle()	用來代替 slideUp() 和 slideDown()
fadeToggle()	用來代替 fadeIn() 和 fadeOut()
animate()	屬於自定義動畫的方法

jQuery 中的任何動畫效果，都可以指定三種速度引數，slow、normal、fast，對應的時間長度分別是 0.6 秒，0.4 秒和 0.2 秒，也可以傳入引數，傳入數字作為引數不需要加引號，使用關鍵字需要加引號。

動畫佇列

當一個 animate() 方法中應用多個屬性時，動畫是同時發生的。
當以鏈式方法呼叫時，動畫是按順序發生（除非 queue 選項為 false）。
預設情況下，動畫都是同時發生的。
當以回撥的形式應用動畫方式時，按照回撥順序發生。

停止動畫

   stop([clearQueue,gotoEnd])複製程式碼

clearQueue 是否要清空未執行的動畫佇列
gotoEnd 是否直接跳轉到末狀態

判斷元素是否處於動畫狀態

要始終避免動畫累計而導致的動畫與使用者行為不一樣的情況。當使用者快速在某個元素上執行 animate() 時，就會出現動畫累加。

解決方法是判斷元素是否處於動畫狀態，如果使用者不處於動畫狀態，才為元素新增新的動畫，否則不新增。

延遲動畫

在動畫執行的過程中，如果想對動畫進行延遲操作，那麼可以使用 delay() 方法。

jQuery 與 Ajax

Ajax 的優勢

不需要外掛的支援
優秀的使用者體驗
提高 Web 程式的效能
減輕伺服器和頻寬的負擔

Ajax 的不足

瀏覽器對 XMLHttpRequest 物件的支援度不足
破壞瀏覽器前進後退按鈕的正常功能
對搜尋引擎的支援程度不夠
開發和除錯工具的缺乏

使用原生 JS 寫一個 Ajax

定義一個函式，通過該函式來獲取非同步資訊

 function Ajax(){         // 定義一個函式，通過該函式來獲取非同步資訊

 }複製程式碼

宣告一個空物件來裝入 XMLHttpRequest 物件

var xmlHttpReq = null;        // 宣告一個空物件來裝入 XMLHttpRequest 物件複製程式碼

例項化一個 XMLHttpRequest 物件

 if(window.XMLHttpRequest){
     xmlHttpReq = new XMLHttpRequest();   // 例項化一個 XMLHttpRequest 物件
 }複製程式碼

使用 open() 方法初始化 XMLHttpRequest 物件，指定 HTTP 方法和要使用的伺服器 URL;

xmlHttpReq.open("GET","test.php",true);   // 呼叫 open() 方法並採用非同步方式複製程式碼

使用 onreadystatechange 屬性來註冊該回撥事件處理器，當 readystatus 狀態改變時，會激發 onreadystatechange 事件然後呼叫回撥函式。
```
xmlHttpReq.onreadystatechange = RequestCallBack;複製程式碼
```
使用 send() 方法傳送請求，使用 GET 方式可以不指定引數或者使用 null 引數
```
xmlHttpReq.send(null);複製程式碼
```
當請求狀態改變時，XMLHttpRequest 物件呼叫 onreadystatechange 屬性註冊的事件處理器，在處理響應之前，事件處理器應該首先檢查 readyStatus 的值和 HTTP 狀態。當請求完成載入（readyStatus == 4）並且響應已經成功（HTTP 狀態值為 200），就可以處理響應內容；
```
     function RequestCallBack() {
         if(xmlHttpReq.readyState == 4){
             if(xmlHttpReq.status == 200){
                 document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
             }
         }
     }複製程式碼
```

jQuery 中的 Ajax

jQuery 對 Ajax 操作進行封裝，在 jQuery 中，$.ajax() 是最底層的方法，第二層是 load()、$.get()、$.post()、$.grtJSON()。

load() 方法

載入 HTML 文件

   load( url [,data] [,callback])複製程式碼

引數列表	型別	說明
url	String	請求 HTML 頁面的 URL 地址
data	Object	傳送至伺服器的 key/value 資料
callback	Function	請求完成時的回撥函式，無論請求失敗或成功

比如說我們要將一個頁面追加到另一個頁面，被追加的檔案為 inner.html，內容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>測試</p>

</body>
</html>複製程式碼

內容只有一個 <p> 標籤，然後我們建立另一個頁面，用來觸發 Ajax 事件，並用來顯示追加的 HTML，頁面內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery.min.js"></script>
</head>
<body>
<input type="button" id="send" value="獲取">
<div id="resText"></div>

<script>
    $(function () {
        $('#send').click(function () {
            $('#resText').load('inner.html')
        })
    })
</script>
</body>
</html>複製程式碼

當，點選按鈕時，頁面如下：

載入部分 HTML 文件

當前我們也可能載入部分的 HTML 文件，例如只需要載入 inner.html 中的 test 類，那麼：

    $('#resText').load('inner.html .test')複製程式碼

傳遞方式，如果沒有設定傳遞方式，那麼使用 GET 方式，如果有傳遞引數，那麼為 `POST` 方式。

回撥

   $('#resText').load('inner.html .test', functiong(responseText,textStatus,XMLHttpRequest){
       // responseText : 請求返回的內容
       // textStatus : success、error、notmodified、timeout
       // XMLHttpRequest : XMLHttpRequest 物件
   })複製程式碼

`$.get()` 方法

$.get() 方法使用 GET 方式來進行非同步請求

    $.get( url [, data] [, callback] [, type])複製程式碼

引數名稱	型別	說明
url	String	請求 HTML 頁的 URL 地址
data（可選）	Object	傳送至伺服器的 key/value 資料會作為 QueryString 附加到請求 URL 中
callback（可選）	Function	載入成功時回撥函式（只有當 Reaponse 的返回狀態是 success 才呼叫）自動將請求的結果和狀態傳遞給方法
type（可選）	String	伺服器端返回內容的格式，包括 xml、html、script、json、text、_default

`$.post()` 方法

$.post() 方法使用 GET 方式來進行非同步請求

    $.post( url [, data] [, callback] [, type])複製程式碼

GET 方式和 POST 請求方式的區別

GET 請求將引數跟在 URL 後進行傳遞，POST 則作為 HTTP 訊息的實體內容傳送給 web 伺服器，
GET 方式通常傳遞的資料不超過 2kb，POST 方式理論上沒有限制
GET 方式請求的資料會被瀏覽器快取起來，

$.ajax() 方法

$.ajax() 方法是 jQuery 最底層的 Ajax 實現，

   $.ajax(option)複製程式碼

引數名稱	型別	說明
url	String	傳送請求的 URL（預設為當前頁面）
type	String	請求方式，預設為 GET
timeout	Number	設定請求超時時間（毫秒）
data	Object 或 String	傳送到伺服器的資料
dataTpye	String	預期伺服器返回的資料型別
beforeSend	Function	傳送請求前可以修改 XMLHttpResponse 物件的函式
complete	Function	請求完成後呼叫的回撥函式（請求失敗或者成功均呼叫）
success	Function	請求成功後呼叫的回撥函式
error	Function	請求失敗後呼叫的回撥函式
global	Function	預設為 true。是否觸發全域性 Ajax 事件

序列化元素

serialize() 方法能夠將 DOM 元素內容序列化為字串，用於 Ajax 請求。即使在表單中再增加欄位，指令碼仍然能夠使用。並且不需要做其他多餘工作。

serializeArray() 方法，該方法不是返回字串，是將 DOM 序列化後，返回 JSON 格式的資料。

$.param() 方法，用來對一個陣列或物件按照 key/value 進行序列化。

    var obj = {a:1,b:2,c:3};
    var k = $.param(obj);
    alert(k);   // 輸出 a=1&b=2&c=3複製程式碼

jQuery 效能優化

使用合適的選擇器

$("#id") id 選擇器無疑是最佳提高效能的方式。因為 jQuery 底層直接呼叫本地方法 document.getElementById()，直接通過 id 返回對應的元素可以有效的縮小你定位的 DOM 元素，建議從最近的 ID 元素開始往下搜尋。
$("p")、$("div")、$("input") 標籤選擇器是效能優化第二選擇，因為 jQuery 也是直接呼叫 JS 原生方法
$(".class") 這是 jQuery 封裝的函式，ie9+ 以上是使用 JS 的原生方法，ie9 一下是使用 DOM 搜尋方式來實現
$("[attribute=value]")：利用屬性來定位 DOM 元素，大部分都是使用 DOM 搜尋方式來達到效果。所以效能並不是很理想
$(":hidden")：這和上面利用屬性類似，並且 jQuery 需要搜尋每一個元素來定位這個選擇器，所以儘量不要使用。

快取物件

我們可以將經常用的物件使用變數快取起來，因為 jQuery 會在建立每一個選擇器的過程中，查詢 DOM。
不要讓相同的選擇器在你的程式碼中出現多次。

迴圈時的 DOM 操作

在一些迴圈時，例如 for()、while()、$.each() 使用這些方法處理 DOM 元素時，要儘可能的減少操作 DOM，可以使用變數將來儲存元素，最後一次性將生產的 DOM 插入或者刪除。

陣列方式使用 jQuery 物件

使用 jQuery 選擇器獲得的結果是一個 jQuery 物件，然而，jQuery 類庫會讓你感覺你正在使用一個定義了索引和長度的陣列。在效能方面，建議使用 for 或者 while 迴圈來處理，而不是 $.each()

事件代理

每一個 JavaScript 事件（例如：click、mouseover 等）都會冒泡到父節點，當我們需要給多個元素呼叫同個函式時會很有用。

比如，我們要單擊表格的行使得改行背景顏色改變

    $("myTable td").click(function(){
        $(this).css("background",'red')
    })複製程式碼

如果你是這樣寫的話，那麼恭喜你，提供了一個錯誤的示例，??。這樣的弊端是，假使總共有 100 個 td，那麼在使用以上方式的時候，你繫結了 100 個事件，天辣，是不是很恐怖。

正確的姿勢是，只需要向他們的父節點繫結一次事件，然後通過 event.target 獲取到當前點選的元素。

    $("myTable").click(function(){
        var $clicked =  $(e.target);   // 捕捉到觸發的目標元素
        $clicked.css("background",'red');
    })複製程式碼

也可以這樣寫

    $("myTable td").on('click','td', function(){
        $(this).css("background",'red')
    })複製程式碼

讀書筆記：鋒利的JQuery