简单介绍 JQuery 中的 Chaining 语法。
这边来简单介绍 jQuery 中所谓的 Chaining (链式语法),首先来看到这个例子
$("#myDiv").css("boder: 1px solid #000") .fadeOut('slow');
上面就是所谓的 Chaining , Chaining 可以说是 JQuery 中相当迷人的一个特色,它可以让你的 code 变得更简洁、更有效率,如果不使用 Chaining,往往就需要撰写更多行数:
$("#myDiv").css("border: 1px solid #000");$("#myDiv").fadeOut('slow');
本来只要一行就完成的操作,不只是行数变多了,还使用了两次选择器,整体效率就变差了。
Chaining 固然非常方便与强大,但在撰写时要注意程式的排版,也不宜太长,避免程式码难以阅读。
大部分的 jQuery method 都可以如此使用,但是并非所有的方法都可以使用 Chaining 来串连,这跟 Chaining 的原理有关。
能够达成 Chaining 在于大部分的 jQuery method 回传的都是 jQuery 物件本身,所以可以达成 Chaining ,我们可以从一个简单的方式来判断这个方法是否支援 Chaining。
当像是
$(elem).prop()//或是$(elem).val()
这类方法明显是取值的方法,当然是无法使用 Chaining 的,除了取值类型的方法外,可以说所有 " 操作 " 类型的方法都可以使用 Chaining 这个特色语法。