jQuery文檔課件

1、第三章過濾性選擇器:hidden過濾選擇器:hidden過濾選擇器的功能是獲取全部不可見的元素，這些不可見的元素中包括type屬性值為hidden的元素。例如，調(diào)用:hidden選擇器獲取不可見的<p>元素，并將該元素的內(nèi)容顯示在<div>元素中，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，先調(diào)用$("p:hidden")代碼獲取隱藏的<p>元素，并調(diào)用該元素的html()方法獲取該元素中的內(nèi)容，最后將該內(nèi)容顯示在<div>元素中。:visible過濾選擇器與上一節(jié)的:hidden過濾選擇器相反，:visible過濾選擇

2、器獲取的是全部可見的元素，也就是說，只要不將元素的display屬性值設(shè)置為“none”，那么，都可以通過該選擇器獲取。例如，使用:visible選擇器獲取可見的<p>元素，并將該元素的內(nèi)容顯示在<div>元素中，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，調(diào)用$("p:visible")選擇器代碼，獲取那個(gè)可見的<p>元素，并調(diào)用html()方法獲取該元素的內(nèi)容，最后將該內(nèi)容顯示在<div>元素中。attribute=value屬性選擇器屬性作為DOM元素的一個(gè)重要特征，也可以用于選擇器中，從本節(jié)開始將介紹通過元素屬性

3、獲取元素的選擇器，attribute=value屬性選擇器的功能是獲取與屬性名和屬性值完全相同的全部元素，其中是專用于屬性選擇器的括號(hào)符，參數(shù)attribute表示屬性名稱，value參數(shù)表示屬性值。例如，使用attribute=value屬性選擇器，獲取指定屬性名和對(duì)應(yīng)值的全部<li>元素，并設(shè)置它們顯示的文字顏色，如圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用$("lititle='我最愛'")屬性選擇器代碼，獲取了2個(gè)<li>元素，并調(diào)用css()方法設(shè)置它們?cè)陧撁嬷酗@示的文字顏色，另外，屬性值中的單引號(hào)可以不寫，由于屬性

4、名與屬性值是等號(hào)，因此，它們之間不是包含關(guān)系，而是完全相同。attribute!=value屬性選擇器與上一節(jié)介紹的attribute=value屬性選擇器正好相反，attribute!=value屬性選擇器的功能是獲取不包含屬性名，或者與屬性名和屬性值不相同的全部元素，其中是專用于屬性選擇器的括號(hào)符，參數(shù)attribute表示屬性名稱，value參數(shù)表示屬性值。例如，使用attribute!=value屬性選擇器，獲取指定不包含屬性名，或與屬性名和對(duì)應(yīng)值不同的全部<li>元素，并設(shè)置它們顯示的文字顏色，如圖所示：在瀏覽器中顯示的效果：可以看出，使用$("lititle!

5、='我最愛'")屬性選擇器代碼，獲取了3個(gè)<li>元素，其中一個(gè)是不包含title屬性名，另外兩個(gè)的title屬性值不等于“我最愛”，獲取元素后并調(diào)用css()方法設(shè)置這些元素在頁面中顯示的文字顏色。attribute*=value屬性選擇器介紹一個(gè)功能更為強(qiáng)大的屬性選擇器attribute*=value，它可以獲取屬性值中包含指定內(nèi)容的全部元素，其中是專用于屬性選擇器的括號(hào)符，參數(shù)attribute表示屬性名稱，value參數(shù)表示對(duì)應(yīng)的屬性值。例如，使用attribute*=value屬性選擇器，獲取屬性值中包含某一指定內(nèi)容的全部<li>元素

6、，并設(shè)置它們顯示的文字顏色，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用$("lititle*='最'")屬性選擇器代碼，獲取了3個(gè)<li>元素，這些元素的title屬性值中都包含了“最”字符，獲取這些元素后并調(diào)用css()方法設(shè)置這些元素在頁面中顯示的文字顏色。:first-child子元素過濾選擇器通過上面章節(jié)的學(xué)習(xí)，我們知道使用:first過濾選擇器可以獲取指定父元素中的首個(gè)子元素，但該選擇器返回的只有一個(gè)元素，并不是一個(gè)集合，而使用:first-child子元素過濾選擇器則可以獲取每個(gè)父元素中返回的首個(gè)子元素，它是一個(gè)集合，常用

7、多個(gè)集合數(shù)據(jù)的選擇處理。如下圖，如果想把頁面中每個(gè)ul中的第一個(gè)li獲取到，并改變其顏色。則可以使用: first-child在瀏覽器中顯示的效果：通過$("li:first-child")選擇器代碼，獲取了兩個(gè)<ul>父元素中的第一個(gè)<li>元素，并使用css()方法修改了它們?cè)陧撁嬷酗@示的文字顏色。:last-child子元素過濾選擇器與:first-child子元素過濾選擇器功能相反，:last-child子元素過濾選擇器的功能是獲取每個(gè)父元素中返回的最后一個(gè)子元素，它也是一個(gè)集合，常用多個(gè)集合數(shù)據(jù)的選擇處理。例如，使用:last-child子

