權威指南之腳本化jquery

jqury函數

jquery（）（$()）有4種不一樣的調用方式

第一種是最經常使用的調用方式是傳遞css選擇器（字符串）給$()方法。當經過這種方式調用時，$()方法會返回當前文檔中匹配該選擇器的元素集。還能夠將一個元素或jquery對象做爲第二參數傳遞給$()方法，這時返回的是該特定元素或元素集的子元素中匹配選擇器的部分。

第二種調用方式是傳遞一個Elment、Document或Window對象給$()方法。在這種狀況下，$()方法只須簡單的將該Elment、Document或Window對象封裝成jquery對象並返回。這樣可使得能用jqery方法來操做這些元素而不用原生DOM方法

第三中調用方式是傳遞HTML文本字符串給$()方法。在這種調用方式下，jquery會根據傳入的文本建立好HTML元素並封裝爲JQuery對象並返回。當經過第三種方式調用時，$()接受可選的第二參數。能夠傳遞Document對象來指定與所建立元素相關聯的文檔。第二參數還能夠說object對象。此時，假設該對象的屬性表示HTML屬性的鍵/值對，這些屬性將設置到所建立的對象上

var img=$("</img>",{src:url,css:{borderWidth:5},click:handleClick});

最後，第四種調用方式是傳入一個函數給$()方法。此時，當文檔加載完畢且DOM可操做時，傳入的函數將被調用

jQuery(function(){});

$(document).ready(function(){});

傳給jQuery()的函數在被調用時，this指向document對象，惟一的參數指向jQuery函數，這意味這能夠釋放全局的$（）函數，但在內部依舊能夠延續該習慣

jQuery.noConflict//還原$（）爲初始值

jQuery(function($){});讓$（）成爲jQuery對象的局部別名

經過$（）註冊的函數將在DOMContentLoaded事件觸發時由jQuery觸發。當瀏覽器不支持該事件時，會在load事件觸發時由jQuery觸發。這意味這文檔已經解析完畢，但圖片等外部資源有可能還未加載。若是在DOM準備就緒後再傳遞函數給$()，傳遞的函數會在$（）返回以前馬上調用

jQuery類庫還使用jQuery（）函數做爲其命名空間，

 一些概念

jquery對象

jquery對象是由jquery函數返回的對象。一個jquery對象表示一組文檔元素。

選中元素

當傳遞CSS選擇器給jquery函數時，它返回的jquery對象表示匹配該選擇器的文檔元素集。

jquery函數

jquery函數指定義在jquery命名空間中的函數。好比jQuery.noConflict（）。

jquery方法

jquery方法是有jquery函數返回的jquery對象的方法。

好比

$.each(a,f)

$("a").each(f);

查詢和查詢結果

傳遞CSS選擇器字符串給$()，它返回的jquery對象表示匹配或者稱爲選中的元素集

$的返回值是一個jquery對象。jquery對象是類數組。它們擁有length屬性和介於0～length-1之間的數值屬性

$("body").length //1

$("body")[0] //document.body

若是不想把數組標誌用在jquery對象上，可使用size（）方法來替代length屬性，用get（）方法來替代方括號索引。可使用toArray（）方法來將jquery對象轉化爲真實數組。

jquery對象還有三個有趣的屬性。selector屬性是建立jquery對象時的選擇器字符串（若是有的話）。context屬性是上下文對象，是傳遞給$（）方法的第二參數，若是沒有傳遞的話，默認是document對象，最後，全部jquery對象都一個名爲

jquery的屬性，檢測該屬性是否存在能夠簡單快捷地將jquery對象與其餘類數組對象區分開來，jquery屬性值是字符串形式的jquery版本號

var bodyscripts=$("script",document.body);

bodyscripts.selector//selector

bodyscripts.context //document.body

bodyscripts.jquery //1.4.2

$()和querySlectorAll（）區別

一、querySelectorAll在新近的瀏覽器中才實現，$在新、撈瀏覽器中都能工做

二、jquery能夠經過手動實現選擇，所以$()支持的css3選擇器能夠用在全部瀏覽器中，而不只是那些支持css3的瀏覽器。

三、$()返回的類數組對象（jquery對象）比querySelectorAll（）返回的類數組對象NodeList更加有用

each函數

它接受一個回調函數做爲惟一參數，而後它對jquery對象中的每個元素調用回調函數。回調函數做爲匹配元素的方法來調用，所以在回調函數裏this關鍵字指代Element對象，each方法還會將索引值和該元素做爲第一個和第二個參數傳遞給回調函數.注意：this和第二參數都是原生文檔元素，而不是jquery對象；若是想使用jquery方法來操做該元素，須要先用$()封裝它

