JQuery 的定義和使用方法

本文轉載自查看原文 2014-09-20 13:02 3561 經典筆記/ JQuery

環境搭建

搭建一個jQuery的開發環境非常方便，可以通過下列幾個步驟進行。

下載jQuery文件庫

在jQuery的官方網站（http:// jquery.com）中，下載最新版本的jQuery文件庫。在網站中找到最新版本文件的下載按鈕，將jQuery框架文件下載到本地即可，本教案使用的版本為穩定版：1.8.2版。

引入jQuery文件庫

下載完jQuery框架文件后，並不需要任何的安裝，僅需要使用<script>文件導入標記，將jQuery框架文件導入頁面中即可，假設該文件下載后保存在項目文件夾Jscript中，那么，在頁面的<head></head>中加入如下代碼：

在頁面的頭部分，加入上述代碼后，便完成了jQuery框架開發環境的搭建，就可以開始我們的jQuery學習了。

jQuery初體驗

如果你了解JavaScript語言，那將對你掌握jQuery如虎添翼，因為jQuery本身就是JavaScript，只不過是把JavaScript代碼包裝成拿過來就能實現特定功能的代碼庫！例如，我們想改變頁面中所有段落標簽中的文本內容：

javaScript代碼：

jQuery代碼：

以上兩段代碼完成的功能是一樣的。由此可以看出，jQuery更加的簡潔方便，我們在處理DOM時不必關心功能的實現細節。 $()就是jQuery中的函數，它的功能是獲得（）中指定的標簽元素。如示例中$(“p”)會得到一組P標簽元素,其中“p”表示CSS中的標簽選擇器。

在jQuery中 $()方法等價於jQuery()方法,前者比較常用，是后者的簡寫。一般只有在$()與其它語言沖突時才會使用jQuery()方法。

任務

我來試試：

在網頁中第12行處，使用$("div")可以看到文字的變化！如下圖所示效果:

.class 選擇器(尋找紅色鉛筆)

我們在上一小節介紹了通過使用元素名稱查詢元素的方法，其實，還可以通過元素的類別屬性查找元素，就好比在文具盒中要找一個“紅色”鉛筆一樣，根據元素的某個特征進行查找，它的調用格式如下：

$(“.class”)

其中.class參數表示元素的CSS類別(類選擇器)名稱。

例如，在頁面中，通過class選擇器獲取某個元素，並顯示該元素的class類別名稱，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，通過class選擇器的方式獲取元素，並調用元素的attr()方法獲取元素的類別名稱，並將名稱顯示在頁面中。

任務

我來試試：“向我看齊”

使用class選擇器的方式獲取元素，將類名為“green”div元素中的文字內容設置為與類名為“red”元素一樣。

ance desc選擇器

本節開始，我們將介紹層次性選擇器。

在實際應用開發中，常常是多個元素嵌套在一起，形成復雜的層次關系，通過層次選擇器，可以快速定位某一層次的一個或多個元素，ance desc選擇器就是其中之一，它的調用格式如下：

$("ance desc")

其中ance desc是使用空格隔開的兩個參數，ance參數任何有效的選擇器，desc參數是尋找元素的選擇器，類似於尋找一個家族下的全部子或孫輩，ance參數為家族名稱，desc參數為子或孫輩名稱。

例如，使用層次選擇器，獲取<div>元素中的全部<span>元素，並設置它們顯示的內容，在如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，使用層次選擇器$("div span")獲取了在<div>元素中的兩個元素，一個是<p>元素中的子元素，另一個是<p>元素外的同級元素，但它們都是在一個<div>元素下，也就是說在一個“家族”下。

ance desc選擇器

本節開始，我們將介紹層次性選擇器。

$("ance desc")

例如，使用層次選擇器，獲取<div>元素中的全部<span>元素，並設置它們顯示的內容，在如下圖所示：

在瀏覽器中顯示的效果：

任務

我來試試：親自給家族中子孫們一點顏色

使用層次選擇器，獲取<div>元素下的全部<label>元素，並改變它們的背景色。

<!DOCTYPE html>
<html>
<head>
    <title>prev + next選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>
