itFarmer

jquery 提供一個很 fancy 的 selector幫助我們很容易的找到要控制的 dom 元件。例如:當我相找出 nextSign… 開頭的欄位時，過去作法需要把 form1 下所有elements找出再走訪每個element，判斷名稱才能找出。

<form name=”form1”>

<input type=”text” name=”nextSignEmpNo” value=””>

<input type=”text” name=”nextSignDeptNo” value=””>

<input type=”text” name=”docNo” value=””>

</form>

<script>

for(var i=0;i<form1.elements.length; i++) {

  if ( form1.elements(i).name.indexOf(”nextSign”)==0) {

        alert( form1.elements(i).value );

  }

}

</script>

jquery 做法:

$(“input[name^=’nextSign’]).each(function(){

  alert( $(this).val() );

})

$(“input[name^=’nextSign’]) 是指所有input的name只要是 nextSign 開頭的都抓出來，若然有1個form以上，並且不同form有相同欄位名稱時，這樣抓可能會出錯，所以需要再把 form考量進來。

$(“form[name=’form1’] input[name^=’nextSign’]).each(function(){

  alert( $(this).val() );

})

jquery 的 selector 有個特色，可以將不同的 selector 組合使用，這樣幾乎沒有找不到的DOM物件。

以 attribute 抓物件方式還有

[attribute*=value] 只要出現value關鍵字

[attribute$=value] value關鍵字結尾

[attribute!=value] value關鍵字不能出現

像如果要抓出下面這兩個欄位

<input type=”text” name=”nextSignEmpNo_v1” value=””>

<input type=”text” name=”nextSignDeptNo_v1” value=””>

可以用

$(“input[name$=’_v1’]).each(function(){

  alert( $(this).val() );

})

這個 selector 目前最常用到，今天先記到這，下次用到新的再整理出來。