从零开始学 Web 之 jQuery（三）元素操作，链式编程，动画方法

$("#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);

对象.方法().方法().方法().......

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

$("#dv").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("类选择器");

// 参数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>