web基础学习笔记(二十一)之jquery常用事件操作

最新推荐文章于 2024-05-13 02:02:49 发布

weixin_44014196

最新推荐文章于 2024-05-13 02:02:49 发布

阅读量93

点赞数 1

分类专栏： web学习文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44014196/article/details/108894820

版权

web学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        /*click绑定单击事件 以及触发单击事件
        mouseover鼠标移入事件
        mouseout鼠标移出事件
        bind可以给元素一次性绑定一个或多个事件，用空格隔开
        unbind跟bind相反，解除绑定
        one使用上跟bind一样，但是one只响应一次
        live绑定事件，可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效*/
        $(function () {

            ("h5").click(function () {
                alert("h5单击事件");
            });
            $("h5").mouseover(function () {
                console.log("你进来了");
            });
            $("h5").mouseout(function () {
                console.log("你出去了");
            });
            $("h5").bind("click mouseover mouseout", function () {
                console.log("bind绑定事件");
            });
            $("h5").one("click mouseover mouseout", function () {
                console.log("bind绑定事件");
            });
            /*$
            $("h5").live("click", function () {
                console.log("live事件");
            });
            $('<h5 class="head">什么是jquery</h5>').appendTo($("#panel"));
            */
        });

    </script>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是jquery</h5>
        <div class="content">
            jquery是继xxx之后又一个优秀的js库，他是由xxx创建的开源项目
        </div>
    </div>

</body>
</html>