关于jQuery链式操作

2019独角兽企业重金招聘Python工程师标准>>>

      提到jQuery的链式操作，大家先来看看下面的代码:

        1.未使用jQuery链式:

$("div").html(value);
$("div").on("click",function(){
    alert("hello jQuery");
});
$("div").fadeIn("slow");
$("div").animate({width:"100px"},1000);

        2.使用jQuery链式操作：

$("div").html(value);
$("div").on("click",function(){
    alert("hello jQuery");
}).fadeIn("slow").animate({width:"100px"},1000);

    我想大家也看到了明显的区别，代码2比代码1看起来更加的简洁和优雅！也方便我们的理解，那么关于jQuery链式操作你知道多少呢？

    链式代码已经成为jQuery 非常流行的一个特点，在使用链条方式编写代码时，可能会用到eq()、filter()的jQuery方法改变链式方法的对象，但是借助jQuery的 end() 方法又能够恢复或最初的jQuery对象，从而可以实现继续执行链式操作。注意，有几个jQuery的方法并不返回jQuery 对象，所以链式操作就不能继续下去，如get() 就不能像eq() 那样使用，链式语法是一种比较时尚的编程方法，但是在使用该种方法时，为了方便阅读，读者应该注意以下几个问题：

    1.如果在同一个jQuery对象上执行不超过3个方法，则可以在同一行内书写。例如，下面一行代码选择第一个按钮，修改它的名称，并为其附加一个类.

$("input[type='button']").eq(0).val("change").addClass("#ff0000");

      2.如果在同一个jQuery对象上执行很多操作，则应该分行进行书写，这样方便阅读和修改.

    3.对于多个对象执行少量的操作，则可以为每一个对象书写一行代码。如果涉及子元素操作，可以考虑使用缩进方法进行设计，这样就能够区分层次。例如，针对上面示例，我们可以这样进行缩进显示。

$('input[type="button"]')  
    .eq(0).click(function(){  
        alert('clicked me!');  
    })

   4.如果对于多个对象执行很多连续的操作，则可以考虑结合上面几种方法进行设计。

    

    

转载于:https://my.oschina.net/FTChrist/blog/262478