jQuery學習筆記二

attr()方法的做用是設置或者返回元素的屬性，其中attr(屬性名)格式是獲取元素屬性名的值，attr(屬性名，屬性值)格式則是設置元素屬性名的值。

使用html()和text()方法操做元素的內容，當兩個方法的參數爲空時，表示獲取該元素的內容，而若是方法中包含參數，則表示將參數值設置爲元素內容。html()方法能夠獲取元素的HTML內容，所以，原文中的格式代碼也被一塊兒獲取，而text()方法只是獲取元素中的文本內容，並不包含HTML格式代碼，因此它顯示的內容並無變「歪」。

經過addClass()和css()方法能夠方便地操做元素中的樣式，前者括號中的參數爲增長元素的樣式名稱，後者直接將樣式的屬性內容寫在括號中。

使用removeAttr(name)和removeClass(class)分別能夠實現移除元素的屬性和樣式的功能，前者方法中參數表示移除屬性名，後者方法中參數則表示移除的樣式名。

append(content)方法的功能是向指定的元素中追加內容，被追加的content參數，能夠是字符、HTML元素標記，還能夠是一個返回字符串內容的函數。

appendTo()方法也能夠向指定的元素內插入內容，它的使用格式是：

$(content).appendTo(selector)

參數content表示須要插入的內容，參數selector表示被選的元素，即把content內容插入selector元素內，默認是在尾部。

使用before()和after()方法能夠在元素的先後插入內容，它們分別表示在整個元素的前面和後面插入指定的元素或內容，調用格式分別爲：

$(selector).before(content)和$(selector).after(content)

其中參數content表示插入的內容，該內容能夠是元素或HTML字符串。

調用clone()方法能夠生成一個被選元素的副本，即複製了一個被選元素，包含它的節點、文本和屬性，它的調用格式爲：

$(selector).clone()

其中參數selector能夠是一個元素或HTML內容

replaceWith()和replaceAll()方法均可以用於替換元素或元素中的內容，但它們調用時，內容和被替換元素所在的位置不一樣，分別爲以下所示：

$(selector).replaceWith(content)和$(content).replaceAll(selector)

參數selector爲被替換的元素，content爲替換的內容。

wrap()和wrapInner()方法均可以進行元素的包裹，但前者用於包裹元素自己，後者則用於包裹元素中的內容，它們的調用格式分別爲：

$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)

參數selector爲被包裹的元素，wrapper參數爲包裹元素的格式。

使用each()方法能夠遍歷指定的元素集合，在遍歷時，經過回調函數返回遍歷元素的序列號，它的調用格式爲：

$(selector).each(function(index))

參數function爲遍歷時的回調函數，index爲遍歷元素的序列號，它從0開始。

remove()方法刪除所選元素自己和子元素，該方法能夠經過添加過濾參數指定須要刪除的某些元素，而empty()方法則只刪除所選元素的子元素。

ready()事件相似於onLoad()事件，但前者只要頁面的DOM結構加載後便觸發，然後者必須在頁面所有元素加載成功才觸發，ready()能夠寫多個，按順序執行。此外，下列寫法是相等的：

$(document).ready(function(){})等價於$(function(){});

bind()方法綁定元素的事件很是方便，綁定前，須要知道被綁定的元素名，綁定的事件名稱，事件中執行的函數內容就能夠，它的綁定格式以下：

$(selector).bind(event,[data] function)

參數event爲事件名稱，多個事件名稱用空格隔開，function爲事件執行的函數。

jquery 1.7以後，用on()代替bind()，因此之後儘可能使用on()方法綁定事件，而且on()方法第二個參數能夠傳入過濾元素。

hover()方法的功能是當鼠標移到所選元素上時，執行方法中的第一個函數，鼠標移出時，執行方法中的第二個函數，實現事件的切實效果，調用格式以下：

$(selector).hover(over，out);

over參數爲移到所選元素上觸發的函數，out參數爲移出元素時觸發的函數。

toggle()方法能夠在元素的click事件中綁定兩個或兩個以上的函數，同時，它還能夠實現元素的隱藏與顯示的切換，綁定多個函數的調用格式以下：

$(selector).toggle(fun1(),fun2(),funN(),...)

其中，fun1，fun2就是多個函數的名稱

注意：toggle()方法支持目前主流穩定的jQuery版本1.8.2，在1.9.0以後的版本是不支持的。

1.9.0及之後只須要$().toggle()便可，括號中不須要任何參數，便可實現元素的隱藏與顯示。

unbind()方法能夠移除元素已綁定的事件，它的調用格式以下：

$(selector).unbind(event,fun)

其中參數event表示須要移除的事件名稱，多個事件名用空格隔開，fun參數爲事件執行時調用的函數名稱。

若是沒有規定參數，unbind() 方法會刪除指定元素的全部事件處理程序。

one()方法能夠綁定元素任何有效的事件，但這種方法綁定的事件只會觸發一次，它的調用格式以下：

