<!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="https://www.imooc.com/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="监听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>
输出结果:
<div id="result1">1</div>
<div id="result2">2</div>
<div id="results">3</div>
<script type="text/javascript">
//监听input值的改变
$('.target1').change(function(e) {
$("#result1").html(e.target.value)
});
//监听select:
$(".target2").change(function(e) {
$("#result2").html(e.target.value)
})
//监听textarea:
$(".target3").change(function(e) {
$("#results").html(e.target.value)
})
</script>
</body>
</html>
这里的div3即(#result3)为什么一点效果都没有?
因为第三个div中的textarea 中的class设置成了target2;
正确的<div class="aaron3">textarea:
<textarea class="target3" rows="3" cols="20">多行的文本输入控件</textarea>
</div>