<body>
    <div>
        碼農家族
        <label></label>
        <p></p>
        <label></label>
        <label></label>
    </div>
    <label></label>
</body>
<script type="text/javascript">
    $("div+label").css("background-color","red");
</script>
</html>
選擇器的定義與使用

prev ~ siblings選擇器

與上一節中介紹的prev + next層次選擇器相同，prev ~ siblings選擇器也是查找prev 元素之后的相鄰元素，但前者只獲取第一個相鄰的元素，而后者則獲取prev 元素后面全部相鄰的元素，它的調用格式如下：

$(“prev ~ siblings”)

其中參數prev與siblings兩者之間通過“~”符號形成一種層次相鄰的關系，表明siblings選擇器獲取的元素都是prev元素之后的同輩元素。

例如，使用prev ~ next選擇器，獲取<p>元素后面相鄰的全部元素，並設置它們在頁面中顯示的內容，如下圖所示：

在瀏覽器中顯示的效果：

可以看出，調用$("p~span")選擇器代碼，獲取了<p>元素下面兩個(全部)的<span>元素，該元素不包含<p>元素上面的元素和不屬於同輩范圍的元素。

任務

我來試試:

在編輯器第19，20行處，使用prev ~ next選擇器，獲取<p>元素下面全部的相鄰元素，並修改它們的邊框色和顯示內容。

:first過濾選擇器

本章我們介紹過濾選擇器，該類型的選擇器是根據某過濾規則進行元素的匹配，書寫時以“：”號開頭,通常用於查找集合元素中的某一位置的單個元素。

在jQuery中，如果想得到一組相同標簽元素中的第1個元素該怎樣做呢？

在下面的示例代碼中你可能注意到我們會使用

$(“li:first”)

注意：書寫時以“：”號開頭。

運行結果：

使用li:first過濾選擇器可以很方便地獲取ul列表中的第一個li元素.

:first過濾選擇器的功能是獲取第一個元素，常常與其它選擇器一起使用，獲取指定的一組元素中的第一個元素。

任務

任務：我來試試

鑒於：first和:last功能相近,在編輯器第18行處，使用:last給最后的li標簽文字添加紅色。

:first過濾選擇器

在jQuery中，如果想得到一組相同標簽元素中的第1個元素該怎樣做呢？

在下面的示例代碼中你可能注意到我們會使用

$(“li:first”)

注意：書寫時以“：”號開頭。

運行結果：

使用li:first過濾選擇器可以很方便地獲取ul列表中的第一個li元素.

:first過濾選擇器的功能是獲取第一個元素，常常與其它選擇器一起使用，獲取指定的一組元素中的第一個元素。

任務

任務：我來試試

鑒於：first和:last功能相近,在編輯器第18行處，使用:last給最后的li標簽文字添加紅色。

?不會了怎么辦

:eq(index)過濾選擇器

如果想從一組標簽元素數組中，靈活選擇任意的一個標簽元素，我們可以使用

:eq(index)

其中參數index表示索引號（即：一個整數），它從0開始，如果index的值為3，表示選擇的是第4個元素。例如：

在瀏覽器中顯示的效果：

從圖中可以看出，通過調用$("li:eq(3)")過濾選擇器代碼，獲取了第4個<li>元素，並使用css()方法設置了該元素在頁面中顯示的文字樣式。

任務

我來試試：親自“給任意一個水果披上一件紫色的外衣”

在頁面中第18行，獲取<li>子元素中的倒數第三個元素，並改變它顯示的背景色。

:contains(text)過濾選擇器

與上一節介紹的:eq(index)選擇器按索引查找元素相比，有時候我們可能希望按照文本內容來查找一個或多個元素，那么使用:contains(text)選擇器會更加方便，它的功能是選擇包含指定字符串的全部元素，它通常與其他元素結合使用，獲取包含“text”字符串內容的全部元素對象。其中參數text表示頁面中的文字。

例如:

在瀏覽器中顯示的效果：

從圖中可以看出，調用li:contains('土豪')代碼，可以很方便地獲取<li>中包含‘土豪’字符內容的全部元素，並且只要與選擇的元素中或子元素中包含該字符內容，就可以被選中。

任務

我來試試：親自感受一下通過包含字符獲取元素的功能

