jQuery traverse元件屬件

traverse 是程式寫作上一個還算蠻重要的 runtime information. 尤其在 web 上, jQuery 的概念整個就是建立在這樣概念上. 利用 selector 將要找的東西找出來, 再進行更動或讀取這樣的狀況.

現在利用一個小案例來說明這個 case. 我要找出頁面上所有有 onclick 屬性的 anchor, 並加以標註出來, 語法是這樣的:

$("a[onclick]").addClass("highlight1");

是的, 你沒看錯, 就是這樣一句而已. 這句語法的解釋是這樣的:

1. $(“a”) 是找出所有的 anchor
2. $(“a[onclick]”) 是找出所有的 anchor 而且有 onclick 屬性的
3. addClass 就是加上一個 css class

就只是這樣而已. 我們來看看範例吧: http://sample.diary.tw/17/j1.html 其中的 button: [find anchor with onclick attr.] 按下後, 會將有 onclick 屬性的 anchor 用 highlight1 的 lightgreen 的背景色加上, 就很清楚了. 其中只有 f1(), f2() 會呈現出來效果, 而其他的 anchor 沒有下 onclick 屬性的, 都不會被影響.

接下來找出 anchor 的連結屬性, 開頭是 http://www 的, 這個也很有趣, 語法如下:

$("a[href^='http://www']").addClass("highlight2");

也是一樣, 一行搞定, 語法說明如下:

1. $(“a[href^=’http://www’]”)是指 anchor 中, href 屬性開頭為 http://www 的.
2. addClass 就是加上一個 css class

(在1.2版時, 還可以使用 @在 href 前, 也就是 @href^=’xxx’ 這樣, 不過在 1.2 已不推薦使用, 1.3 時已不支援了, 要特別注意 @ 這個符號囉)

一樣來看範例, http://sample.diary.tw/17/j1.html 其中的 button: [find anchor start with http://www] 按下後, 其中開頭為 http://www 的 anchor 會套用 lightblue 的背景色, 是不是很方便呢?

其中的 ^= 是開頭為, 而 $= 是結束為, 而 *= 是含有, 所以若是要找連結為 .pdf 結尾的, 可以使用:

$("a[href$='.pdf']")

再來就是談 traverse 的語法, 其實也很單純, 是利用 each 這個方法, 再利用匿名函數取得陣列代號, 就可以將符合條件的元素陣列逐一列舉出來, 如下:

var elements = $("a[href^='http://www']");
var message = "";
$(elements).each(function(e){
    message += elements[e].href+"\n";
});
alert(message);

程式碼說明如下:

1. 先將符合條件的 objects 都放入 elements 陣列
2. 再利用 each 方法, 配合匿名函數, 將 elements 陣列內的 object 的 href 屬性結合成產生的字串訊息
3. 最後再將訊息秀出

參考範例: http://sample.diary.tw/17/j1.html 其中的 button: [traverse anchor start with http://www] 就會將所有開頭為 http://www 的 object 的 href 屬性 alert 出來囉.

相信對於使用 jQuery 的朋友們, 能更清楚整個運作的邏輯..