簡單介紹 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 這個特色語法。