讀書筆記：鋒利的JQuery

本文首發於個人我的博客：cherryblog.site/
最近開啓了閱讀源碼之旅，有興趣的童靴能夠持續關注，這幾天再看 Zepto.js 的源碼，估計博文過幾天就會出來~另外，買的十幾本書陸陸續續的在看，立志每本書都寫一本讀書筆記（至關於這本書的濃縮版 + 我的看法）

前一段在噹噹和京東上趁着打折買了十幾本編程的書，勵志要所有看完！在此立一個 flag，最近也是一直在讀書，發現書中更能深刻的學到系統的知識。而且若是再能將書中的內容用本身的語言表達出來那就更好了。

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

鋒利的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 對象

1. [index] 方法，就是在 jQuery 對象後面加上索引，好比：

   var $cr = $(#cr);           // jQuery 對象
   var cr = $cr[0];            // 將 jQuery 轉化爲 DOM 對象
   alert( cr.checked );        // 檢查是否轉化成功複製代碼

2. 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)	全部的標題元素 h一、h二、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 )複製代碼

1. 第一個參數是事件類型，類型包括：blur focus load resize scroll unload cliock dblclick mousedown mouseup mouseover mouseout mouseenter mouseleave change select submit keyup keydown keypress keyup error
2. 第二個參數爲可選參數，做爲 event.data 屬性值傳遞給事件對象的額外數據對象
3. 第三個參數是用來綁定的處理函數

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

1. 定義一個函數，經過該函數來獲取異步信息

   function Ajax(){         // 定義一個函數，經過該函數來獲取異步信息
   
    }複製代碼

2. 聲明一個空對象來裝入 XMLHttpRequest 對象

   var xmlHttpReq = null;        // 聲明一個空對象來裝入 XMLHttpRequest 對象複製代碼

3. 實例化一個 XMLHttpRequest 對象

   if(window.XMLHttpRequest){
        xmlHttpReq = new XMLHttpRequest();   // 實例化一個 XMLHttpRequest 對象
    }複製代碼

4. 使用 open() 方法初始化 XMLHttpRequest 對象，指定 HTTP 方法和要使用的服務器 URL;

   xmlHttpReq.open("GET","test.php",true);   // 調用 open() 方法並採用異步方式複製代碼

5. 使用 onreadystatechange 屬性來註冊該回調事件處理器，當 readystatus 狀態改變時，會激發 onreadystatechange 事件而後調用回調函數。

   xmlHttpReq.onreadystatechange = RequestCallBack;複製代碼

6. 使用 send() 方法發送請求，使用 GET 方式能夠不指定參數或者使用 null 參數

   xmlHttpReq.send(null);複製代碼

7. 當請求狀態改變時，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>複製代碼

當，點擊按鈕時，頁面以下：

load() 方法

載入部分 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 性能優化

使用合適的選擇器

1. $("#id") id 選擇器無疑是最佳提升性能的方式。由於 jQuery 底層直接調用本地方法 document.getElementById()，直接經過 id 返回對應的元素能夠有效的縮小你定位的 DOM 元素，建議從最近的 ID 元素開始往下搜索。
2. $("p")、$("div")、$("input") 標籤選擇器是性能優化第二選擇，由於 jQuery 也是直接調用 JS 原生方法
3. $(".class") 這是 jQuery 封裝的函數，ie9+ 以上是使用 JS 的原生方法，ie9 一下是使用 DOM 搜索方式來實現
4. $("[attribute=value]")：利用屬性來定位 DOM 元素，大部分都是使用 DOM 搜索方式來達到效果。因此性能並非很理想
5. $(":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')
    })複製代碼