iT邦幫忙

2

JQuery Chaining

  • 分享至 

  • xImage
  •  

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


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言