8、元素過濾選擇器，修改“蔬菜”和“水果”中最后一個(gè)顯示的文字顏色，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，通過$("li:last-child")選擇器代碼，獲取了兩個(gè)<ul>父元素中的最后一個(gè)<li>元素，并使用css()方法修改了它們?cè)陧撁嬷酗@示的文字顏色。第4章 -表單選擇器:input表單選擇器如何獲取表單全部元素？:input表單選擇器可以實(shí)現(xiàn)，它的功能是返回全部的表單元素，不僅包括所有<input>標(biāo)記的表單元素，而且還包括<textarea>、<select> 和 <button>

9、標(biāo)記的表單元素，因此，它選擇的表單元素是最廣的。如下圖所示，使用:input表單選擇器獲取表單元素，并向這些元素增加一個(gè)CSS樣式類別，修改它們?cè)陧撁嬷酗@示的邊框顏色。在瀏覽器中顯示的效果：可以看出，通過調(diào)用$("#frmTest :input")表單選擇器代碼獲取了表單中的全部元素，并使用addClass()方法修改它們?cè)陧撁嬷酗@示的邊框顏色。addClass()方法的功 能是為元素添加指定的樣式類別名稱，它的更多使用將會(huì)在后續(xù)章節(jié)中進(jìn)行詳細(xì)介紹。:text表單文本選擇器:text表單文本選擇器可以獲取表單中全部單行的文本輸入框元素，單行的文本輸入框就像一個(gè)不換行的字條工

10、具，使用非常廣泛。例如，在表單中添加多個(gè)元素，使用:text選擇器獲取單行的文本輸入框元素，并修改字的邊框顏色，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，通過:text表單選擇器只獲取單行的文本輸入框元素，對(duì)于<textarea>區(qū)域文本、按鈕元素?zé)o效:password表單密碼選擇器如果想要獲取密碼輸入文本框，可以使用:password選擇器，它的功能是獲取表單中全部的密碼輸入文本框元素。例如，在表單中添加多個(gè)輸入框元素，使用:password獲取密碼輸入文本框元素，并修改它的邊框顏色，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，在多個(gè)文本輸入框中，使用:passwo

11、rd選擇器只能獲取表單中的密碼輸入文本框，并使用addClass()方法改變它的邊框顏色。:radio單選按鈕選擇器表單中的單選按鈕常用于多項(xiàng)數(shù)據(jù)中僅選擇其一，而使用:radio選擇器可輕松獲取表單中的全部單選按鈕元素。例如，在表單中添加多種類型的表單元素，使用:radio選擇器獲取并隱藏這些元素中的全部單選按鈕元素，如下圖所示：hide()方法的功能是隱藏指定的元素。在瀏覽器中顯示的效果：:checkbox復(fù)選框選擇器表單中的復(fù)選框常用于多項(xiàng)數(shù)據(jù)的選擇，使用:checkbox選擇器可以快速定位并獲取表單中的復(fù)選框元素。例如，在表單中增加多個(gè)不同類型的元素，使用:checkbox選擇器獲取其中

12、的全部復(fù)選框元素，并將它們?nèi)吭O(shè)為選中狀態(tài)，如下圖所示：在瀏覽器中顯示的效果：:submit提交按鈕選擇器通常情況下，一個(gè)表單中只允許有一個(gè)“type”屬性值為“submit”的提交按鈕，使用:submit選擇器可獲取表單中的這個(gè)提交按鈕元素。例如，在表單中添加多個(gè)不同類型的按鈕，使用:submit選擇器獲取其中的提交按鈕，并使用attr()方法修改按鈕顯示的文本內(nèi)容，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用:submit選擇器從三種類型按鈕中獲取了提交按鈕，并使用attr()方法將該按鈕顯示的文字修改為“點(diǎn)我就提交了”。image圖像域選擇器當(dāng)一個(gè)<input>元素

13、的“type”屬性值設(shè)為“image”時(shí)，該元素就是一個(gè)圖像域，使用:image選擇器可以快速獲取該類全部元素。例如，在表單中添加兩種類型的圖像元素，使用:image選擇器獲取其中的一種圖像元素，并改變?cè)撛氐倪吙驑邮剑缦聢D所示：在瀏覽器中顯示的效果：從圖中可以看出，使用:image選擇器只能獲取<input>圖像域，而不能獲取<img>格式的圖像元素。:button表單按鈕選擇器表單中包含許多類型的按鈕，而使用:button選擇器能獲取且只能獲取“type”屬性值為“button”的<input>和<button>這兩類普通按鈕元素。例如，在