$(selector).one(event,[data],fun)

參數event爲事件名稱，data爲觸發事件時攜帶的數據，fun爲觸發該事件時執行的函數。

trigger()方法能夠直接主動觸發元素指定的事件，這些事件能夠是元素自帶事件，也能夠是自定義的事件，總之，該事件必須能執行，它的調用格式爲：

$(selector).trigger(event)

其中event參數爲須要手動觸發的事件名稱。

像click這樣默認爲單擊事件.若是想採用本身想出來的名字像click那樣被瀏覽器識別的話,就須要用trigger()方法
而trigger裏面的參數就是你綁定在元素上的那個自定義的事件名.

trigger()就是主動觸發 當頁面加載完畢主動運動設置好的事件函數 語法：$('selector').trigger('xxx') xxx是自定義事件

focus事件在元素獲取焦點時觸發，如點擊文本框時，觸發該事件；而blur事件則在元素丟失焦點時觸發，如點擊除文本框的任何元素，都會觸發該事件。

當一個元素的值發生變化時，將會觸發change事件，例如在選擇下拉列表框中的選項時，就會觸發change事件。例

$('div').on('change',function(){});

show()和hide()方法用於顯示或隱藏頁面中的元素，它的調用格式分別爲：

$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])

參數speed設置隱藏或顯示時的速度值，可爲「slow」、「fast」或毫秒數值，可選項參數callback爲隱藏或顯示動做執行完成後調用的函數名。

toggle()方法，即若是元素處於顯示狀態，調用該方法則隱藏該元素，反之，則顯示該元素，它的調用格式是：

$(selector).toggle(speed,[callback])

其中speed參數爲動畫效果時的速度值，能夠爲數字，單位爲毫秒，也但是「fast」、「slow」字符，可選項參數callback爲方法執行成功後回調的函數名稱。

可使用slideUp()和slideDown()方法在頁面中滑動元素，前者用於向上滑動元素，後者用於向下滑動元素，它們的調用方法分別爲：

$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])

其中speed參數爲滑動時的速度，單位是毫秒，可選項參數callback爲滑動成功後執行的回調函數名。

要注意的是：slideDown()僅適用於被隱藏的元素；slideup()則相反。

使用slideToggle()方法能夠切換slideUp()和slideDown()，即調用該方法時，若是元素已向上滑動，則元素自動向下滑動，反之，則元素自動向上滑動，格式爲：

$(selector).slideToggle(speed,[callback])

其中speed參數爲動畫效果時的速度值，能夠爲數字，單位爲毫秒，也但是「fast」、「slow」字符，可選項參數callback爲方法執行成功後回調的函數名稱。

fadeIn()和fadeOut()方法能夠實現元素的淡入淡出效果，前者淡入隱藏的元素，後者能夠淡出可見的元素，它們的調用格式分別爲：

$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])

其中參數speed爲淡入淡出的速度，callback參數爲完成後執行的回調函數名。

調用fadeTo()方法，能夠將所選擇元素的不透明度以淡入淡出的效果調整爲指定的值，該方法的調用格式爲：

$(selector).fadeTo(speed,opacity,[callback])

其中speed參數爲效果的速度，opacity參數爲指定的不透明值，它的取值範圍是0.0~1.0，可選項參數callback爲效果完成後，回調的函數名。

調用animate()方法能夠建立自定義動畫效果，它的調用格式爲：

$(selector).animate({params},speed,[callback])

其中，params參數爲製做動畫效果的CSS屬性名與值，speed參數爲動畫的效果的速度，單位爲毫秒，可選項callback參數爲動畫完成時執行的回調函數名。例

 $("span").animate({

                    width: "80px",

                    height: "80px"

                },

                3000, function () {

                    $("#tip").html("執行完成!");

                });

調用animate()方法不只能夠製做簡單漸漸變大的動畫效果，並且還能製做移動位置的動畫，在移動位置以前，必須將被移元素的「position」屬性值設爲「absolute」或「relative」，不然，該元素移動不了。

stop()方法的功能是在動畫完成以前，中止當前正在執行的動畫效果，這些效果包括滑動、淡入淡出和自定義的動畫，它的調用格式爲：

$(selector).stop([clearQueue],[goToEnd])

其中，兩個可選項參數clearQueue和goToEnd都是布爾類型值，前者表示是否中止正在執行的動畫，後者表示是否完成正在執行的動畫，默認爲false。

delay()方法的功能是設置一個延時值來推遲動畫效果的執行，它的調用格式爲：

$(selector).delay(duration)

其中參數duration爲延時值，它的單位是毫秒，當超過延時值時，動畫繼續執行。

使用serialize()方法能夠將表單中有name屬性的元素值進行序列化，生成標準URL編碼文本字符串，直接可用於ajax請求，它的調用格式以下：

$(selector).serialize()

其中selector參數是一個或多個表單中的元素或表單元素自己。