學習 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;
}
}
);