14、表單中添加多種類型的按鈕元素，使用:button選擇器獲取其中的普通按鈕元素，并修改它們的邊框色，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用:button選擇器只能獲取兩種類型的普通按鈕，且修改了它們的邊框顏色，并未獲取表單中的“提交按鈕”。:checked選中狀態(tài)選擇器有一些元素存在選中狀態(tài)，如復(fù)選框、單選按鈕元素，選中時(shí)“checked”屬性值為“checked”，調(diào)用:checked可以獲取處于選中狀態(tài)的全部元素。例如，在表單中添加多個(gè)復(fù)選框和單選按鈕，其中有一些元素處于選中狀態(tài)，使用:checked獲取并隱藏處于選中狀態(tài)的元素，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看

15、出，使用:checked選擇器可以獲取處于選中狀態(tài)的元素，并調(diào)用hide()方法將它們進(jìn)行隱藏。:selected選中狀態(tài)選擇器與:checked選擇器相比，:selected選擇器只能獲取<select>下拉列表框中全部處于選中狀態(tài)的<option>選項(xiàng)元素。例如，在一個(gè)添加多個(gè)<option>選項(xiàng)的下拉列表框中，使用:selected選擇器修改處于選中狀態(tài)的內(nèi)容值，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用:selected選擇器獲取處于選中狀態(tài)的<option>元素，并調(diào)用text()方法修改這些選中狀態(tài)元素顯示的內(nèi)容。text

16、()方法的功能是獲取或設(shè)置元素的文本內(nèi)容，該方法在后續(xù)將有詳細(xì)的介紹。使用attr()方法控制元素的屬性attr()方法的作用是設(shè)置或者返回元素的屬性，其中attr(屬性名)格式是獲取元素屬性名的值，attr(屬性名，屬性值)格式則是設(shè)置元素屬性名的值。例如，使用attr(屬性名)的格式獲取頁面中<a>元素的“href”屬性值，并將該值的內(nèi)容顯示在<span>元素中，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，通過attr()方法可以方便地獲取元素中指定屬性名稱的內(nèi)容，并將獲取的內(nèi)容通過html()方法顯示在頁面中。操作元素的內(nèi)容使用html()和text()方法

17、操作元素的內(nèi)容，當(dāng)兩個(gè)方法的參數(shù)為空時(shí)，表示獲取該元素的內(nèi)容，而如果方法中包含參數(shù)，則表示將參數(shù)值設(shè)置為元素內(nèi)容。例如，分別使用html()和text()方法獲取一個(gè)元素的內(nèi)pww，并將獲取的內(nèi)容顯示在不同的<div>元素中，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，html()方法可以獲取元素的HTML內(nèi)容，因此，原文中的格式代碼也被一起獲取，而text()方法只是獲取元素中的文本內(nèi)容，并不包含HTML格式代碼，所以它顯示的內(nèi)容并沒有變“歪”操作元素的樣式通過addClass()和css()方法可以方便地操作元素中的樣式，前者括號(hào)中的參數(shù)為增加元素的樣式名稱，后者直接將樣

18、式的屬性內(nèi)容寫在括號(hào)中。例如，使用addClass()方法，改變<div>元素的背景色和文字顏色，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，通過addClass()方法為<div>元素增加了兩個(gè)樣式名稱，從而改變了<div>元素的背景和文字顏色，增加多個(gè)樣式名稱時(shí)，要用空格隔開。css()方法和addClass方法用法類似，只是需要去設(shè)置具體樣式了。具體用法同學(xué)們可以在下面的任務(wù)中自己嘗試。Css():/添加一個(gè)樣式 $("#content").css("background-color","red&

19、quot;);/添加多個(gè)樣式$("#content").css("background-color":"red","color":"#fff");移除屬性和樣式使用removeAttr(name)和removeClass(class)分別可以實(shí)現(xiàn)移除元素的屬性和樣式的功能，前者方法中參數(shù)表示移除屬性名，后者方法中參數(shù)則表示移除的樣式名例如，使用removeAttr()方法移除<a>元素中的“href”屬性，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用removeAttr()

20、方法移除元素的“href”屬性后，再次顯示元素的“href”屬性值時(shí)，則為空值，<a>元素中的文字也丟失可點(diǎn)擊的效果。使用append()方法向元素內(nèi)追加內(nèi)容append(content)方法的功能是向指定的元素中追加內(nèi)容，被追加的content參數(shù)，可以是字符、HTML元素標(biāo)記，還可以是一個(gè)返回字符串內(nèi)容的函數(shù)。例如，在頁面的<body>元素中追加一個(gè)具有“id”、“title”屬性和顯示內(nèi)容的<div>元素，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，由于使用append()方法在<body>元素中追加了一些HTML 元素標(biāo)記，因此追加

