关于jQuery链式操作

      提到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.如果对于多个对象执行很多连续的操作,则可以考虑结合上面几种方法进行设计。

    

    


你可能感兴趣的:(关于jQuery链式操作)