jQuery表单事件之change事件，jQuery基础(三)—事件篇教程-慕课网

3-2 jQuery表单事件之change事件

本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery表单事件之change事件

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素

多行文本输入框，当有改变时，失去焦点后触发change事件

change事件很简单，无非就是注意下触发的先后行为，可以看看右边代码参考

任务

index.html

<!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="result"></div>
    <script type="text/javascript">
 
    //监听input值的改变
    $('.target1').change(function(e) {
        $("#result").html(e.target.value)
    });
 
    //监听select：
    $(".target2").change(function(e) {
        $("#result").html(e.target.value)
    })
 
     //监听textarea：
    $(".target3").change(function(e) {
        $("#result").html(e.target.value)
    })
    </script>
</body>
 
</html>

下一节