5jquery 事件操作

<head>
    <meta charset="UTF-8">
    <title>4.jquery事件操作</title>
</head>
<body>
         <div class="info">
             <input type="button" value="单机事件">
             <input type="button" value="单机事件2">
             <input type="text" value="聚焦失焦">
             <select name="prov">
                 <option value="">请选择</option>
                 <option value="pro">海南</option>
                 <option value="pro">上海</option>
                 <option value="pro">天津</option>
             </select>
         </div>
         <hr>
         <div id="show"></div>
</body>
    <script src="js/jquery-1.8.3.js"></script>
    <script>
        /*解除事件*/
        /*单机事件*/
        $(".info :button:eq(0)").on("click",function () {
            $("#show").html($(":button:eq(0)").val())
            alert(this.value);
        })
        $(".info :button:eq(1)").on("click",function () {
            /*$("#show").html($(":button:eq(1)").val())*/
            alert(this.value);
            $(".info :button:eq(1)").unbind("click");
        })
        /*聚焦事件*/
        $(".info :text:eq(0)").on("focus",function () {
            $("#show").html("我是聚焦事件");
        })
        /*失焦事件*//*在后面直接绑*/
        .on("blur",function () {
            $("#show").html(this.value);
        })
        /*变更事件*/
        $(".info [name='prov']").on("change",function () {
            var $selected = $(".info [name='prov'] option:selected");
            $("#show").html($selected.html());
        })
    </script>
posted on 2022-04-16 18:38 小小程序猿level1 阅读(29) 评论(0) 收藏举报