21、后，這些元素標(biāo)記直接生成對(duì)應(yīng)的元素和屬性顯示在頁面中。使用appendTo()方法向被選元素內(nèi)插入內(nèi)容appendTo()方法也可以向指定的元素內(nèi)插入內(nèi)容，它的使用格式是：$(content).appendTo(selector)參數(shù)content表示需要插入的內(nèi)容，參數(shù)selector表示被選的元素，即把content內(nèi)容插入selector元素內(nèi)，默認(rèn)是在尾部。例如，使用appendTo()方法，將<div>外的<span>元素插入<div>內(nèi)，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用appendTo()方法將類別名為“red”的<s

22、pan>元素插入到<div>元素的尾部，相當(dāng)于追加的效果。appendTo()方法的前面是內(nèi)容變量名或元素名。appendTo()方法的后面只能是元素名稱。例子：$($html).appendTo("div");使用before()和after()在元素前后插入內(nèi)容使用before()和after()方法可以在元素的前后插入內(nèi)容，它們分別表示在整個(gè)元素的前面和后面插入指定的元素或內(nèi)容，調(diào)用格式分別為：$(selector).before(content)和$(selector).after(content)其中參數(shù)content表示插入的內(nèi)容，該內(nèi)容可以是

23、元素或HTML字符串。例如，調(diào)用before()方法在一個(gè)<span>元素插入另一個(gè)<span>元素，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用before()方法將HTML格式的內(nèi)容插入到原有<span>元素內(nèi)容之前，而并不僅是它的內(nèi)部文本。使用clone()方法復(fù)制元素調(diào)用clone()方法可以生成一個(gè)被選元素的副本，即復(fù)制了一個(gè)被選元素，包含它的節(jié)點(diǎn)、文本和屬性，它的調(diào)用格式為：$(selector).clone()其中參數(shù)selector可以是一個(gè)元素或HTML內(nèi)容。例如，使用clone()方法復(fù)制頁面中的一個(gè)<span>元素

24、，并將復(fù)制后的元素追加到頁面的后面，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用clone()方法復(fù)制元素時(shí)，不僅復(fù)制了該元素的文本和節(jié)點(diǎn)，還將它的“title”屬性也一起復(fù)制過來了。替換內(nèi)容replaceWith()和replaceAll()方法都可以用于替換元素或元素中的內(nèi)容，但它們調(diào)用時(shí)，內(nèi)容和被替換元素所在的位置不同，分別為如下所示：$(selector).replaceWith(content)和$(content).replaceAll(selector)參數(shù)selector為被替換的元素，content為替換的內(nèi)容。例如，調(diào)用replaceWith()方法將頁面中<

25、;span>元素替換成一段HTML字符串，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用replaceWith()方法替換類別名為“green”的<span>元素，替換之后，舊元素完全由新替換的元素所取代。使用wrap()和wrapInner()方法包裹元素和內(nèi)容wrap()和wrapInner()方法都可以進(jìn)行元素的包裹，但前者用于包裹元素本身，后者則用于包裹元素中的內(nèi)容，它們的調(diào)用格式分別為：$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)參數(shù)selector為被包裹的元素，wrapper參數(shù)為包裹元

26、素的格式。例如，調(diào)用wrap()方法，將<span>用<div>元素包裹起來，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，紅色區(qū)域的<span>元素被藍(lán)色邊框的<div>元素通過wrap()方法包裹起來使用each()方法遍歷元素使用each()方法可以遍歷指定的元素集合，在遍歷時(shí)，通過回調(diào)函數(shù)返回遍歷元素的序列號(hào)，它的調(diào)用格式為：$(selector).each(function(index)參數(shù)function為遍歷時(shí)的回調(diào)函數(shù)，index為遍歷元素的序列號(hào)，它從0開始。例如，遍歷頁面中的<span>元素，當(dāng)元素的序列號(hào)為2

27、時(shí)，添加名為“focus”的樣式，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，在使用each()方法遍歷<span>元素時(shí)，回調(diào)函數(shù)中的“index”參數(shù)為元素的序列號(hào)，它從0開始，當(dāng)為2時(shí)，表示第3個(gè)<span>元素增加樣式。使用remove()和empty()方法刪除元素remove()方法刪除所選元素本身和子元素，該方法可以通過添加過濾參數(shù)指定需要?jiǎng)h除的某些元素，而empty()方法則只刪除所選元素的子元素。例如，調(diào)用remove()方法刪除<span>元素中類別名為“red”的，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用remove

