jQuery表單事件之change事件
<input>元素,<textarea>和<select>元素的值都是可以發(fā)生改變的,開發(fā)者可以通過change事件去監(jiān)聽這些改變的動作
input元素
監(jiān)聽value值的變化,當(dāng)有改變時,失去焦點(diǎn)后觸發(fā)change事件。對于單選按鈕和復(fù)選框,當(dāng)用戶用鼠標(biāo)做出選擇時,該事件立即觸發(fā)。
select元素
對于下拉選擇框,當(dāng)用戶用鼠標(biāo)作出選擇時,該事件立即觸發(fā)
textarea元素
多行文本輸入框,當(dāng)有改變時,失去焦點(diǎn)后觸發(fā)change事件
change事件很簡單,無非就是注意下觸發(fā)的先后行為,可以看看右邊代碼參考
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 100%;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>input、textarea與select</h2>
<div class="left">
<div class="aaron">input:
<input class="target1" type="text" value="監(jiān)聽input的改變" />
</div>
<div class="aaron1">select:
<select class="target2">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</div>
<div class="aaron3">textarea:
<textarea class="target2" rows="3" cols="20">多行的文本輸入控件</textarea>
</div>
</div>
輸出結(jié)果:
<div id="result"></div>
<script type="text/javascript">
//監(jiān)聽input值的改變
$('.target1').change(function(e) {
$("#result").html(e.target.value)
});
//監(jiān)聽select:
$(".target2").change(function(e) {
$("#result").html(e.target.value)
})
//監(jiān)聽textarea:
$(".target3").change(function(e) {
$("#result").html(e.target.value)
})
</script>
</body>
</html>
請驗(yàn)證,完成請求
由于請求次數(shù)過多,請先驗(yàn)證,完成再次請求