從零開始學 Web 之 jQuery（三）元素操做，鏈式編程，動畫方法

你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、使用css操做元素樣式

一、常規寫法

$("#dv").css("width", "200px");
$("#dv").css("height", "100px");
$("#dv").css("background", "red");

二、鏈式寫法

$("#dv").css("width", "200px").css("height", "100px").css("background", "red");

三、鍵值對寫法

var json = {"width":"200px", "height":"100px"; "backgroundColor":"red"};
$("#dv").css(json);

2、鏈式編程

一、什麼是鏈式編程？

對象在調用方法後能夠繼續調用方法，直到天荒地老。

二、語法

對象.方法().方法().方法().......

三、條件

鏈式編程的前提：對象調用方法後的返回值仍是當前對象，那麼就能夠繼續調用方法，不然不能夠繼續調用方法。

四、經驗

在 jQuery 中，通常狀況下，對象調用方法，若是這個方法是設置某個屬性的話（方法有參數是設置屬性的值），那麼返回值幾乎都是當前對象，就能夠繼續鏈式編程。

示例：

$("#dv").css("width","10px").val("haha").css("height":"20px");

3、使用類樣式操做元素樣式

一、添加類樣式

語法：

$("#dv").addClass("類選擇器");

若是須要應用多個類樣式，可使用鏈式編程或者在一個addClass中寫兩個類選擇器，中間用空格隔開。

// 鏈式編程
$("#dv").addClass("類選擇器1").addClass("類選擇器2");

// 或者
$("#dv").addClass("類選擇器1 類選擇器2")

二、移除類樣式

語法：

// 鏈式編程
$("#dv").removeClass("類選擇器1").removeClass("類選擇器2");

// 或者
$("#dv").removeClass("類選擇器1 類選擇器2")

三、判斷是否採用類樣式

語法：

// 鏈式編程
$("#dv").hasClass("類選擇器1").hasClass("類選擇器2");

// 或者
$("#dv").hasClass("類選擇器1 類選擇器2")

四、切換類樣式

語法

$("#dv").toggleClass("類選擇器");

判斷是否應用類選擇器，若是沒應用就添加，應用了就移除。

注意：

一、addClass, removeClass, toggleClass 方法無論有沒有參數，返回值都是調用其的對象，均可以鏈式編程。

二、使用 CSS 方式是不能添加和移除類樣式的。

4、動畫相關方法

一、第一組

// 參數1：時間（有兩種寫法：1. 1000ms，2. "normal","slow","fast"）
//        normal: 至關於400ms，slow：600ms，fast：200ms
// 參數2：函數（在動畫執行完成以後調用）
show(參數1，參數2);
hide(參數1，參數2);

示例：

<script>
    $("#btn1").click(function () {
        $("#dv").hide("slow", function () {
            alert("hide");
        });
    });
    $("#btn2").click(function () {
        $("#dv").show("slow", function () {
            alert("show");
        });
    });
</script>

二、第二組

// 參數和 show hide 同樣
slideDown() // 顯示
sildeUp()   // 隱藏
slideToggle(); // 隱藏和顯示切換

示例：

<script>
    $("#btn1").click(function () {
        $("#dv").slideUp("slow", function () {
            alert("hide");
        });
    });
    $("#btn2").click(function () {
        $("#dv").slideDown("slow", function () {
            alert("show");
        });
    });
</script>

三、第三組

// 參數和hide show同樣
fadeIn();  // 顯示
fadeOut(); // 隱藏
fadeToggle(); // 隱藏和顯示切換

// 參數1：時間
// 參數2：須要到達的透明度值（好比：0.2）
fadeTo(參數1，參數2)

示例：

<script>
    $("#btn1").click(function () {
        $("#dv").fadeOut("slow", function () {
            alert("fadeOut");
        });
    });
    $("#btn2").click(function () {
        $("#dv").fadeIn("slow", function () {
            alert("fadeIn");
        });
    });
</script>

四、綜合方法

// 通常三個參數
// 參數1：css鍵值對，屬性集合
// 參數2：時間，單位ms
// 參數3：回調函數
animate({...}, 1000, function (){...})

示例：

<script>
    $("#btn1").click(function () {
        $("#dv").animate({"width":"100px","height":"50px"}, 3000, function () {
            console.log("第一步");
        }).animate({"width":"1000px","height":"200px"}, 3000, function () {
            console.log("第二步");
        }).animate({"width":"300px","height":"150px"}, 3000, function () {
            console.log("第三步");
        });
    });
</script>

PS：貌似顏色不能動畫。