前端HTML调用jQuery库，鼠标事件、键盘事件、表单事件、编辑事件、滚动事件（前端：HTML搭配jQuery系列教程八）

最新推荐文章于 2023-11-27 09:48:00 发布

Kkh_8686

最新推荐文章于 2023-11-27 09:48:00 发布

阅读量1.2k

点赞数 4

分类专栏： web端 flask 服务器文章标签： html5 html css javascript jquery

本文链接：https://blog.csdn.net/K_AAbb/article/details/116949179

版权

web端同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

服务器

14 篇文章 0 订阅

订阅专栏

flask

11 篇文章 1 订阅

订阅专栏

一、鼠标移入和鼠标移出

说明：

当用户将鼠标移入到某个元素上面时，就会触发mouseover事件。如果将鼠标移出某个元素时，就会触发mouseout事件。mouseover和mouseout平常都是形影不离的。
代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("div").mouseover(function(){
                $(this).css("color", "green");
            })
            $("div").mouseout(function () {
                $(this).css("color", "red");
            })
        })
    </script>
</head>
<body>
    <div>古天乐变绿了！</div>
</body>
</html>

运行效果：

鼠标未放在字体上面：
鼠标放在字体上面：

二、鼠标按下和鼠标松开

说明：

当用户按下鼠标时，会触发mousedown事件；当用户松开鼠标时，则会触发mouseup事件。
mousedown表示鼠标按下的一瞬间所触发的事件，而mouseup表示鼠标松开的一瞬间所触发的事件。当然我们都知道，只有“先按下”才能“再松开”。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#btn").mousedown(function(){
                $("h1").css("color", "red");
            })
            $("#btn").mouseup(function () {
                $("h1").css("color", "black");
            })
            $("#btn").keydown(function () {
                $("h1").css("color", "blue");
            })
            $("#btn").keyup(function () {
                $("h1").css("color", "yellow");
            })
        })
    </script>
</head>
<body>
    <h1>李小龙</h1>
    <hr />
    <input id="btn" type="button" value="按钮" />
</body>
</html>

运行效果：

鼠标点击时候效果：
鼠标松开时候效果：
键盘松开时候效果：

三、统计、显示输入字符的长度数

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#txt").keyup(function(){
                var str = $(this).val();
                $("#num").text(str.length);
            })
        })
    </script>
</head>
<body>
    <input id="txt" type="text" />
    <div>
        字符串长度为：
        <span id="num">0</span>
    </div>
</body>
</html>

运行效果：
在这里插入图片描述

三、显示选择的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $('input[type="radio"]').change(function(){
                var bool = $(this).prop("checked");
                if(bool){
                    $("p").text("你选择的是：" + $(this).val());
                }
            })
        })
    </script>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" />苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <p></p>
</body>
</html>

运行效果：

选择前：
选择后：

四、表单下拉列表

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("select").change(function(){
                var link = $(":selected").val();
                window.open(link);
            })
        })
    </script>
</head>
<body>
    <select>
        <option value="http://www.163.com">小车视觉驾驶</option>
        <option value="http://wwww.baidu.com">小车驾驶</option>
        <option value="http://www.qq.com">小车摄像头</option>
        <option value="http://www.sina.com.cn">小车内环境参数</option>
        <option value="http://www.sohu.com">小车外环境参数</option>
    </select>
</body>
</html>

运行效果：
在这里插入图片描述

五、滚动条拉看事件、弹回到顶部

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body
        {
            height:1800px;
        }
        div
        {
            position:fixed;
            right:50px;
            bottom:50px;
            display:none;     /*设置默认情况下元素为隐藏状态*/
            width:40px;
            height:40px;
            color:white;
            background-color:#45B823;
            font-family:微软雅黑;
            font-size:15px;
            font-weight:bold;
            text-align:center;
            cursor:pointer;
        }
    </style>
    <script src="../static/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            /*根据滚动距离判断按钮是否显示或隐藏*/
            $(window).scroll(function () {
                if ($(this).scrollTop() > 300) {
                    $("div").css("display", "inline-block");
                }
                else {
                    $("div").css("display", "none");
                }
            });
            /*实现点击滚动回顶部*/
            $("div").click(function () {
                $("html,body").scrollTop(0);
            });
        })
    </script>
</head>
<body>
    <h3>我二弟天下无敌！</h3>
    <div>回到顶部</div>
</body>
</html>

运行效果：
在这里插入图片描述

在这里插入图片描述

Kkh_8686

关注

4
点赞
踩
29

收藏

觉得还不错? 一键收藏
15
评论
前端HTML调用jQuery库，鼠标事件、键盘事件、表单事件、编辑事件、滚动事件（前端：HTML搭配jQuery系列教程八）

一、鼠标移入和鼠标移出说明：当用户将鼠标移入到某个元素上面时，就会触发mouseover事件。如果将鼠标移出某个元素时，就会触发mouseout事件。mouseover和mouseout平常都是形影不离的。代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="../static
复制链接

扫一扫