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

Source: Internet
Author: User

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.


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



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


// 链式编程$("#dv").removeClass("类选择器1").removeClass("类选择器2");// 或者$("#dv").removeClass("类选择器1 类选择器2")
3. Decide whether to use class style


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



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


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);


<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(); // 隐藏和显示切换


<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)


<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 (){...})


<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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.