web前端学习（五）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事件：

　　常用事件方法

　　绑定事件

　　解除绑定事件

　　事件的目标

　　事件的冒泡

　　自定义事件

web前端学习（五）JQuery学习笔记部分（2）-- JQuery选择器和事件

1、选择器

2、事件常用方法

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

3.1、jQuery事件：

4、事件目标与冒泡

5、自定义事件

猜你喜欢