在頁面第18行處，使用:contains(text)選擇器獲取包含“jQuery”文字內容的全部元素，並改變它們顯示的背景顏色。

:contains(text)過濾選擇器

例如:

在瀏覽器中顯示的效果：

任務

我來試試：親自感受一下通過包含字符獲取元素的功能

在頁面第18行處，使用:contains(text)選擇器獲取包含“jQuery”文字內容的全部元素，並改變它們顯示的背景顏色。

:has(selector)過濾選擇器

除了在上一小節介紹的使用包含的字符串內容過濾元素之外，還可以使用包含的元素名稱來過濾，:has(selector)過濾選擇器的功能是獲取選擇器中包含指定元素名稱的全部元素，其中selector參數就是包含的元素名稱，是被包含元素。

例如：獲取指定包含某個元素名的全部<li>元素，並改變它們顯示文字的顏色，如下圖所示：

在瀏覽器中顯示的效果：

:hidden過濾選擇器

:hidden過濾選擇器的功能是獲取全部不可見的元素，這些不可見的元素中包括type屬性值為hidden的元素。

例如，調用:hidden選擇器獲取不可見的<p>元素，並將該元素的內容顯示在<div>元素中，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，先調用$("p:hidden")代碼獲取隱藏的<p>元素，並調用該元素的html()方法獲取該元素中的內容，最后將該內容顯示在<div>元素中。

任務

我來試試，親自獲取隱藏元素中內容

在編輯器第13、14行處，通過:hidden選擇器獲取隱藏元素，並將它的值顯示在<div>元素中。

:visible過濾選擇器

與上一節的:hidden過濾選擇器相反，:visible過濾選擇器獲取的是全部可見的元素，也就是說，只要不將元素的display屬性值設置為“none”，那么，都可以通過該選擇器獲取。

例如，使用:visible選擇器獲取可見的<p>元素，並將該元素的內容顯示在<div>元素中，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，調用$("p:visible")選擇器代碼，獲取那個可見的<p>元素，並調用html()方法獲取該元素的內容，最后將該內容顯示在<div>元素中。

任務

我來試試：親自給“可見的水果披上一件藍色外衣”

在頁面中第18行處，使用:visible選擇器獲取全部可見的<li>元素，並設置它們顯示藍色背景。

[attribute=value]屬性選擇器

屬性作為DOM元素的一個重要特征，也可以用於選擇器中，從本節開始將介紹通過元素屬性獲取元素的選擇器，[attribute=value]屬性選擇器的功能是獲取與屬性名和屬性值完全相同的全部元素，其中[]是專用於屬性選擇器的括號符，參數attribute表示屬性名稱，value參數表示屬性值。

例如，使用[attribute=value]屬性選擇器，獲取指定屬性名和對應值的全部<li>元素，並設置它們顯示的文字顏色，如圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，使用$("li[title='我最愛']")屬性選擇器代碼，獲取了2個<li>元素，並調用css()方法設置它們在頁面中顯示的文字顏色，另外，屬性值中的‘’單引號可以不寫，由於屬性名與屬性值是等號，因此，它們之間不是包含關系，而是完全相同。

任務

我來試試：親自“給蔬菜披上一件綠色外衣”

在編輯器第18行處，使用[attribute=value]屬性選擇器，獲取指定屬性名和對應值的全部<li>元素，並設置它們顯示的背景色。

[attribute=value]屬性選擇器

例如，使用[attribute=value]屬性選擇器，獲取指定屬性名和對應值的全部<li>元素，並設置它們顯示的文字顏色，如圖所示：

在瀏覽器中顯示的效果：

任務

我來試試：親自“給蔬菜披上一件綠色外衣”

在編輯器第18行處，使用[attribute=value]屬性選擇器，獲取指定屬性名和對應值的全部<li>元素，並設置它們顯示的背景色。

:image圖像域選擇器

當一個<input>元素的“type”屬性值設為“image”時，該元素就是一個圖像域，使用:image選擇器可以快速獲取該類全部元素。例如，在表單中添加兩種類型的圖像元素，使用:image選擇器獲取其中的一種圖像元素，並改變該元素的邊框樣式，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，使用:image選擇器只能獲取<input>圖像域，而不能獲取<img>格式的圖像元素。

