在撰寫 HTML 時, 常需要取得 Selectors 的 #id , element 來作適當的處理, 使用 JQuery 可以直覺式取得您想要的, 並且給您更多. 若對 JQuery 不是很瞭解的話, 不妨可以先看這一篇文章 [教學] How jQuery Works 如何讓 jQuery 正常運作
首先, 先來看下面這一段 HTML 的程式碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#APPLIER").change(function(){
alert( $(this).val() );
});
$("input[name^='nextSign']").change(function(){
alert( $(this).val() );
});
$("form[name='form2'] input[name='docNo']").change(function(){
alert( $(this).val() );
});
});
</script>
</head>
<body>
<form name="form1">
申請人:<input id="APPLIER" type="text" name="APPLIER" value="PolinWei"><br/>
文件編號:<input type="text" name="docNo" value="doc-123"><br/>
下一個員工編號:<input type="text" name="nextSignEmpNo" value="E123"><br/>
下一個部門編號:<input type="text" name="nextSignDeptNo" value="D001"><br/>
</form>
<form name="form2">
申請人:<input id="nextAPPLIER" type="text" name="APPLIER" value="Jamie"><br/>
文件編號:<input type="text" name="docNo" value="doc-456"><br/>
下一個員工編號:<input type="text" name="nextSignEmpNo" value="E456"><br/>
下一個部門編號:<input type="text" name="nextSignDeptNo" value="D002"><br/>
</form>
</body>
</html>程式碼解說:
1.取得 id 值為 APPLIER
$("#APPLIER") 2.取得所有 element 值為 input , 且 name 的開頭符合 nextSign
$("input[name^='nextSign']") 3.取得 form=form2 , element=input , name=docNo
$("form[name='form2'] input[name='docNo']") 當改變這些欄位內的值時, 才會 alert 出改變後的值, 否則就不會出現 alert 的視窗.
沒有留言:
張貼留言