28、(".red")方法只是把<span>元素中類別名為“red”的這部分元素給刪除了。頁面加載時(shí)觸發(fā)ready()事件ready()事件類似于onLoad()事件，但前者只要頁面的DOM結(jié)構(gòu)加載后便觸發(fā)，而后者必須在頁面全部元素加載成功才觸發(fā)，ready()可以寫多個(gè)，按順序執(zhí)行。此外，下列寫法是相等的：$(document).ready(function()等價(jià)于$(function();例如，當(dāng)觸發(fā)頁面的ready()事件時(shí)，在<div>元素中顯示一句話。如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)頁面的DOM框架完成加載后，便觸發(fā)read

29、y()事件，在該事件中，通過id號(hào)為“tip”的元素，調(diào)用html()方法在頁面中顯示一段字符。使用bind()方法綁定元素的事件bind()方法綁定元素的事件非常方便，綁定前，需要知道被綁定的元素名，綁定的事件名稱，事件中執(zhí)行的函數(shù)內(nèi)容就可以，它的綁定格式如下：$(selector).bind(event,data function)參數(shù)event為事件名稱，多個(gè)事件名稱用空格隔開，function為事件執(zhí)行的函數(shù)。例如，綁定按鈕的單擊事件，單擊按鈕時(shí)，該按鈕變?yōu)椴豢捎?。如下圖所示：在瀏覽器中顯示的效果：可以看出，由于使用bind()方法，綁定了按鈕的單擊事件，在該事件中將按鈕本身的“dis

30、abled”屬性值設(shè)為“true”，表示不可用，當(dāng)點(diǎn)擊時(shí)觸該事件。使用hover()方法切換事件hover()方法的功能是當(dāng)鼠標(biāo)移到所選元素上時(shí)，執(zhí)行方法中的第一個(gè)函數(shù)，鼠標(biāo)移出時(shí)，執(zhí)行方法中的第二個(gè)函數(shù)，實(shí)現(xiàn)事件的切實(shí)效果，調(diào)用格式如下：$(selector).hover(over，out);over參數(shù)為移到所選元素上觸發(fā)的函數(shù)，out參數(shù)為移出元素時(shí)觸發(fā)的函數(shù)。例如，當(dāng)鼠標(biāo)移到<div>元素上時(shí)，元素中的字體變成金黃色，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，使用hover()方法執(zhí)行兩個(gè)函數(shù)，當(dāng)鼠標(biāo)移在元素上時(shí)調(diào)用addClass()方法增加一個(gè)樣式，移出時(shí)，調(diào)用

31、removeClass()方法移除該樣式。使用toggle()方法綁定多個(gè)函數(shù)toggle()方法可以在元素的click事件中綁定兩個(gè)或兩個(gè)以上的函數(shù)，同時(shí)，它還可以實(shí)現(xiàn)元素的隱藏與顯示的切換，綁定多個(gè)函數(shù)的調(diào)用格式如下：$(selector).toggle(fun1(),fun2(),funN(),.)其中，fun1，fun2就是多個(gè)函數(shù)的名稱例如，使用toggle()方法，當(dāng)每次點(diǎn)擊<div>元素時(shí)，顯示不同內(nèi)容，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，每次點(diǎn)擊<div>元素時(shí)，都依次執(zhí)行toggle()方法綁定的函數(shù)，當(dāng)執(zhí)行到最后一個(gè)函數(shù)時(shí)，再次點(diǎn)擊將又

32、返回執(zhí)行第一個(gè)函數(shù)。注意：toggle()方法支持目前主流穩(wěn)定的jQuery版本1.8.2，在1.9.0之后的版本是不支持的。使用unbind()方法移除元素綁定的事件unbind()方法可以移除元素已綁定的事件，它的調(diào)用格式如下：$(selector).unbind(event,fun)其中參數(shù)event表示需要移除的事件名稱，多個(gè)事件名用空格隔開，fun參數(shù)為事件執(zhí)行時(shí)調(diào)用的函數(shù)名稱。例如，點(diǎn)擊按鈕時(shí)，使用unbind()方法移除<div>元素中已綁定的“dblclick”事件，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)使用unbind()方法移除已綁定的“dblcl

33、ick”事件時(shí)，再次雙擊<div>元素，樣式和文字都沒有任何變化，表明移除事件成功。如果沒有規(guī)定參數(shù)，unbind() 方法會(huì)刪除指定元素的所有事件處理程序。使用one()方法綁定元素的一次性事件one()方法可以綁定元素任何有效的事件，但這種方法綁定的事件只會(huì)觸發(fā)一次，它的調(diào)用格式如下：$(selector).one(event,data,fun（）方法只有一次)One()方法和on（）方法的區(qū)別：One()方法只執(zhí)行一次，on（）方法執(zhí)行多次參數(shù)event為事件名稱，data為觸發(fā)事件時(shí)攜帶的數(shù)據(jù)，fun為觸發(fā)該事件時(shí)執(zhí)行的函數(shù)。例如，使用one方法綁定<div>元

