当一个元素的值发生变化时,将会触发change事件。
例如在选择下拉列表框中的选项时,就会触change事件。
其实很好理解,但是我在写程序的过程中,却发现了另外的问题。
<body>
<h3>下拉列表的change事件</h3>
<select id="seltest">
<option value="葡萄">葡萄</option>
<option value="苹果">苹果</option>
<option value="荔枝">荔枝</option>
<option value="香焦">香焦</option>
</select>
<div></div>
<script type="text/javascript">
$(function () {
$("select").bind("change",function () {
if (this.value== "苹果")
$(this).css("background-color", "red");
else
$(this).css("background-color", "green");
$('div').html("你选择的是:"+$(this).val());
})
});
</script>
</body>
注意在程序中,
if (this.value== "苹果")
和
$('div').html("你选择的是:"+$(this).val());
this是html元素对象,所以能调用元素属性,如this.value,this.id等等。
$(this)是JQuery对象,所以能调用JQuery方法,如:$(this).val()等方法。
否则会出错。
还有
$('div')只能使用html()或者text()等JQuery方法,不能使用:‘$('div').innerText=’,这样是错误的。