前端（jQuery）（2）-- JQuery选择器和事件

1、选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("p元素被修改了");
                $("#p2").text("id为p2的元素被修改了。")
            });
        });
    </script>
</head>
<body>
    <p>p1</p>
    <p id="p2">p2</p>
<button id="btn">按钮</button>
</body>
</html>

需要什么工具直接查找API就可以了。

2、事件常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $(this).hide();/*单击隐藏*/
            });
            $("#btn2").dblclick(function(){
                $(this).hide();/*双击隐藏*/
            });
            $("#btn3").mouseleave(function(){
                $(this).hide();/*当鼠标移动到按钮上的时候*/
            });
            $("#btn4").mousedown(function(){
                $(this).hide();/*当鼠标按下去，click是点击完*/
            });
            $("#btn5").mouseout(function(){
                $(this).hide();/*当鼠标从上面离开*/
            });
            $("#btn6").mouseover(function(){
                $(this).hide();/*当鼠标在上面*/
            });
        });
    </script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
<button id="btn6">按钮6</button>
</body>
</html>

3、事件绑定、解除绑定事件

3.1、jQuery事件：

　　常用事件方法

　　绑定事件

　　解除绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            /*$("#clickMeBtn").click(function(){
                alert("hello");/!*这种方法在方法特别多，文档特别大的时候是非常耗时的*!/
            });*/
            $("#clickMeBtn").on("click",clickHandler1);
            $("#clickMeBtn").bind("click",clickHandler2);
            // $("#clickMeBtn").unbind("click");/*全部解除*/
            $("#clickMeBtn").unbind("click",clickHandler2);/*解除一个事件*/
            /*
            * on和off添加和解除事件是一样的（不过on和bind必须在jQuery1.7之后才可以使用）
            * 官方推荐使用on和off
            * */
        });
        function clickHandler1(){
            console.log("clickHandler1");
        }
        function clickHandler2(){
            console.log("clickHandler2");
        }
    </script>
</head>
<body>
<button id="clickMeBtn">按钮</button>
</body>
</html>

4、事件目标与冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("body").on("click",bodyHandler);
            $("div").on("click",divHandler1);
            $("div").on("click",divHandler2);
            /*$("li").on("click",liHandler);*/
        });
        function bodyHandler(event){
            console.log(event);
        }
        function divHandler1(event){
            console.log(event);
            /*stopImmediatePropagation()阻止当前事件的所有后续冒泡行为，所以后面的divHandler2不会执行*/
            //event.stopImmediatePropagation();
            /*stopPropagation()仅阻止当前事件的父事件的执行，不会阻止自己的后续动作，所以divHandler2还会执行*/
             event.stopPropagation();
        }
        function divHandler2(event){
            console.log(event);
                    }
        // function liHandler(event){
        //     console.log(event);
        //     // event.stopPropagation();
        //     // event.stopImmediatePropagation();
        // }/*冒泡只会往上冒一次，不会无限制的网上冒泡。*/
    </script>
</head>
<body>
    <div style="300px; height:300px; background-color: aqua;">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </div>
</body>
</html>

 这里可以将console.log(event)封装在一个函数之中，便于以后调试程序信息出错;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("body").on("click",bodyHandler);
            $("div").on("click",divHandler1);
            $("div").on("click",divHandler2);
            /*$("li").on("click",liHandler);*/
        });
        function bodyHandler(event){
            conlog(event);
        }
        function divHandler1(event){
            conlog(event);
            event.stopPropagation();
        }
        function divHandler2(event){
            conlog(event);
                    }
        function conlog(event){
            console.log(event);
        }
    </script>
</head>
<body>
    <div style="300px; height:300px; background-color: aqua;">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </div>
</body>
</html>

5、自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        var ClickMeBtn;
        $(document).ready(function(){
            ClickMeBtn = $("#btn");
            ClickMeBtn.click(function(){
                var e = jQuery.Event("MyEvent");/*设置自定义事件的原因就是为了编写人员
                在触发某一事件时能够更加直观地知道是什么事件被触发了。*/
                ClickMeBtn.trigger(e);/*意思是以代码方式触发ClickMeBtn的e事件*/
            });
            ClickMeBtn.on("MyEvent",function(event){
                console.log(event);
            });
        });
    </script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/foreverlin/p/10112598.html