34、素的單擊事件，在事件執(zhí)行的函數(shù)中，累計(jì)執(zhí)行的次數(shù)，并將該次數(shù)顯示在頁面中，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，由于使用了one()方法綁定<div>元素的單擊事件，因?yàn)槭录瘮?shù)只能執(zhí)行一次，執(zhí)行完成后，無論如何單擊，都不再觸發(fā)。調(diào)用trigger()方法手動(dòng)觸發(fā)指定的事件trigger()方法可以直接手動(dòng)觸發(fā)元素指定的事件，這些事件可以是元素自帶事件，也可以是自定義的事件，總之，該事件必須能執(zhí)行，它的調(diào)用格式為：$(selector).trigger(event)其中event參數(shù)為需要手動(dòng)觸發(fā)的事件名稱。例如，當(dāng)頁面加載時(shí)，手動(dòng)觸發(fā)文本輸入框的“select”事件，

35、使文本框的默認(rèn)值處于全部被選中的狀態(tài)，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，由于文本輸入框調(diào)用trigger()方法觸發(fā)了“select”事件，因此，當(dāng)頁面加載完成后，文本框中的默認(rèn)值處于全部被選中的狀態(tài)。文本框的focus和blur事件focus事件在元素獲取焦點(diǎn)時(shí)觸發(fā)，如點(diǎn)擊文本框時(shí)，觸發(fā)該事件；而blur事件則在元素丟失焦點(diǎn)時(shí)觸發(fā)，如點(diǎn)擊除文本框的任何元素，都會(huì)觸發(fā)該事件。 Focus blur例如，在觸發(fā)文本框的“focus”事件時(shí)-，<div>元素顯示提示內(nèi)容，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)點(diǎn)擊文本框時(shí)，觸發(fā)文本框的“focus”事件，在

36、該事件中，頁面中的<div>元素顯示提示信息。下拉列表框的change事件當(dāng)一個(gè)元素的值發(fā)生變化時(shí)，將會(huì)觸發(fā)change事件，例如在選擇下拉列表框中的選項(xiàng)時(shí)，就會(huì)觸change事件。例如，當(dāng)在頁面選擇下拉列表框中的選項(xiàng)時(shí)，將在<div>元素中顯示所選擇的選項(xiàng)內(nèi)容，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，由于使用bind()方法綁定了下拉列表的“change”事件，因此，當(dāng)選擇列表中的選項(xiàng)時(shí)，在<div>元素中顯示所選擇的選項(xiàng)內(nèi)容。調(diào)用live()方法綁定元素的事件與bind()方法相同，live()方法與可以綁定元素的可執(zhí)行事件，除此相同功能之外，

37、live()方法還可以綁定動(dòng)態(tài)元素，即使用代碼添加的元素事件，格式如下：$(selector).live(event,data,fun)參數(shù)event為事件名稱，data為觸發(fā)事件時(shí)攜帶的數(shù)據(jù)，fun為觸發(fā)該事件時(shí)執(zhí)行的函數(shù)。例如，使用live()方法綁定，頁面中按鈕元素的單擊事件，而這個(gè)按鈕是通過追加的方式添加至頁面的。如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，雖然按鈕元素是在事件綁定聲明之后，并且是通過追加的方式添加至頁面的，但由于使用的是live()方法綁定元素的事件，因此，仍然生效。注意：從 jQuery 1.7 開始，不再建議使用 .live() 方法。1.9不支持.live

38、()，本節(jié)代碼編輯器里的js引用版本改為了1.8第七章 動(dòng)畫效果調(diào)用show()和hide()方法顯示和隱藏元素show()和hide()方法用于顯示或隱藏頁面中的元素，它的調(diào)用格式分別為：$(selector).hide(speed,callback)和$(selector).show(speed,callback)參數(shù)speed設(shè)置隱藏或顯示時(shí)的速度值，可為“slow”、“fast”或毫秒數(shù)值，可選項(xiàng)參數(shù)callback為隱藏或顯示動(dòng)作執(zhí)行完成后調(diào)用的函數(shù)名。例如，在頁面中，通過點(diǎn)擊“顯示”和“隱藏”兩個(gè)按鈕來控制圖片元素的顯示或隱藏狀態(tài)，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，

39、點(diǎn)擊“顯示”按鈕時(shí)，可以將圖片元素顯示在頁面中，點(diǎn)擊“隱藏”按鈕時(shí)，則將圖片元素隱藏起來。動(dòng)畫效果的show()和hide()方法在上一小節(jié)中，調(diào)用show()和hide()方法僅是實(shí)現(xiàn)的元素的顯示和隱藏功能，如果在這些方法中增加“speed”參數(shù)可以實(shí)現(xiàn)動(dòng)畫效果的顯示與隱藏，同時(shí)，如果添加了方法的回調(diào)函數(shù)，它將在顯示或隱藏執(zhí)行成功后被調(diào)用。例如，以動(dòng)畫的方式顯示或隱藏頁面中的圖片，同時(shí)，當(dāng)顯示或隱藏完成時(shí)，對(duì)應(yīng)的按鈕狀態(tài)將變?yōu)椴豢捎?，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)以動(dòng)畫方式顯示或隱藏圖片時(shí)，圖片在顯示或隱藏過程中，則以動(dòng)畫效果按“speed”參數(shù)設(shè)置數(shù)字執(zhí)行，完成后，調(diào)

