Learn the Web from scratch JQuery (iii) element manipulation, chained programming, animation methods

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:https://github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:https://blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

First, using CSS to manipulate element style 1, the general wording

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

2. Chain-style notation

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

3. Key-value pair notation

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

Two, chain programming 1, what is chained programming?

The object can continue calling methods after the method is called until the end of the day.

2. Grammar

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

3. Conditions

The premise of chained programming: The return value of the object after it invokes the method or the current object, you can continue to invoke the method, otherwise you cannot continue to invoke the method.

4. Experience

In JQuery, in general, the object calls the method, and if the method is to set a property (the method has parameters that set the value of the property), then the return value is almost the current object, you can continue to chain programming.

Example:

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

Iii. manipulating element styles using class Styles 1, adding class styles

Grammar:

$("#dv").addClass("类选择器");

If you need to apply multiple class styles, you can use chained programming or write two class selectors in a addclass, separated by spaces.

// 链式编程$("#dv").addClass("类选择器1").addClass("类选择器2");// 或者$("#dv").addClass("类选择器1 类选择器2")

2. Remove class Style

Grammar:

// 链式编程$("#dv").removeClass("类选择器1").removeClass("类选择器2");// 或者$("#dv").removeClass("类选择器1 类选择器2")

3. Decide whether to use class style

Grammar:

// 链式编程$("#dv").hasClass("类选择器1").hasClass("类选择器2");// 或者$("#dv").hasClass("类选择器1 类选择器2")

4. Toggle Class Style

Grammar

$("#dv").toggleClass("类选择器");

Determines whether the class selector is applied, and if it is not applied, it is removed if it is applied.

Attention:

1, AddClass, Removeclass, Toggleclass method Regardless of the parameters, the return value is the object that calls it, can be chained programming.

2. You cannot add and remove class styles by using CSS.

Iv. Animation related methods 1, the first group

// 参数1：时间（有两种写法：1. 1000ms，2. "normal","slow","fast"）//        normal: 相当于400ms，slow：600ms，fast：200ms// 参数2：函数（在动画执行完成之后调用）show(参数1，参数2);hide(参数1，参数2);

Example:

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

2, the second group

// 参数和 show hide 一样slideDown() // 显示sildeUp()   // 隐藏slideToggle(); // 隐藏和显示切换

Example:

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

3, the third group

// 参数和hide show一样fadeIn();  // 显示fadeOut(); // 隐藏fadeToggle(); // 隐藏和显示切换// 参数1：时间// 参数2：需要到达的透明度值（比如：0.2）fadeTo(参数1，参数2)

Example:

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

4. Comprehensive method

// 一般三个参数// 参数1：css键值对，属性集合// 参数2：时间，单位ms// 参数3：回调函数animate({...}, 1000, function (){...})

Example:

<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: Seemingly color can not be animated.

Learn the Web from scratch JQuery (iii) element manipulation, chained programming, animation methods