任務

在編輯器第17行處，使用:image選擇器獲取表單中指定的圖像元素，並使用addClass()方法改變它的背景色。

:checked選中狀態選擇器

有一些元素存在選中狀態，如復選框、單選按鈕元素，選中時“checked”屬性值為“checked”，調用:checked可以獲取處於選中狀態的全部元素。

例如，在表單中添加多個復選框和單選按鈕，其中有一些元素處於選中狀態，使用:checked獲取並隱藏處於選中狀態的元素，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，使用:checked選擇器可以獲取處於選中狀態的元素，並調用hide()方法將它們進行隱藏

</title>
   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
    <h3>獲取處於選中狀態元素的內容</h3>
    <form id="frmTest" action="#">
    <select id="Select1" multiple="multiple">
        <option value="0">蘋果</option>
        <option value="1" selected="selected">桔子</option>
        <option value="2">荔枝</option>
        <option value="3" selected="selected">葡萄</option>
        <option value="4">香蕉</option>
    </select><br /><br />
    <div id="tip"></div>
    </form>
</body>
<script type="text/javascript">
    var $txtOpt = $("#frmTest :selected").test();
    $("#tip").html("選中內容為:" + $txtOpt);
</script>
</html>

查看選中內容的狀態

使用append()方法向元素內追加內容

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

例如，在頁面的<body>元素中追加一個具有“id”、“title”屬性和顯示內容的<div>元素，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，由於使用append()方法在<body>元素中追加了一些HTML 元素標記，因此追加后，這些元素標記直接生成對應的元素和屬性顯示在頁面中。

任務

我來試試，親自使用append()方法追加一個返回內容的函數

在下列代碼的第20行，調用append()方法追加一個函數。

替換內容

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

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

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

例如，調用replaceWith()方法將頁面中<span>元素替換成一段HTML字符串，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，使用replaceWith()方法替換類別名為“green”的<span>元素，替換之后，舊元素完全由新替換的元素所取代。

使用each()方法遍歷元素

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

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

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

例如，遍歷頁面中的<span>元素，當元素的序列號為2時，添加名為“focus”的樣式，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，在使用each()方法遍歷<span>元素時，回調函數中的“index”參數為元素的序列號，它從0開始，當為2時，表示第3個<span>元素增加樣式。

任務

我來試試，親自使用each()方法遍歷元素並改變第2個元素背景色

在編輯器的第14、16行，通過each()遍歷方法，改變第2個元素<span>元素的背景色。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用each()方法遍歷元素</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
    <h3>使用each()方法遍歷元素</h3>
    <span class="green">香蕉</span>
    <span class="green">桃子</span>
    <span class="green">葡萄</span>
    <span class="green">荔枝</span>
    <script type="text/javascript">
        $("span").each(function (index) {
            if (index == 1) {
                $(this).attr("class", "red");
                $(this).addClass("focus");
            }
        });
    </script>
</body>

使用bind()方法綁定元素的事件

bind()方法綁定元素的事件非常方便，綁定前，需要知道被綁定的元素名，綁定的事件名稱，事件中執行的函數內容就可以，它的綁定格式如下：

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

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

例如，綁定按鈕的單擊事件，單擊按鈕時，該按鈕變為不可用。如下圖所示：

在瀏覽器中顯示的效果：

可以看出，由於使用bind()方法，綁定了按鈕的單擊事件，在該事件中將按鈕本身的“disabled”屬性值設為“true”，表示不可用，當點擊時觸該事件。

任務

我來試試：在ready()事件中綁定一個按鈕的單擊事件

在下列代碼的第12行，使用bind()方法綁定單擊(click)和鼠標移出(mouseout)這兩個事件，觸發這兩個事件中，按鈕將變為不可用。

綁定方式的使用方法

使用hover()方法切換事件

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

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

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

例如，當鼠標移到<div>元素上時，元素中的字體變成金黃色，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，使用hover()方法執行兩個函數，當鼠標移在元素上時調用addClass()方法增加一個樣式，移出時，調用removeClass()方法移除該樣式。

任務