40、用回調(diào)函數(shù)中的代碼。調(diào)用toggle()方法實(shí)現(xiàn)動(dòng)畫切換效果第一節(jié)我們學(xué)過實(shí)現(xiàn)元素的顯示與隱藏需要使用hide()與show()，那么有沒有更簡(jiǎn)便的方法來實(shí)現(xiàn)同樣的動(dòng)畫效果呢？調(diào)用toggle()方法就可以很容易做到，即如果元素處于顯示狀態(tài)，調(diào)用該方法則隱藏該元素，反之，則顯示該元素，它的調(diào)用格式是：$(selector).toggle(speed,callback)其中speed參數(shù)為動(dòng)畫效果時(shí)的速度值，可以為數(shù)字，單位為毫秒，也可是“fast”、“slow”字符，可選項(xiàng)參數(shù)callback為方法執(zhí)行成功后回調(diào)的函數(shù)名稱。例如，調(diào)用toggle()方法以動(dòng)畫的效果顯示和隱藏圖片元素，如下圖所

41、示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)按鈕顯示內(nèi)容為“隱藏”時(shí)，點(diǎn)擊該按鈕，將調(diào)用toggle()方法以動(dòng)畫的方式隱藏圖片元素，隱藏成功后，按鈕顯示的內(nèi)容變?yōu)椤帮@示”。使用slideUp()和slideDown()方法的滑動(dòng)效果可以使用slideUp()和slideDown()方法在頁面中滑動(dòng)元素，前者用于向上滑動(dòng)元素，后者用于向下滑動(dòng)元素，它們的調(diào)用方法分別為：$(selector).slideUp(speed,callback)和$(selector).slideDown(speed,callback)其中speed參數(shù)為滑動(dòng)時(shí)的速度，單位是毫秒，可選項(xiàng)參數(shù)callback為滑動(dòng)成功

42、后執(zhí)行的回調(diào)函數(shù)名。要注意的是：slideDown()僅適用于被隱藏的元素；slideup()則相反。例如，調(diào)用slideUp()和slideDown()方法實(shí)現(xiàn)頁面中元素的向上和向下的滑動(dòng)效果，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，根據(jù)按鈕中顯示的內(nèi)容，分別調(diào)用slideUp()和slideDown()方法，實(shí)現(xiàn)圖片元素向上和向下的滑動(dòng)效果，當(dāng)每個(gè)滑動(dòng)效果完成時(shí)，再通過回調(diào)函數(shù)改變按鈕中顯示內(nèi)容?；瑒?dòng)與淡入淡出的區(qū)別：滑動(dòng)改變?cè)氐母叨?，淡入淡出改變?cè)氐耐该鞫?。使用slideToggle()方法實(shí)現(xiàn)圖片“變臉”效果使用slideToggle()方法可以切換slideUp()和s

43、lideDown()，即調(diào)用該方法時(shí)，如果元素已向上滑動(dòng)，則元素自動(dòng)向下滑動(dòng)，反之，則元素自動(dòng)向上滑動(dòng)，格式為：$(selector).slideToggle(speed,callback)其中speed參數(shù)為動(dòng)畫效果時(shí)的速度值，可以為數(shù)字，單位為毫秒，也可是“fast”、“slow”字符，可選項(xiàng)參數(shù)callback為方法執(zhí)行成功后回調(diào)的函數(shù)名稱。例如，在頁面中，使用slideToggle()方法實(shí)現(xiàn)圖片“變臉”效果，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)點(diǎn)擊第一張圖片時(shí)，向上滑動(dòng)收起該圖片，當(dāng)收起完成時(shí)，觸發(fā)回調(diào)函數(shù)，調(diào)用第二張圖片的slideToggle()方法，向下滑動(dòng)顯示

44、第二張圖片。使用fadeIn()與fadeOut()方法實(shí)現(xiàn)淡入淡出效果fadeIn()和fadeOut()方法可以實(shí)現(xiàn)元素的淡入淡出效果，前者淡入隱藏的元素，后者可以淡出可見的元素，它們的調(diào)用格式分別為：$(selector).fadeIn(speed,callback)和$(selector).fadeOut(speed,callback)其中參數(shù)speed為淡入淡出的速度，callback參數(shù)為完成后執(zhí)行的回調(diào)函數(shù)名。例如，分別在頁面中以淡入淡出的動(dòng)畫效果顯示圖片元素，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)點(diǎn)擊“淡出”按鈕時(shí)，調(diào)用fadeOut()方法以淡出效果隱藏圖片，當(dāng)

