Prototype JS 的 Selector Expressions

學習 CSS 時就不得不認識 selector。

通常書上所提到的 selector, 大多為 Type selector、ID selector、Class selector 及 Pseudo-classes selector; 雖然這已經滿足大多的需求, 不過實務上還是需要其他的 selector 的支援,  而 maxdesign 的 Selectutorial 資訊可以供作參考 。

CSS selector 規則, 其中也包括了 Attribute selector, 在 CSS-Tricks web-site 中簡明扼要說明了一些實用範例。

一般運用時, 除了使用 CSS file 做頁面外觀的處理之外, 仍需要 JavaScript 來進行 DOM element 的動態控制或資料處理。個人會選用 Prototype JS 做為主要的應用工具, 是因為它的 utility methods 使用上很直觀, $$(cssRule...) 提供了一些在 CSS 支援上的說明。

但, 在範例中都只使用了特定 attribute selector 規則, 如果讀者眼尖的話, 在說明的開頭處就已經提到 "cssRule ...", 也就是說: 可以使用多個 attribute selector 規則。方法是使用逗點(,)將每個 attribute selector 隔開即可。

例如: 將畫面上輸入的欄位值串接成 query string:

var reqStr = "";

$$('select[name^="cri_"]', 'input[type~="hidden"]:not([name^="cri_"])').each(
  function(ele) {
    if (typeof ele.name != 'undefined' &&
        typeof $(ele.name).value != 'undefined' &&
        $(ele.name).value != '') {

        reqStr = (reqStr.length > 0 ? reqStr + '&' : '') + ele.name + '=' + $(ele.name).value;
    }
  }
);