jQuery: Event

Article Directory

Trigger and Bind (1) events
(2) bind event binding
Binding (3) live event
Binding (4) hover event
(5) one event binding
(6) toggle event binding

Trigger and Bind (1) events

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的触发与绑定</title>
</head>
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            //id为but的元素绑定一个点击事件，当点击这个元素后发出click方法中参数的匿名方法，这个匿名方法为事件的处理方法
            //事件的捕获
            $("#but").click(function () {
                //获取id为sub的元素，并让这个元素触发了点击事件，相当于用户点击了这个按钮
                $("#sub").click();//触发按钮的点击行为，实现表单提交
                //为id为form1的元素触发表单提交行为，相当于点击了表单的提交按钮
                $("#form1").submit();//触发表单提交行为
            })

            //为id为sub的元素绑定点击事件
            $("#sub").click(function () {
                alert("点击了提交按钮");
                return false;//阻止默认提交
            })
        })
    </script>

    <form action="aaa.jsp" id="form1">
        姓名<input type="text"/><br>
        <input type="submit" value="提交" id="sub"/>
        <input type="button" value="自定义提交按钮" id="but"/>
    </form>
</body>
</html>

(2) bind event binding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bind事件绑定</title>
</head>
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        /**
        * 获取id为lj的这个对象并让bind这个方法为这个对象绑定事件
         * bind方法：参数1 事件名称例如“click”点击事件
         *           参数2 一个匿名的回调方法，当绑定事件jquery对象触发了这个“click”事件后jquery会回调这个方法，实现具体功能。
        * */
        $(function () {
            $("#lj").bind("click",function () {
                //$(this) 表示触发当前事件的jquery对象，获取这个对象的href属性的值
                var v_href=$(this).attr("href");
                //如果这个值不是百度地址则阻拦
                if(v_href!="http://www.baidu.com"){
                    alert("对不起，地址不正确")
                    //阻止浏览器的默认行为及事件起泡
                    return false;
                }
            })
        })
    </script>

    <a href="http://www.baidu.co" id="lj">连接</a>
</body>
</html>

Binding (3) live event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>live事件的绑定</title>
</head>
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            //这里的bind也可以使用live，但是bind速度快
            $("#add").bind("click",function () {
                //append里面的是将来出现的页面元素
                $("#table").append('<tr><td><input type="file"/></td><td><a href="javascript:void(0)" id="del">删除</a></td></tr>');
            })
            //live为现有的页面元素以及将来出现的页面元素绑定事件
            $("#del").live("click",function() {
                $(this).parent().parent().remove();
            })
        })
    </script>

    <input type="button" value="添加" id="add"><br>
    <table id="table">
        <tr>
            <td><input type="file"/></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

Binding (4) hover event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover事件的绑定</title>
    <style>
        .img1{width: 300px;height: 300px;border-color: blue;border-style: solid;}
        .img2{border-color: red;border-style: solid;}
    </style>
</head>
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            //hover(function,function)
            // 模仿鼠标的悬停事件 over out
            //参数1 鼠标移入后触发的方法； 参数2 鼠标移出后触发的方法
            $("#img").hover(function () {
                $("img").removeClass("img2");
                $("#img").addClass("img1");
            },function (){
                $("img").removeClass("img1");
                $("#img").addClass("img2");
            })
        })
    </script>

    <img alt="" src="../属性操作/JDBC本质.jpg" height="70" width="70" id="img"/>
</body>
</html>

(5) one event binding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>one事件绑定</title>
</head>
<!--one绑定事件后，这个事件只能使用一次-->
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            //为id为butOne的对象绑定一个只能使用一次的点击事件
            $("#butOne").one("click",function () {
                alert("点击了一次按钮")
            });

            /**
            * 这个代码块模仿one提交一次点击事件
            * */
            //为id为butOne2的对象绑定一个点击事件
            $("#butOne2").bind("click",function () {
                alert("点击了一次按钮2");
                //移除触发这个事件的点击事件
                $(this).unbind("click");
            })
        })
    </script>

    <input type="button" id="butOne" value="提交1"/>
    <input type="button" id="butOne2" value="提交2"/>
</body>
</html>

(6) toggle event binding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toggle事件绑定</title>
</head>
<!--toggle是绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。-->
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#div").hide()
            $("#but").toggle(
                function () {
                    $("#div").show()
                    $(this).val("收起")
                },
                function () {
                    $("#div").hide()
                    $(this).val("更多")
                }
            )
        })
    </script>

    <input value="更多" type="button" id="but"/>
    <div>
        西游2<br>
        黑夜传说<br>
        死神来了<br>
        <div id="div">
            大话西游<br>
            鬼吹灯<br>
            盗墓笔记<br>
        </div>
    </div>
</body>
</html>

Gray head JH

Published 42 original articles · won praise 8 · views 2416

Private letter concerns

Article Directory

Trigger and Bind (1) events

(2) bind event binding

Binding (3) live event

Binding (4) hover event

(5) one event binding

(6) toggle event binding

Guess you like