我來試試，親自調用hover()方法實現元素背景色的切換

在下列代碼的第12行，調用hover方法實現元素背景色的切換。

?不會了怎么辦

<script type="text/javascript"> $(function () { $("div").hover( function () { $(this).addClass("orange"); }, function () { $(this).removeClass("orange") }) }); </script>

使用toggle()方法綁定多個函數

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

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

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

例如，使用toggle()方法，當每次點擊<div>元素時，顯示不同內容，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，每次點擊<div>元素時，都依次執行toggle()方法綁定的函數，當執行到最后一個函數時，再次點擊將又返回執行第一個函數。

使用toggle()方法綁定多個函數

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

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

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

例如，使用toggle()方法，當每次點擊<div>元素時，顯示不同內容，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，每次點擊<div>元素時，都依次執行toggle()方法綁定的函數，當執行到最后一個函數時，再次點擊將又返回執行第一個函數。

任務

任務：我來試試，親自調用toggle()方法控制元素的顯示與隱藏

在下列代碼的第14行，使用toggle()方法控制元素的顯示與隱藏屬性。

調用trigger()方法手動觸發指定的事件

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

$(selector).trigger(event)

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

例如，當頁面加載時，手動觸發文本輸入框的“select”事件，使文本框的默認值處於全部被選中的狀態，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，由於文本輸入框調用trigger()方法觸了“select”事件，因此，當頁面加載完成后，文本框中的默認值處於全部被選中的狀態。

任務

我來試試，親自調用trigger()方法手動觸發自定的事件。

在下列代碼的第15行，調用trigger()方法手動觸發一個綁定在<div>元素中的自定義事件。

調用trigger()方法手動觸發指定的事件

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

$(selector).trigger(event)

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

例如，當頁面加載時，手動觸發文本輸入框的“select”事件，使文本框的默認值處於全部被選中的狀態，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，由於文本輸入框調用trigger()方法觸了“select”事件，因此，當頁面加載完成后，文本框中的默認值處於全部被選中的狀態。

文本框的focus和blur事件

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

例如，在觸發文本框的“focus”事件時，<div>元素顯示提示內容，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，當點擊文本框時，觸發文本框的“focus”事件，在該事件中，頁面中的<div>元素顯示提示信息。

任務

我來試試，親自綁定文本框的blur事件，並在該事件中檢測文本框的內容是否為空，如果為空，則在<div>元素中提示相應信息。

在下列代碼的第17行，綁定文本框的“blur”事件。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>下拉列表的change事件</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
    <h3>下拉列表的change事件</h3>
    <select id="seltest">
        <option value="葡萄">葡萄</option>
        <option value="蘋果">蘋果</option>
        <option value="荔枝">荔枝</option>
        <option value="香焦">香焦</option>
    </select>
    <script type="text/javascript">
        $(function () {
            $("select").bind(
            "change", function () {
                if ($(this).val() == "蘋果")
                    $(this).css("background-color", "red");
                else
                    $(this).css("background-color", "green");
            })
        });
    </script>
</body>
</html>

調用live()方法綁定元素的事件

與bind()方法相同，live()方法與可以綁定元素的可執行事件，除此相同功能之外，live()方法還可以綁定動態元素，即使用代碼添加的元素事件，格式如下：

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

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

例如，使用live()方法綁定，頁面中按鈕元素的單擊事件，而這個按鈕是通過追加的方式添加至頁面的。如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，雖然按鈕元素是在事件綁定聲明之后，並且是通過追加的方式添加至頁面的，但由於使用的是live()方法綁定元素的事件，因此，仍然生效。

任務

我來試試，親自使用live()方法綁定動態添加按鈕元素的兩個事件

在下列代碼的第11行，使用live()方法綁定按鈕元素的click和mouseout兩個事件，在這兩個事件中，按鈕將設置為不可用狀態。

調用toggle()方法實現動畫切換效果

第一節我們學過實現元素的顯示與隱藏需要使用hide()與show()，那么有沒有更簡便的方法來實現同樣的動畫效果呢？

調用toggle()方法就可以很容易做到，即如果元素處於顯示狀態，調用該方法則隱藏該元素，反之，則顯示該元素，它的調用格式是：

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