jquery的each和foreach有一個顯著區別：若是回調函數在任何一個元素上返回false，遍歷將在該元素後停止（這就像在普通循環中使用break關鍵字）each返回調用自身的jquery對象。所以它能夠用於鏈式調用。

$("div").each(function(index){

$(this).prepend(index+":");

if(this.id==="last")return false;

jquery的map方法

它接受回調函數做爲參數，併爲jquery對象的每個元素都調用回調函數，同時將回調函數的返回值收集起來，並將這些返回值封裝成一個新的jquery對象返回。map調用回調函數的方式和each方法相同：元素做爲this值和第二參數傳入，元素的索引值做爲第一參數傳入。若是回調函數返回null或undefined，該值將被忽略，在本次回調中不會有任何新元素天驕到新的jquery對象中，若是回調函數返回數組或類數組對象（好比jquey對象），將會扁平化它並將其中的元素一個個添加到新的jquery對象中。注意：有map返回的jquery對象能夠不包含文檔元素，但它依舊能夠像類數組對象同樣使用

$(":header").map(function(){return this.id;}).toArrya().sort();

jquery.index()

該方法接受一個元素做爲參數，返回值是該元素在此jquery對象中的索引值，若是找不到的話，則返回-1；

若是傳遞一個jquery對象做爲參數，index方法會對該對象的第一個元素進行搜索。若是傳入的是字符串，index會把它當成csss選擇器，並返回該jquery對象中匹配該選擇器的一組元素中第一個元素的索引值。若是什麼參數都不傳入，index方法返回jquery對象中第一毗鄰元素的索引值。

is（）

它接受一個選擇器做爲參數，若是選中元素中至少有一個匹配該選擇器時，則返回true

$("div").each(function(){

if($(this).is(":hidden"))return;

})

jquery的getter和setter

jquery對象上最簡單、最多見的操做是獲取get或設置（setter）HTML屬性、css樣式、元素內容和位置高寬的值

一、jquery使用同一個方法既當getter用又作setter用，而不是定義一對方法。若是傳入一個新值給該方法，則它設置此值；若是沒制定值，則它返回當前值。

二、用作setter時，這些方法會給jquery對象中的每個元素設置值，而後返回該jquery對象以方便鏈式調用

三、用作getter時，這些方法只會查詢元素集中的第一個元素，返回單個值（若是要遍歷全部元素，請使用map）getter不會返回自身的jquery對象，所以它只能出如今鏈式調用的末尾。

四、用作setter時，這些方法常常接受對象參數。在這種狀況下，該對象的每個屬性都指定一個須要設置的名/值對

五、用作setter時，這些方法常常接受函數參數，在這種狀況下，會調用該函數來計算須要設置的值。調用該函數時的this值是對應的元素，第一個參數是該元素的索引值，當前值則做爲第二參數傳入。

獲取和設置HTML屬性

attr方法是jquery中用於html屬性的getter/setter。處理瀏覽器的兼容性和一些特殊狀況，還讓HTML屬性名和javascript屬性名能夠等同使用（當兩者存在差別時）。例如，可使用for也可使用htmlFor，可使用class也可使用className。相反的函數是removeAttr（）；

獲取和設置css屬性

css（）方法做用於元素的css樣式

在獲取樣式值時，css（）返回的是元素的當前樣式（或稱爲「計算樣式」）返回值可能來自style屬性也可能來自樣式表；注意不能獲取複合樣式的值，好比font或margin。而應該獲取單個樣式的值；好比font-weight、font-family、margin-top、margin-left。css方法容許在css樣式名中使用連字符（background-color）或使用駝峯格式javascript樣式名（backgroundColor），在獲取樣式值時，css會把數值轉換成帶有單位後綴的字符串返回。而在設置樣式值時，則會將數值轉化成字符串，在必要時添加「px」

獲取和設置css類

addClasshe和removeClass用來從選中元素中添加和刪除類。toggleClass的用途是，當元素尚未某些類時，給元素添加這些類；反之，則刪除。hasClass用來判斷某類是否存在。注意：hasClass不如addClass、removeClass、toggleClass靈活。hasClass只能接受單個類名做爲參數，而且不支持函數參數。當選中元素中的任意元素有指定css類時，hasClass返回true；若是任何元素都沒有，則返回false；is方法更靈活，可用來作一樣的事。和classList方法相似，只是jquery的方法能夠工做在全部瀏覽器中，而不只僅是那些支持html5 classList屬性的瀏覽器。此外，毫無疑問。jquery的方法可操做多個元素並支持鏈式調用。

 

 

獲取和設置HTML表單值

val方法用來設置和獲取HTML表單元素的value屬性，還能夠用於獲取和設置複選框、單選按鈕以及select元素的選中狀態

設置和獲取元素內容

text和html方法用來獲取和設置元素的純文本或HTML內容。當不帶參數調用時，text返回全部匹配元素的全部子孫文本節點的純文本內容。該方法甚至能夠工做在不支持textContent或innerText屬性的瀏覽器中

若是不帶參數調用html方法，它會返回第一個匹配元素的html內容，jquery使用innerHTML屬性來實現：x.html和x[0].innerHTML同樣高效

若是傳入字符串給text或html，該字符串會用該元素的純文本或格式化的HTML文本內容，它會替換掉全部存在的內容。和其餘setter方法同樣，咱們還能夠傳入函數，該函數用來計算出表示新內容的字符串：

獲取和設置元素的位置高寬

當瀏覽器不支持getBoundingClientRect時。使用jquery方法能夠更簡單的獲取元素的大小和位置，併兼容全部瀏覽器

使用offset方法能夠獲取或設置元素的位置。該方法相對文檔來計算位置值，返回一個對象，帶有left和top屬性，用來表示X和Y座標。若是傳入帶有這些屬性的對象給該方法。它會給元素設置指定的位置

position方法很像offset方法，但它只能用作getter，它返回的元素位置是相對於其偏移父元素的，而不是相對於文檔的。offset返回元素的絕對位置，用相對於文檔的座標來表示。而position則返回相對於元素的offsetParent（）的偏移量

width和height方法返回基本的寬度和高度，不包括內邊距、邊框、外邊距。innerWidth和innerHeight返回元素的寬度和高度，包含內邊距的寬度和高度。outerWidth和outerHeight一般返回的是包含元素內邊距和邊框的尺寸。若是像兩個方法中的任意一個傳入true值，它們還能夠返回元素外邊距的尺寸

width和heigth擁有其餘4個方法（inner和outer開頭的方法）所沒有的特性。

首先，當jquery對象的第一個元素是window或document對象時，width和height返回的是窗口的視口大小或文檔的總體尺寸。其餘方法值適用於元素，不適用窗口和文檔。

另外一個特性是width和height方法能夠是setter也能夠是getter。若是傳遞值給這些方法，它們會給jquery對象中的每個元素設置寬度或高度（注意：不能給window和document對象設置寬度或高度）。若是傳入數值，會把它當成單位爲像素的尺寸。若是傳入字符串，會把它用做css的width和height屬性的值，所以可使用任何css單位。最後，能夠傳入函數，用來計算要設置的寬度和高度。

在width和height的getter和setter行爲之間有個小的不對稱。用作getter時，這些方法返回元素的內容盒子的尺寸，不包括內邊距、邊框和外邊框。用作setter時，它們只是簡單設置css的width和height屬性。默認狀況下，這些屬性也指定內容盒子的大小。可是，若是一個元素的css box-sizing屬性設置爲border-box，則width和height方法設置的尺寸包括內邊距和邊框。對於使用context-box做爲盒模型的元素e，調用$(e).width（x）.width返回x值。然而，對於使用border-box模型的元素，這種狀況下一部不會返回x值。

scrollTop和scrollLeft可獲取或設置元素的滾動條位置。這些方法可用在window對象以及document元素上，當用在document對象上時，會獲取或設置存放該document的window對象的滾動條位置。與其餘setter不一樣，不可傳遞函數給scrollTop或scrollLeft

獲取和設置元素數據

jquery定義了一個名爲data的getter/setter方法，可用來設置或獲取與文檔元素、document或window對象相關聯的數據

需將數據與jquery對象中的元素關聯，傳遞名稱和值兩個參數給data方法便可。還能夠傳遞一個對象給data sette，此時，該對象的每個屬性都將用作名/值對，用來與jquery對象的元素關聯。注意，傳遞對象給data時，該對象的屬性將替換掉與元素相關聯的舊數據。data不接受函數參數。當將函數做爲第二參數傳遞個data時，該函數會存儲，就和其餘值同樣。

data方法也能夠用作getter，當不帶參數調用時，它會返回一個對象，含有與jquery對象中的第一個元素相關聯的全部名值對，當傳入一個字符串參數調用data時，它將會返回對於第一個元素與該字符串參數相關聯的數據值

removeData方法用來從元素中刪除數據（使用data設置值爲null或undefined和實際上刪除該值不是同一回事）。若是傳遞字符串給removeData，該方法會刪除元素中與該字符串相關聯的值。若是不帶參數調用removeData，它會刪除與元素相關聯的全部數據

 

插入和替換元素

根據調用的方法不一樣，會在選中元素的裏面、前面或後面位置插入內容。若是待插入的內容是已存在於文檔中的元素，會從當前位置移走它，若是它須要插入屢次，在必要時會複製該元素。這些方法都返回調用自身的jquery對象。注意，在replaceWith運行後，該jquery對象中的元素將再也不存在於文檔中

這5個用於結構修改的方法的都接受函數參數，用來計算出須要插入的值，和日常同樣，若是傳入函數，該函數會爲每一個選中元素調用一次。this值將指向該元素，在jquery對象中元素的索引值將做爲第一參數。對於append、prepend和replaceWith，第二參數將是該元素當前內容的HTML字符串形式。對於before和after，該函數調用時沒有第二參數

 若是傳遞字符串給第二列中的方法，會把他看成須要插入的html字符串，若是傳遞字符串給第三列中的方法，會把他看成選擇器，用來標識目標元素。

第三列中的方法不接受函數參數，第二欄能夠

第二列中的方法返回調用自身的jquery對象

複製元素

若是想複製元素到新位置而不是移動它，必須首先用clone方法來獲得一個副本。clone建立並返回每個選擇元素（包含元素全部子孫）的一個副本，返回的jquery對象的元素還不是文檔的一部分，能夠用上一節中的方法將其插入文檔中：

 

clone不會複製事件處理程序和與元素關聯的其餘數據，若是想複製這些額外的數據，請傳入true參數。

包裝函數

wrap包裝每個選中元素。wrapInner包裝每個選中元素的內容，wrapAll則將選中元素作爲一組來包裝，這些方法一般傳入一個新建立的包裝元素或用來創新包裝元素的HTML字符串，若是須要，HTML字符串能夠包含多個嵌套元素，但必須是單個最內層的元素。若是傳入函數給這些方法，它會在每一個元素的上下文中調用一次，this指向該元素，元素的索引值是惟一參數，應該返回須要返回表示包裝元素的字符串、Element或jquery對象

刪除元素

empty會刪除每一個選中元素的全部子節點（包括文本節點），但不會修改元素自身，

對比而已remove方法會從文檔中移除選中元素(以及全部元素的內容)—一般不帶參數調用remove，此時會從文檔中移除jquery對象中的全部元素。然而，若是傳入一個參數，該參數會被當成選擇器，jquery對象中只有匹配該選擇器的元素纔會被移除（若是隻想將元素從選中元素集中移除，而不須要從文檔中移除時，請使用filter，注意，將元素從新插入文檔前，移除操做是沒有必要的：簡單的將其插入新位置，就會移動它們）

remove方法會移除全部事件處理程序以及可能綁定到被移到被移除元身上的其餘數據，detach方法和remove相似，但不會移除事件處理程序和數據。想臨時從文檔中移除元素以便後續再次插入時，detach可能會更有用。

unwrap方法能夠用來實現元素的移除。其方式是wrap或wrapAll方法的反操做：移除每個選中元素的父元素，不影響選中元素及其兄弟節點

與remove和detach不一樣，unwrap不接受可選的選擇器參數。

 事件處理程序的簡單註冊

好比給單擊事件註冊一個事件處理程序，只要調用clilck方法

$("p").click(function(){$(this).css("background-color","gay")});

 調用jquery的事件註冊方法能夠給全部選中元素註冊處理程序

注意。focus和blur事件不支持冒泡，但foucusin和focusout事件都支持，相反的，mouseover和mouseout事件支持冒泡，但這常常不方便，由於很難知道鼠標是從本身感興趣的元素中移開了，還只是從該元素的子孫元素中移開了。mouseenter和mouseleave是非冒泡事件，能夠解決剛纔的問題。

resize和unload事件類型只在window對象中觸發，若是想要給這個兩個事件類型註冊處理程序，應該在$(window)上調用resize和unload方法。scroll方法常常也用於$(window)對象上，但它也能夠用在有滾動條的任何元素上（好比，當CSS的overflow屬性設置爲scroll或auto）。load方法可在$(window)上調用，用來給窗口註冊加載事件處理程序，但更好的選擇是$()。固然，還能夠在iframe和圖片上使用load方法。用不一樣的參數調用時，load還能夠用於加載新內容（經過腳本化HTTP）到元素中。error方法可用在img元素上，用來註冊當圖片加載失敗時調用的處理程序。hover（）方法用來給mouseenter和mouseleave事件註冊處理程序。調用hover（f,g）就和調用mouseenter（f）而後調用mouseleave（g）同樣。若是僅傳入一個參數給hover，該參數函數就會同時用做enter和leave事件的處理程序。

toggle方法將事件處理程序綁定到單擊事件。可指定兩個或多個處理程序函數，當單擊事件發生時，jquery每次調用一個處理程序函數

能夠傳遞HTML字符串給$()方法來建立該字符串所描述的元素，還能夠傳入一個對象（看成第二個參數），該對象有屬性組成，這些屬性可設置到新建立的元素上。這第二個參數能夠是傳遞給attr（）方法的任意對象。此外，若是這些屬性中有任何一個與上面列舉的時間註冊方法同名，該屬性值會被看成處理程序函數，並註冊爲命名事件類型的處理程序。

jquery事件處理程序

每一個事件處理程序都傳入一個jquery對象做爲第一個參數，該對象的字段提供了與該事件相關的詳細信息（好比鼠標指針的座標）。一般，調用事件處理程序時只帶有事件對象這個惟一參數。若是用trigger顯示觸發事件，能夠傳入額外的參數數組。這樣作時，這些參數會在第一個事件對象參數以後傳遞給事件處理程序。

jquery事件處理程序函數的返回值始終有意義。若是處理程序返回false，與該事件相關聯的默認行爲，以及該事件接下來的冒泡都會被取消。也就是說，返回false等同於調用event對象的preventDefault和stopPrapagation方法。一樣，當事件處理程序返回一個值（非undefined值）時，jquery會將該值存儲在Event對象的result屬性中，該屬性能夠被後續調用的事件處理程序訪問

事件處理程序的高級註冊

在最簡單形勢下，bind須要一個事件類型字符串做爲其第一參數，以及一個事件處理程序做爲其第二個參數

$("p").click(f)等價於$("p").bind("click",f);

調用bind時還能夠帶有三個參數，在這種形式下，事件類型是第一個參數，處理程序函數時第三個參數。在這兩個參數中間能夠傳入任何值，jquery會在調用處理程序前，將指定的值設置爲Event對象的data屬性。bind還有其餘高級特性。若是第一個參數是由空格分隔的事件類型列表，則處理程序函數會爲每個命名的事件類型註冊，例如

$("a").hover(f)

$("a").bind("mouseenter mouseleave",f);

bind的另外一個重要特性是容許爲註冊的事件處理程序指定命名空間。甚至能夠給處理程序分配多個命名空間

$("a").bind("mouseover.myMod",f);

$("a").bind("mouseout.myMod.yourMod",f);

bind的最後一個特性是，第一參數能夠是對象，該對象把事件名映射處處理程序函數

$("a").hover(f,g);

$("a").bind({mouseenter:f;mouseleave:g});

當使用bind的這種形式時，傳入對象的屬性名可使空格分隔的事件類型的字符串，也可包括命名空間。若是在第個對象參數以後還指定第二個參數，其值會用作每個事件綁定的數據參數。

jquery還有另外一個事件處理程序註冊方法，調用one（）方法就和bind同樣，兩者的工做原理也相似，除了在調用事件處理程序以後會自動註銷它，使用one註冊的事件處理器永遠只會觸發一次

使用addEventListener能夠註冊捕獲事件的處理。bind和one沒有改特性，IE（IE9如下版本）不支持捕獲處理程序，jquery不打算模擬該特性。

註銷事件處理程序

用bind（或任何其餘更簡單的事件註冊方法）註冊事件處理程序後，可使用unbind來註銷它，以免在未來的事件中觸發它。注意unbind只註銷用bind和相關jquery方法註冊的事件處理程序。經過addEventListener或IE的attachEvent方法註冊的處理器不會註銷，而且不會移除經過onclick和onmouseover等元素屬性定義的處理程序 ，不帶參數 時，unbind會註銷jquery對象中全部元素的（全部事件類型的）全部事件處理程序

$("*").unbind();

帶有一個字符串參數時，有該字符串指明的事件類型（能夠是多個，當字符串含有多個名字時）的全部處理程序會從jquery對象的全部元素中取消綁定

$("a").unbind("mouseover mouseout");

若是模塊使用命名空間來註冊事件處理程序，則可使用unbind，傳入一個參數，來作到只註銷命名空間下的處理程序：

若是想當心的只取消綁定本身註冊的事件處理程序，但沒有使用命名空間，必須保留事件處理程序函數的一個引用，並使用unbind帶兩個參數的版本，在這種形式下，第一個參數是事件類型字符串（不帶命名空間），第二個參數是處理程序函數

$("#mybutton").unbind("click",myclickhandler);

經過這種方式調用時，unbind從jquery對象的全部元素中註銷特定類型的指定事件處理程序函數。注意，即使使用有3個參數的bind經過額外的數據值註冊事件處理程序。也可使用有兩個參數的unbind事件來取消綁定他們

能夠傳遞單一對象參數給unbind，在這種狀況下，unbind會輪詢爲該對象的每個屬性調用一次。屬性名會用做事件類型字符串，屬性值會用做處理程序函數：

$("a").unbind({

mouseover:mouseoverHandler,

mouseout:mouseoutHandler

})

最後，還有一種方式來調用unbind。若是傳遞一個jquery event對象給unbind，它會取消綁定傳入事件的事件處理程序。，調用unbind（ev）等價於unbind（ev.type,ev.handler）.

 觸發事件

手動觸發事件最簡單的方式是不帶參數調用事件註冊的簡單方法（click和mouseover），這些事件方法在帶有一個參數時會註冊事件處理程序，不帶參數調用時則會觸發事件處理程序。例如

$("my_form").submit();

上面的submit方法本身合成了一個event對象，並觸發了給submit事件註冊的全部事件處理程序。若是這些事件處理程序都沒有返回false或者調用event對象的preventDefault，實際上將提交該表單。注意

jquery的事件觸發方法會觸發全部使用jquery事件註冊方法註冊的處理程序，也會觸發經過onsubmit等html屬性或element屬性定義的處理程序。可是，不能手動觸發使用addEventListener或attachEvent註冊的事件處理程序（固然，在真實事件觸發時，這些處理程序依舊會調用）

jquery的事件觸發機制是同步的-不涉及事件隊列。當觸發一個事件時，在調用的觸發方法返回以前，事件處理程序會馬上調用。若是觸發了一個單擊事件，被觸發的處理程序又觸發了一個submit事件，全部匹配的submit處理程序會在調用下一個點擊處理器以前調用。

一般，調用trigger時會傳入事件類型字符串做爲第一個參數，trigger會在jquery對象中的全部元素上觸發該類型事件註冊的全部處理程序

$("#my_form").trigger("submit");

與bind和unbind方法不一樣，在傳入的字符串中不能指定多個事件類型。然而，與bind和unbind同樣的是，能夠指定事件命名空間來觸發僅在該命名空間中定義的處理程序。若是隻想觸發沒有命名空間的事件處理程序，在事件類型後添加一個感嘆號就行。經過onclick等屬性註冊的處理程序被認爲是沒有命名空間的

$("button").trigger("click.ns1");//觸發某個命名空間下的單擊處理程序
$("button").trigger("click!");//觸發沒有命名空間的單擊處理程序

除了給trigger傳入事件類型字符串做爲第一個參數，還能夠傳入Event對象（或任何有type屬性的對象）。type屬性會用來判斷觸發什麼類型的處理程序。若是傳入的是jquery事件對象，該對象會傳遞給觸發的處理程序。若是傳入的是普通對象，會建立一個新的jquery event對象，普通對象的屬性會添加到新對象中，這樣，能夠很容易傳遞額外數據給事件處理程序

給事件處理程序傳遞額外數據的另外一種方式是，在手動觸發事件時，給trigger傳入第二個參數。給trigger傳入的第二個參數會成爲每一個觸發的事件處理程序的第二參數。若是傳入數組做爲第二參數，數組的每一項會做爲獨立參數傳遞給觸發處理程序

$("button").trigger("click"，true);//傳入一個額外參數
$("button").trigger("click",[x,y,z]);//傳入三個額外參數

trigg（及調用它的便捷方法）在調用事件處理程序後，會執行與觸發事件相關聯的默認操做（假設事件處理程序沒有返回false或調用事件對象的preventDefault）。若是想調用事件處理程序，但不執行默認操做，可使用triggerHandler替代

trigg。該方法和trigg相似，除了首先會調用event對象的preventDefault和cancelBubble方法。這意味這經過triggHandler手動觸發的事件不會冒泡，也不會執行相關聯的默認操做。

實時事件

若是使用bind給文檔中的全部a元素綁定了事件處理程序，接着又建立了帶有a元素的新文檔內容，這些新元素和老元素不會擁有相同的事件處理程序，其行爲將不同。要使用實時事件，須要使用delegate和undelegate方法來替代bind和unbind。一般，在$(document)上調用delegate，並傳入一個jquery選擇器字符串，一個jquery事件類型字符串以及一個jquery事件處理程序函數。它會在document或window上（或jquery對象中的任何元素上）註冊一個內部處理程序。當指定類型的事件冒泡到該內部處理程序時，它會判斷事件目標（該事件所發生在的元素）時候匹配選擇器字符串，若是匹配，則調用指定的處理程序函數。

$(document).delegate("a","mouse",linkHandler);
$(".dynamic").delegate("a","mouseover",linkHandler);

與bind方法擁有三參數版原本指定事件對象的data屬性同樣，delegate方法擁有4參數版本用來幹一樣的事。使用這種版本時，將數據值做爲第三參數傳入，處理程序函數則做爲第四參數。實時事件依賴於事件冒泡。當事件冒泡到document對象時，它喲可能已經傳遞給了不少靜態事件處理程序，若是這些處理程序中有任何一個調用了Event對象的cancelBubble方法，實時事件處理程序將永遠不會調用。

live也能夠用來註冊實時事件，和bind同樣，lvie也有兩參數和三參數的調用形式，

$("a").live("mouseover",linkHandler);
$("a",$(".dynamic")).live("mouseover",linkHandler);

在jquery對象上調用live方法時，該對象中的元素實際上並無使用。真正有關係的是用來建立jquery對象的選擇器字符串和上下文對象（傳遞給$的第一個和第二個參數）。jquery對象經過context和selector屬性來使得這些值可用，一般，僅帶一個參數調用$時，context是當前文檔。所以，對於jquery對象x，下面兩行等效

x.live(type);
$(x.context).delegate(x.selector,type,handler);

要註銷實時事件處理程序，使用die或undelegate，能夠帶一個或兩個參數調用die。帶有一個事件類型參數時，die會移出匹配選擇器和事件類型的全部實時事件處理程序 。帶有事件類型和處理程序函數參數時，它值刪除指定的處理程序。                                                                   

$("a").die("mouseover");//移除a元素上mouseover事件的全部實時處理程序

$("a").die("mouseover",linkHandler);//只移除一個指定的實時處理程序

   undelegate相似die，但更顯示的分開context（內部事件處理程序所註冊的元素）和選擇器字符串

           最後，undelegate也不帶任何參數調用，在這種狀況下，   它會註銷從選中元素委託的 全部實時事件處理程序。                                                                                                 

動畫效果fadeIn和fadeOut

每段動畫都有時長，用來指定動畫效果持續多長時間。能夠用毫秒數值或字符串來指定時長。字符串fast表示200ms。字符串slow表示600ms。若是指定的字符串時長jquery沒法識別，則採用默認時長400ms，能夠個jquery.fx.speeds添加新的字符串到數值映射關係來定義新的時長名字：

jquery.fx.speeds["medium-fast"]=300;

jquery.fx.speeds["medium-slow"]=500;

jquery動畫方法常用動畫時長來做爲可選的第一個參數。若是省略時長參數，一般會獲得默認值400ms。

$("#message").fadeIn();//400ms

$("#message").fadeOut("fast")//200ms

禁用動畫

$(".stopmoving").click(function(){jquery.fx.off=true;})

jquery動畫是異步，調用fadeIn等動畫方法，它會馬上返回，動畫則在後臺執行，因爲動畫方法會在動畫完成以前返回，所以能夠向不少jquery動畫方法傳入第二個參數（哦也是可選的），該參數時一個函數，會在動畫完成時調用。該函數在調用時不會有任何參數傳入，但this值會設置爲發生動畫的文檔元素。對於每一個選中元素都會調用一次該回調函數：

$("#message").fadeIn("fast",function(){$(this).text("hell world");});//用淡入效果快速顯示元素，動畫完成時，在元素裏顯示一些文字

給動畫方法傳入回調函數，能夠在動畫結束時執行操做。jquery動畫方法能夠接受可選的時長和回調函數。還能夠傳入一個對象來調用動畫方法，該對象的屬性值指定動畫選項：

$("#message").fadeIn({
duration:"fast",
complete:function(){$(this).text("hello world");}
});

fadeIn fadeOut fadeTo

show hide toggle

fadeOut方法可讓元素不可見，但依然保留了元素在文檔佈局中的佔位。hide方法則會將元素從佈局中移除，就好象把CSS的display屬性設置爲none同樣。給toggle傳入true和不帶參數調用show是同樣的，傳入false則和不帶參數調用hide是同樣的。注意，若是傳入兩個或多個函數參數給toggle，它會註冊爲事件處理程序

slideDown slideUp、slideToggle

slideUp會隱藏jquery對象中的元素，方式是將其高度動態變化到0，而後設置css的display屬性爲none

animate方法

傳給animate方法的第一個參數時指定動畫內容，剩餘參數指定如何定製動畫。第一個參數時必需的：它必須是一個對象，該對象的屬性指定要變化的css屬性和它們的目標值。animate方法會將每一個元素的這些css屬性從初始值指定的目標值

$("img").animate({height:0});

第二個參數時可選的，能夠傳入一個選項對象給animate方法

$("#sprite").animate({opactiy:.25,font-size:10},{durarion:500,complete:function(){this.text("goodbye");}

});

除了將選項對象做爲第二個參數傳入，animate方法還容許三個最經常使用的選項做爲參數傳入。能夠將動畫時長（數值或字符串）做爲第二個參數傳入。能夠指定緩動函數名爲第三個參數。最後能夠將回調函數指定爲第四個參數。

動畫屬性對象

animate方法的第一參數必須是對象。該對象的屬性名必須是css屬性名，這些屬性的值必須是動畫的目標值。動畫只支持數值屬性：對於顏色、字體或display等枚舉屬性是沒法實現動畫效果的，若是屬性值是數值,則默認單位是像素。若是屬性值

是字符串，能夠指定單位。還能夠指定相對值，用+=前綴表示增長，或用-=表示減小；例如

$("p").animate({"margin-left":"+=.5in",opacity:"-=.1"})

支持「margin-left」和「marginLeft」兩種寫法

除了數值（能夠帶有單位、+=或-=前綴），在進去而已動畫屬性對象中，還可使用三個其餘值，hide值會保存屬性的當前值，而後將該屬性的值變化到0，show值會將css屬性的值還原到以前保存的值，若是一段動畫使用了show，jquery會在動畫完成時調用show方法。若是一段動畫使用了hide，jquery會在動畫完成時調用hide方法

動畫選項對象

duration屬性指定動畫持續的毫秒時間，該屬性的值還能夠是fast slow或任何在jquery.fx.speeds中定義的名稱

complete屬性指明在動畫完成時的回調函數，step屬性指定在動畫每一步或每一幀調用的回調函數。在回調函數中，this指向正在連續變化的元素，第一個參數則是正在變化的屬性的當前值

queue屬性指定動畫時候須要隊列化-時候須要等到全部還沒有發生的動畫都完成後再執行該動畫，默認狀況下，全部動畫都是

隊列化的，將queue屬性設置爲false能夠取消隊列化。非隊列化的動畫會馬上執行。隨後隊列化的動畫不會等非隊列化的動畫執行完成後才執行。剩餘的動畫選項和緩動函數有關

動畫的取消、延遲和隊列

stop方法接受兩個可選的布爾參數。若是第一個參數時true，會清楚該選擇元素上的動畫隊列：除了中止當前動畫，還會取消任何等待執行的動畫。第一參數的默認值是false：若是忽略該參數，等待執行的動畫不會被取消。第二個參數用來指定正在連續變化的css屬性是否保留當前值，仍是應該變化到最終目標值。傳入true可讓它們變化到最終值。傳入false（或省略該參數）會讓他們保持爲當前值。

load方法

向它傳入一個url，它會異步加載該url的內容，而後將內容插入每個選中元素，替換掉已經存在的內容

setInterval(function(){$("#status").load("status_report.html");},60000);//每隔60秒加載並顯示最新的狀態報告

若是傳給改方法的第一參數是函數而不是字符串，則load方法是事件處理程序註冊方法而不是ajax方法。

若是隻想顯示被加載文檔的一部分，能夠在url後面添加一個空格和一個jquery選擇器

$("#temp").load("wheather_report.html #temperature");//加載並顯示天氣預告的溫度部分

除了必須的url參數，load方法還接受兩個可選參數。第一個可選參數表示的數據，能夠追加到url後面，或者與請求一塊兒發送。若是傳入的是字符串，則會追加到url後面，若是傳入對象，該對象會被轉化爲一個用&分隔的名值對後一塊兒發送，一般狀況下，load方法發送http get請求，可是若是傳入數據對象，則發送post請求：

$("#temp").load("wheather_report.html","zipcode=01243");//加載並顯示天氣預告

$("#temp").load("wheather_report.html",{zipcode:01234,units:'f'});//加載並顯示天氣預告

load方法的另外一可選參數是回調函數，當ajax請求成功或未成功，以及（當請求成功時）url加載完畢並插入選中元素時，會調用該回調函數。若是沒有指定任何數據，回調函數能夠做爲第二個參數傳入，不然，它必須是第三個參數。在jquery對象的每一元素上都會跳躍回調函數，而且每次調用都會傳入三個參數：被加載url的完整文本內容、狀態碼，以及用來加載該url的XMLHttpRequest對象。其中，狀態參數是jquery的狀態碼，不是http的狀態碼，其值相似success、error和timeout的字符串。