45、點(diǎn)擊“淡入”按鈕時(shí)，調(diào)用fadeIn()方法以淡入效果顯示圖片。使用fadeTo()方法設(shè)置淡入淡出效果的不透明度調(diào)用fadeTo()方法，可以將所選擇元素的不透明度以淡入淡出的效果調(diào)整為指定的值，該方法的調(diào)用格式為：$(selector).fadeTo(speed,opacity,callback)其中speed參數(shù)為效果的速度，opacity參數(shù)為指定的不透明值，它的取值范圍是0.01.0，可選項(xiàng)參數(shù)callback為效果完成后，回調(diào)的函數(shù)名。例如，分別調(diào)用fadeTo()方法，設(shè)置三個(gè)圖片元素的不透明度值，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，調(diào)用fadeTo()方法，分別改

46、變“opacity”參數(shù)的值，以淡入淡出的動(dòng)畫效果設(shè)置圖片元素的不透明度。調(diào)用animate()方法制作簡(jiǎn)單的動(dòng)畫效果調(diào)用animate()方法可以創(chuàng)建自定義動(dòng)畫效果，它的調(diào)用格式為：$(selector).animate(params,speed,callback)其中，params參數(shù)為制作動(dòng)畫效果的CSS屬性名與值，speed參數(shù)為動(dòng)畫的效果的速度，單位為毫秒，可選項(xiàng)callback參數(shù)為動(dòng)畫完成時(shí)執(zhí)行的回調(diào)函數(shù)名。例如，調(diào)用animate()方法以由小到大的動(dòng)畫效果顯示圖片，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，調(diào)用animate()方法，以漸漸放大的動(dòng)畫效果顯示圖片元素，

47、當(dāng)動(dòng)畫執(zhí)行完成后，通過回調(diào)函數(shù)在頁面的<div>元素中顯示“執(zhí)行完成!”的字樣。、調(diào)用animate()方法制作移動(dòng)位置的動(dòng)畫調(diào)用animate()方法不僅可以制作簡(jiǎn)單漸漸變大的動(dòng)畫效果，而且還能制作移動(dòng)位置的動(dòng)畫，在移動(dòng)位置之前，必須將被移元素的“position”屬性值設(shè)為“absolute”或“relative”，否則，該元素移動(dòng)不了。例如，調(diào)用animate()方法先將圖片向右移動(dòng)90px，然后，再將圖片寬度與高度分別增加30px，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，圖片先向右移動(dòng)了“90px”，然后，移動(dòng)成功后，再在原來的基礎(chǔ)之上以動(dòng)畫的效果增大30px，增

48、加成功后，顯示“執(zhí)行完成！”的字樣。調(diào)用stop()方法停止當(dāng)前所有動(dòng)畫效果stop()方法的功能是在動(dòng)畫完成之前，停止當(dāng)前正在執(zhí)行的動(dòng)畫效果，這些效果包括滑動(dòng)、淡入淡出和自定義的動(dòng)畫，它的調(diào)用格式為：$(selector).stop(clearQueue,goToEnd)其中，兩個(gè)可選項(xiàng)參數(shù)clearQueue和goToEnd都是布爾類型值，前者表示是否停止正在執(zhí)行的動(dòng)畫，后者表示是否完成正在執(zhí)行的動(dòng)畫，默認(rèn)為false。例如，在頁面中，當(dāng)圖片元素正在執(zhí)行動(dòng)畫效果時(shí)，點(diǎn)擊“停止”按鈕，中止正在執(zhí)行的動(dòng)畫效果，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)頁面中的圖片正在執(zhí)行動(dòng)畫效果向右

49、移動(dòng)時(shí)，由于點(diǎn)擊了“停止”按鈕，執(zhí)行了圖片元素的stop方法，因此，中止了正在執(zhí)行的動(dòng)畫效果。調(diào)用delay()方法延時(shí)執(zhí)行動(dòng)畫效果delay()方法的功能是設(shè)置一個(gè)延時(shí)值來推遲動(dòng)畫效果的執(zhí)行，它的調(diào)用格式為：$(selector).delay(duration)其中參數(shù)duration為延時(shí)值，它的單位是毫秒，當(dāng)超過延時(shí)值時(shí)，動(dòng)畫繼續(xù)執(zhí)行。例如，當(dāng)頁面中圖片動(dòng)畫正在執(zhí)行時(shí)，點(diǎn)擊“延時(shí)”按鈕調(diào)用delay()方法推遲2000毫秒后繼續(xù)執(zhí)行，如下圖所示：在瀏覽器中顯示的效果：從圖中可以看出，當(dāng)圖片動(dòng)畫正在執(zhí)行時(shí)，點(diǎn)擊“延時(shí)”按鈕，調(diào)用delay()方法中止當(dāng)前正在執(zhí)行的圖片動(dòng)畫效果，當(dāng)超過設(shè)置的延時(shí)值時(shí)，動(dòng)畫效果繼續(xù)執(zhí)行。第8章 ：使用load()方法異步請(qǐng)求數(shù)據(jù)使用load()方法通過Ajax請(qǐng)求加載服務(wù)器中的數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中，它的調(diào)用格式為：load(url,data,call