其中speed參數為動畫效果時的速度值，可以為數字，單位為毫秒，也可是“fast”、“slow”字符，可選項參數callback為方法執行成功后回調的函數名稱。

例如，調用toggle()方法以動畫的效果顯示和隱藏圖片元素，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，當按鈕顯示內容為“隱藏”時，點擊該按鈕，將調用toggle()方法以動畫的方式隱藏圖片元素，隱藏成功后，按鈕顯示的內容變為“顯示”

使用slideToggle()方法實現圖片“變臉”效果

使用slideToggle()方法可以切換slideUp()和slideDown()，即調用該方法時，如果元素已向上滑動，則元素自動向下滑動，反之，則元素自動向上滑動，格式為：

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

其中speed參數為動畫效果時的速度值，可以為數字，單位為毫秒，也可是“fast”、“slow”字符，可選項參數callback為方法執行成功后回調的函數名稱。

例如，在頁面中，使用slideToggle()方法實現圖片“變臉”效果，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，當點擊第一張圖片時，向上滑動收起該圖片，當收起完成時，觸發回調函數，調用第二張圖片的slideToggle()方法，向下滑動顯示第二張圖片。

任務

我來試試，親自調用slideToggle()方法實現“標題”下“內容”的滑動切換

在下列代碼的第24行，調用slideToggle()方法實現“內容”區的滑動切換。

調用animate()方法制作簡單的動畫效果

調用animate()方法可以創建自定義動畫效果，它的調用格式為：

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

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

例如，調用animate()方法以由小到大的動畫效果顯示圖片，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，調用animate()方法，以漸漸放大的動畫效果顯示圖片元素，當動畫執行完成后，通過回調函數在頁面的<div>元素中顯示“執行完成!”的字樣。

任務

我來試試，親自調用animate()方法制作一個漸漸放大的正方體

在下列代碼的第13行，調用animate()方法制作一個漸漸放大的正方體。

動畫制作原理：

使用load()方法通過Ajax請求加載服務器中的數據，並把返回的數據放置到指定的元素中，它的調用格式為：

load(url,[data],[callback])

參數url為加載服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數。

例如，點擊“加載”按鈕時，向服務器請求加載一個指定頁面的內容，加載成功后，將數據內容顯示在<div>元素中，並將加載按鈕變為不可用。如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，當點擊“加載”按鈕時，通過調用load()方法向服務器請求加載fruit.html文件中的內容，當加載成功后，先顯示數據，並將按鈕變為不可用。

任務

我來試試，親自調用load()方法加載服務器文件中指定的元素內容

在下列代碼的第23行，調用load()方法加載服務器文件 http://www.imooc.com/data/fruit_part.html 中全部的li元素內容。

使用getJSON()方法異步加載JSON格式數據

使用getJSON()方法可以通過Ajax異步請求的方式，獲取服務器中的數組，並對獲取的數據進行解析，顯示在頁面中，它的調用格式為：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

其中，url參數為請求加載json格式文件的服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數。

例如，點擊頁面中的“加載”按鈕，調用getJSON()方法獲取服務器中JSON格式文件中的數據，並遍歷數據，將指定的字段名內容顯示在頁面中。如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，當點擊“加載”按鈕時，通過getJSON()方法調用服務器中的sport.json文件，獲取返回的data文件數據，並遍歷該數據對象，以data[“name”]取出數據中指定的內容，顯示在頁面中。

任務

我來試試，親自調用getJSON()方法獲取服務器中JSON格式文件的內容。

在下列代碼的第21行，調用getJSON()方法獲取服務器中 http://www.imooc.com/data/sport.json 的JSON格式文件中的數據，並將數據中指定的內容顯示頁面中。

?不會了怎么辦

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery 使用方法 jQuery插件的使用方法 jQuery(ajax)的使用方法 jQuery Mobile的使用方法 jQuery UI基本使用方法 jQuery 自定義網頁滾動條樣式插件 mCustomScrollbar 的介紹和使用方法 jquery.cookie.js 使用方法 jQuery Easing 使用方法及其圖解 jquery-confirm使用方法 JQuery UI datepicker 使用方法