事件

最新推荐文章于 2023-07-27 10:50:20 发布

噢啦噢啦噢啦

最新推荐文章于 2023-07-27 10:50:20 发布

阅读量300

点赞数

分类专栏： HTML.

本文链接：https://blog.csdn.net/qq_35860368/article/details/53679314

版权

HTML. 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .as{
            color: red;
        }
        div{
            width: 100px;
            height: 200px;
            border: 1px solid red;
            overflow: scroll;
        }
    </style>
</head>
<body>
<p id="p1">this is p</p>
<p id="p2">this is p</p>
<p id="p3">this is p</p>
<p id="p4">this is p</p>
<div>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
</div>

<select name="" id="sel">
    <option value="">小王</option>
    <option value="">大王</option>
</select>
<script src="js/jQuery-2.2.2-min.js"></script>
<script>
    $("#p1").click(function(){
        alert();
    });

    $("#sel").change(function(){
        alert();
    });

    /*on()绑定事件*/
    $("#p2").on("click",function(){
        alert("click");
    });

    /*绑定多个事件*/
    /*$("#p3").on("click mouseover",function(){
        console.info("123");
    });*/

    $("#p3").on({"click":function(){
        console.info("click")
    },"mouseover":function(){
        console.info("over");
    }});

    /*hover()*/
    $("#p4").hover(function(){
        $(this).addClass("as");
    },function(){
        $(this).removeClass("as");
    })
</script>
</body>
</html>