你不得不知道的jQuery基础（2）

最新推荐文章于 2022-11-04 15:14:11 发布

TomLazy

最新推荐文章于 2022-11-04 15:14:11 发布

阅读量123

点赞数 1

分类专栏：日常学习文章标签： jQuery

本文链接：https://blog.csdn.net/qq_41071754/article/details/108449060

版权

日常学习专栏收录该内容

82 篇文章 8 订阅

订阅专栏

1、什么是事件？

面对不同访问者的响应叫做事件

2、JQuery事件集合

①、click()

该函数在用户点击HTML元素时执行

②、dblclick()

当双击元素时，会发生dblclick事件

③、mouseenter()

当鼠标指针穿过元素时，会发生mouseenter()事件

④、mouseleave()

当鼠标指针离开元素时，会发生mouseleave()事件

⑤、mousedown()

当鼠标指针移动到元素上方，点击鼠标按钮，触发mousedown()事件

⑥、mouseup()

当松开鼠标按钮时，触发mouseup()事件

⑦、hover()

用于模拟光标悬停事件

⑧、focus()

当元素获得焦点时，发生focus事件

⑨、blur()

当元素失去焦点时，发生blur事件

// 综合实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery事件学习</title>
    <style type="text/css">
        #div01,#div02,#div03,#div04{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        span
        {
            display:none;
        }
    </style>
</head>
<body>
    <div>
        <h3>1.click事件 与 dblclick事件</h3>
        <p>click是元素的单击事件，dblclick是元素的双击事件</p>
        <hr />
        <p>
            实例：当鼠标单击方块时，方块变成浅绿色；<br>
                 当鼠标双击方块时，方块变成浅蓝色。
        </p>
        <div>
            <div id="div01" ></div>
        </div>
        <hr />
        <h3>2.mouseenter事件 与 mouseleave事件</h3>
        <p>
            mouseenter是鼠标进入某个元素时触发的事件；<br>
            mouseleave是鼠标离开某个元素时触发的事件。
        </p>
        <hr />
        <div>
            <p>
                实例：当鼠标移动到div02时，方块变成浅绿色；<br>
                     当鼠标移出div02时，颜色变回红色。
            </p>
            <div id="div02" ></div>
        </div>

        <hr />
        <h3>3.mouseup事件 与 mousedown事件</h3>
        <p>
            mousedown是鼠标按下时触发的事件；
            mouseup是鼠标松开时触发的事件；
        </p>
        <hr />
        <div>
            <p>
                实例：当鼠标按下时，div03变成浅绿色；<br>
                当鼠标松开时，颜色变回原色。
            </p>
            <div id="div03" ></div>
        </div>

        <hr />
        <h3>4.hover事件</h3>
        <p>
            hover事件等同于mouseleave和mouseenter两个事件的综合体
            基本语法：$(选择器).hover(function(){},function(){});
            注：hover的第一个function参数为mouseenter的回发事件；第二个function参数为mouseleave的回发事件
        </p>
        <hr />
        <div>
            <p>
                实例：当鼠标移动到div04时，方块变成浅绿色；<br>
                当鼠标移出div04时，颜色变回原色。
            </p>
            <div id="div04" ></div>
        </div>

        <hr />
        <h3>5.focus事件 与 blur事件</h3>
        <p>
            focus事件某元素获取鼠标焦点的事件，blur事件某元素失去鼠标焦点的事件。
        </p>
        <hr />
        <div>
            <p>
                实例：当鼠标移动到div04时，方块变成浅绿色；<br>
                当鼠标移出div04时，颜色变回红色。
            </p>
            <input id="input1" type="text" width="200px" height="20px" step="1">
            <span>请输入你的电话号码?</span><br>
            <input id="input2" type="text" width="200px" height="20px" step="2">
        </div>
    </div>

    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <script>
        // 单击事件
        $("#div01").click(function(){
            $(this).css("background-color","lawngreen");
        });
        // 双击事件
        $("#div01").dblclick(function(){
            $(this).css("background-color","cornflowerblue");
        });

        // mouseenter事件
        $("#div02").mouseenter(function(){
            $(this).css("background-color","lawngreen");
        });
        // mouseleave事件
        $("#div02").mouseleave(function(){
            $(this).css("background-color","red");
        });

        // mousedown事件
        $("#div03").mousedown(function(){
            $(this).css("background-color","lawngreen");
        });
        // mouseup事件
        $("#div03").mouseup(function(){
            $(this).css("background-color","antiquewhite");
        });

        // hover事件
        $("#div04").hover(function(){
            $(this).css("background-color","lawngreen");
        },function (){
            $(this).css("background-color","antiquewhite");
        });

        // focus事件
        $("#input1,#input2").focus(function(){
            $(this).css("width","300px");
            $("span").css("display","inline").fadeOut(2000);
            $(this).css("height","30px");
        });
        // blur事件
        $("#input1,#input2").blur(function(){
            $(this).css("width","200px");
            $(this).css("height","20px");
        });
    </script>
</body>
</html>

实例图：

TomLazy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
你不得不知道的jQuery基础（2）

1、什么是事件？面对不同访问者的响应叫做事件2、JQuery事件集合①、click()该函数在用户点击HTML元素时执行②、dblclick()当双击元素时，会发生dblclick事件③、mouseenter()当鼠标指针穿过元素时，会发生mouseenter()事件④、mouseleave()当鼠标指针离开元素时，会发生mouseleave()事件⑤、mousedown()当鼠标指针移动到元素上方，点击鼠标按钮，触发mousedown()事件⑥、mo...
复制链接

扫一扫