jquery事件

最新推荐文章于 2023-03-22 00:41:15 发布
qq_18932003
最新推荐文章于 2023-03-22 00:41:15 发布
阅读量229
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/qq_18932003/article/details/119703407
版权
前端专栏收录该内容
75 篇文章 1 订阅
订阅专栏

t205
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //内容操作
            //.html("html") 设置内容
            $("#btn1").click(function () {
                var str = "虾米大王<strong>教程</strong>";
                $("div").html(str);
            });
        });
        /*
        在jQuery中，对内容操作有以下3种方法
        .html()
        .text()
        .val()
        其中，html（）和text（）这两个方法用于操作一般元素，
        而val方法用于操作表单元素。

        $().html() ，表示获取html内容
        $().html("html内容") ，表示设置html内容

        html()方法和innerHTML方法的效果是一样的，
        html()是jQuery的实现方式，
        innerHTML是JavaScript的实现方式

         */
</script>
</head>
<body>
    <input type="button" id="btn1" value="设置">
    <div></div>
</body>
</html>

t206
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        input[type=text]{
            width: 400px;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //内容操作
            //.html()与.text()比较
            var strHtml = $("p").html();
            var strText = $("p").text();

            $("#txt1").val(strHtml);
            $("#txt2").val(strText);

        });
        /*
        在jQuery中，对内容操作有以下3种方法
        .html()
        .text()
        .val()
        其中，html（）和text（）这两个方法用于操作一般元素，
        而val方法用于操作表单元素。

        $().html() ，表示获取html内容
        $().html("html内容") ，表示设置html内容

        html()方法和innerHTML方法的效果是一样的，
        html()是jQuery的实现方式，
        innerHTML是JavaScript的实现方式

         */
</script>
</head>
<body>
    <p><strong style="color: hotpink">虾米大王学院</strong></p>
    html()是：<input type="text" id="txt1"><br>
    text()是：<input type="text" id="txt2">
</body>
</html>

t207
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //内容操作
            //获取表单的值
           $("#btn_get").click(function () {
               var str1 = $("#txt1").val();
               alert(str1);
           });

           $("#btn_set").click(function () {
               var str2 = "给你非常优秀的感觉";
               $("#txt2").val(str2);
           });
        });
        /*
        $().val()
        $().val("值内容");
        val方法不仅可以获取表单元素的值，也可以用来设置表单元素的值

         */
</script>
</head>
<body>
    <input type="text" id="txt1" value="虾米大王"><br>
    <input type="text" id="txt2"><br>
    获取第1个文本框的值：<input type="button" id="btn_get" value="获取"><br>
    设置第2个文本框的值：<input type="button" id="btn_set" value="设置">
</body>
</html>

t208
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script>
        //页面事件
        //JavaScript的onload事件
        window.onload = function () {
          var btn1 = document.getElementById("btn1");
          btn1.onclick = function () {
              alert("欢迎来到虾米大王学院");
          }
        };

        /*
        在jQuery中，一个实践由3部分组成。
        事件主角，按钮，div元素等
        事件类型，鼠标点击，移动等
        事件过程，发生了什么

        jQuery基本的事件共有6种，
        页面事件
        鼠标事件
        表单事件
        编辑事件
        滚动事件
        这里记住一句话，如果没有学懂事件操作，jQuery就等于白学了。

        对于JavaScript的onload事件来说，只有当页面上的所有DOM
        元素以及所有外部文件（图片，外部css，外部JavaScript脚本）
        等加载完毕后才会执行的。
         */
</script>
</head>
<body>
    <input type="button" id="btn1" value="提交"><br>
    <img src="img/1.png" alt="1.png">
</body>
</html>

t209
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //页面事件
        //jQuery的ready事件
        $(document).ready(function () {
            $("#btn1").click(function () {
                alert("欢迎来虾米大王学院");
            });
        });

        /*
        在jQuery中，一个实践由3部分组成。
        事件主角，按钮，div元素等
        事件类型，鼠标点击，移动等
        事件过程，发生了什么

        jQuery基本的事件共有6种，
        页面事件
        鼠标事件
        表单事件
        编辑事件
        滚动事件
        这里记住一句话，如果没有学懂事件操作，jQuery就等于白学了。

        对于jQuery的ready事件来说，只要页面上所有的DOM元素加载完成
        就可以执行，不要再等到外部文件加载完成。
         */
</script>
</head>
<body>
    <input type="button" id="btn1" value="提交"><br>
    <img src="img/1.png" alt="1.png">
</body>
</html>

t210
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //在jQuery中，对于ready事件，有4中写法：

        //写法1：
        $(document).ready(function () {

        });

        //写法2：
        jQuery(document).ready(function () {

        });

        //写法3：
        $(function () {

        });

        //写法4：
        jQuery(function () {

        });

        /*
        写法1中，表示将document对象转换为jQuery对象，再调用其
        ready方法，参数是一个匿名函数。

        写法2中，$是jQuery的别名，所以$() 等价于 jQuery（）。

        写法3中，就是实际开发中用到的最多的，简写方式。

        写法4中，不常用。
         */
</script>
</head>
<body>

</body>
</html>

t211
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //页面事件
        //多次调用window onload事件
        window.onload = function () {
          alert("第1次调用");
        };
        window.onload = function () {
            alert("第2次调用");
        };
        window.onload = function () {
            alert("第3次调用");
        };
        window.onload = function () {
            alert("第4次调用");
        };

        /*
        在JavaScript中，window.onload只能调用一次，
        如果多次调用，则只会执行最后一次的。

         */
</script>
</head>
<body>

</body>
</html>

t212
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //页面事件
        //多次调用$(document).ready()
        $(document).ready(function () {
            alert("第1次调用");
        });
        $(document).ready(function () {
            alert("第2次调用");
        });
        $(document).ready(function () {
            alert("第3次调用");
        });

        /*
        在jQuery中，ready事件是可以多次执行的。
         */
</script>
</head>
<body>

</body>
</html>

t213
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            display: inline-block;
            width: 80px;
            height: 24px;
            line-height: 24px;
            font-family: "微软雅黑";
            font-size: 15px;
            text-align: center;
            border-radius: 3px;
            background-color: deepskyblue;
            color: white;
            cursor: pointer;
        }
        div:hover{
            background-color: dodgerblue;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //鼠标事件
        //click事件
        $(function () {
           $("div").click(function () {
               alert("代码调试完毕，请检阅！");
           });
        });

        /*
        在jQuery中常用的鼠标事件有，
        click，鼠标单击
        mouseover，鼠标滑入
        mouseout， 鼠标滑出
        mousedown，鼠标按下
        mouseup，鼠标松开
        mousemove，鼠标移动

        jQuery事件比JavaScript事件少了“on”前缀，

        单击事件，不只是按钮才有，任何元素都可以添加单击事件

         */
</script>
</head>
<body>
    <div>调试代码</div>
</body>
</html>

t214
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //鼠标事件
        //自动触发点击事件 .click()
        $(function () {
           $("#btn1").click(function () {
               alert("虾米大王");
           }).click();
        });
        /*
        自动触发点击事件，这个小技巧很有用，比如制作图片轮播
        效果时就可以用到。
         */
</script>

</head>
<body>
    <input type="button" id="btn1" value="按钮">
</body>
</html>

t215
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //鼠标事件
        //移入和移出 mouseover 和 mouseout
        $(function () {
           $("div").mouseover(function () {
               $(this).css("color","blue");
           });
           $("div").mouseout(function () {
               $(this).css("color","black");
           });
        });
</script>
</head>
<body>
    <div>虾米大王</div>
</body>
</html>

t216
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //鼠标事件
            //链式调用 鼠标移入移出
           $("div").mouseover(function () {
               $(this).css("background-color","#cccccc");
           }).mouseout(function () {
               $(this).css("background-color","#ffffff");
           });
        });
        /*
        在jQuery中，如果对同一个对象进行多种操作，可以使用链式调用
        的语法。链式调用是jQuery中的经典语法，可以节省代码量，提高
        代码的可读性。

         */
</script>
</head>
<body>
    <div>虾米大王</div>
</body>
</html>

t217
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //鼠标事件
            //鼠标按下和松开 mousedown 和  mouseup
           $("#btn1").mousedown(function () {
               $("h1").css("color","blue");
           });
           $("#btn1").mouseup(function () {
              $("h1").css("color","black")
           });
        });
        /*
        为了能够观察效果，请按下鼠标键不放，观察，
        松开鼠标，观察。
        鼠标按下，在鼠标松开之前发生。
         */
</script>
</head>
<body>
    <h1>虾米大王</h1>
    <hr>
    <input type="button" id="btn1" value="按钮">
</body>
</html>

t218
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //键盘事件
        //keyup 键盘松开
        $(function () {
           $("#txt").keyup(function () {
               var str = $(this).val();
               $("#num").text(str.length);
           });
        });
</script>
</head>
<body>
    <input type="text" id="txt">
    <div>
        字符串长度为：
        <span id="num">0</span>
    </div>
</body>
</html>

t219
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //定义一个变量，保存正则表达式
            var myregex = /^[0-9]*$/;
            $("#txt").keydown(function () {
               var value = $(this).val();
               if(myregex.test(value))
               {
                   $("div").text("输入正确");
               }
               else
               {
                   $("div").text("必须输入数字");
               }
            });
        });
</script>
</head>
<body>
    <input type="text" id="txt">
    <div style="color: blue"></div>
</body>
</html>

t220
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #search{
            color: #BBBBBB;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //表单事件
            //.focus 和 .blur
           var txt = $("#search").val();
            //获取焦点
           $("#search").focus(function () {
               if($(this).val() == txt)
               {
                   $(this).val("");
               }
           });
            //失去焦点
           $("#search").blur(function () {
               if($(this).val() == "")
               {
                   $(this).val(txt)
               }
           });

        });

        /*
        在jQuery中，常用的表单事件有3种。
        .focus 和 .blur
        .select
        .change

        具有获取焦点和失去焦点的元素只有两种，
        一种是表单元素（单选，多选，文本框，下拉列表），
        一种是超链接。

        实际开发中，焦点事件一般用于单行文本框和多行文本框，其他地方
        少见。
         */
</script>
</head>
<body>
    <input type="text" id="search" value="度娘一下，你就知道">
    <input type="button" value="搜索">
</body>
</html>

t221
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //表单事件
        //自动获取焦点

        $(function () {
           $("#txt1").focus();
        });
</script>
</head>
<body>
    <input type="text" id="txt1">
</body>
</html>

t222
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //表单事件
        //.select()
        $(function () {
            $("#txt1").select(function () {
                alert("选中单行文本框");
            });

            $("#txt2").select(function () {
                alert("选中了多行文本框");
            });
        });
</script>
</head>
<body>
    <input type="text" id="txt1" value="当行文本框"><br>
    <textarea id="txt2" cols="20" rows="30">多行文本框</textarea>
</body>
</html>

t223
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //表单事件
        //全选文本
        $(function () {
           $("#search").click(function () {
               $(this).select();
           });
        });
</script>
</head>
<body>
    <input type="text" id="search" value="度娘一下，你就清楚">
</body>
</html>

t224
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //表单事件
        //.change
        $(function () {
           $("input[type=radio]").change(function () {
               var bool = $(this).prop("checked");
               if(bool)
               {
                   $("p").text("你选择的是：" + $(this).val());
               }
           });
        });
        /*
        在jQuery中，触发change事件的元素有
        单选框选择某一项
        复选框选择某一项
        下拉框选择某一项

         */
</script>
</head>
<body>
    <div>
        <input type="radio" name="fruit" id="apple" value="苹果">
        <label for="apple">苹果</label>
        <input type="radio" name="fruit" id="banana" value="香蕉">
        <label for="banana">香蕉</label>
        <input type="radio" name="fruit" id="watermelon" value="西瓜">
        <label for="watermelon">西瓜</label>
    </div>
    <p></p>
</body>
</html>

t225
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //表单操作
        //复选框的全选和反选
        $(function () {
            $("#selectAll").change(function () {
                var bool = $(this).prop("checked");
                if(bool)
                {
                    $(".fruit").attr("checked","checked");
                }
                else
                {
                    $(".fruit").removeAttr("checked");
                    //$(".fruit").removeProp("checked"); 这种写法无效，不知道为啥
                }
            });

        });
</script>
</head>
<body>
    <div>
        <p>
            <input type="checkbox" id="selectAll">
            <label for="selectAll">全选/反选</label>
        </p>
        <input type="checkbox" id="apple" value="苹果" class="fruit">
        <label for="apple">苹果</label>
        <input type="checkbox" id="banana" value="香蕉" class="fruit">
        <label for="banana">香蕉</label>
        <input type="checkbox" id="watermelon" value="西瓜" class="fruit">
        <label for="watermelon">西瓜</label>
    </div>
</body>
</html>

t226
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        select{
            width: 200px;
            height: 30px;
            line-height: 30px;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //表单事件
        //.change 下拉框
        $(function () {
           $("select").change(function () {
              var link = $(":selected").val();
              window.open(link);
           });
        });
</script>
</head>
<body>
    <select>
        <option value="http://www.baidu.com">度娘</option>
        <option value="http://www.163.com">网易</option>
        <option value="http://www.360.cn">360</option>
    </select>
</body>
</html>


t227
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //编辑事件
            //contextmenu 鼠标右键
            //body，禁用时你会发现文字上面右键被禁用，但是页面依然有效
           $("body").contextmenu(function () {
              return false;
           });
            //需要页面全部禁用时，替换为html
           $("html").contextmenu(function () {
               return false;
           });

        });
</script>
</head>
<body>
    <div>学好数理化，走遍天下都不怕。</div>
</body>
</html>

t228
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 150px;
            height: 100px;
            background-color: lightskyblue;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //编辑事件
        //点击鼠标右键切换背景颜色
        $(function () {
            $("div").contextmenu(function () {
                $(this).css("background-color","hotpink");
                return false
            });
        });
</script>
</head>
<body>
    <div></div>
</body>
</html>

t229
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            height: 1800px;
        }
        #box1,#box2{
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        #box1{
            background-color: red;
        }
        #box2{
            background-color: orange;
            position: fixed;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //滚动事件
            //固定栏目
            //获取box2距离顶部的距离
           var top = $("#box2").offset().top;
           //根据滚动判断定位
           $(window).scroll(function () {
               if($(this).scrollTop() > top)
               {
                   //当滚动条距离超过box2的位置时，设定为固定定位
                   $("#box2").css({
                       "position":"fixed",
                       "top":"0"
                   });
               }
               else
               {
                   //滚动条的距离小于box2的位置时，设定为相对定位
                   $("#box2").css({
                       "position":"relative",
                   });
               }
           });
        });
</script>
</head>
<body>
    <div id="box1"></div><br>
    <div id="box2"></div>
</body>
</html>

t230
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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="../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>

t231
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //绑定事件
        //on
        $(function () {
           $("#btn1").on("click",function () {
              alert("采用on方法绑定事件");
           });
        });

        /*
        在jQuery中，on（）方法，有点类似JavaScript的addEventListener（）
         */

        /*
        解惑
        从jQuery1.7开始，对于绑定事件，jQuery官方建议使用on方法来统一
        取代以前的bind（），live（）和delegate（）方法；
        对于解绑事件，jQuery官方也建议使用off（）来统一取代以前的
        unbind（），die（），undelegate（）方法。
        因此，大家今后看到bind，live等方法，直接忽略。
         */
</script>
</head>
<body>
    <input type="button" id="btn1" value="按钮">
</body>
</html>

t232
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //绑定事件
            //动态创建元素
           var $btn1 = $('<input type="button" id="btn1" value="按钮">');
           $("body").append($btn1);

           $("#btn1").on("click",function () {
              alert("动态创建的元素on绑定事件");
           });
        });

        /*
        解惑
        从jQuery1.7开始，对于绑定事件，jQuery官方建议使用on方法来统一
        取代以前的bind（），live（）和delegate（）方法；
        对于解绑事件，jQuery官方也建议使用off（）来统一取代以前的
        unbind（），die（），undelegate（）方法。
        因此，大家今后看到bind，live等方法，直接忽略。
         */
</script>
</head>
<body>

</body>
</html>

t233
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //解绑事件
            //off
            $("#btn1").click(function () {
                alert("基本事件绑定click");
            });

            $("#btn_off").click(function () {
               $("#btn1").off("click");
               alert("已解绑事件");
            });
        });

        /*
        jQuery的off方法，有点类似JavaScript的removeEventListener（）。
         */
</script>
</head>
<body>
    <input type="button" id="btn1" value="按钮"><br>
    <input type="button" id="btn_off" value="解除">
</body>
</html>

t234
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //解绑事件
            //off,解除使用“绑定事件on”方式的事件
            $("#btn1").on("click",function () {
                alert("on方法绑定click");
            });

            $("#btn_off").on("click",function () {
                $("#btn1").off("click");
                alert("已解绑事件");
            });
        });

        /*
        jQuery的off方法，有点类似JavaScript的removeEventListener（）。

        疑问：解绑事件有什么用处呢？
        实际开发中，如果需要实现拖拽效果，在mouseup事件中就必须要解除
        mousemove事件，如果没有解除就会有bug出现。

         */
</script>
</head>
<body>
    <input type="button" id="btn1" value="按钮"><br>
    <input type="button" id="btn_off" value="解除">
</body>
</html>

t235
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //合成事件
        //hover()，可以代替鼠标移入mouseenter和移出mouseleave事件
        $(function () {
           $("div").hover(function () {
               $(this).css("color","blue");
           },function () {
               $(this).css("color","black");
           });
        });
</script>
</head>
<body>
    <div>hover合并事件的使用</div>
</body>
</html>

t236
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h3{
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #dddddd;
            cursor: pointer;
        }
        div{
            display: none;
            padding: 10px;
            border:1px solid silver;
            text-indent: 32px;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
           $("h3").hover(function () {
               $("div").css("display","block");
           },function () {
               $("div").css("display","none");
           });
        });
</script>
</head>
<body>
    <h3>虾米大王</h3>
    <div>学习编程技术是一种枯燥的体验，也是一种非常考验耐心的事情，我们需要不断的提升自我，优化经验，学习更多的编程技术，
    在程序员的世界里，没有最好，只有最适合自己的才是好！</div>
</body>
</html>

t237
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //一次事件
            //one（）
           $("#btn1").one("click",function () {
              alert("我只会执行一次。");
           });
        });
</script>
</head>
<body>
    <input type="button" id="btn1" value="按钮">
</body>
</html>

t238
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //自定义事件
        //trigger()触发自定义事件
        $(function () {
           $("#btn1").on("delay",function () {
              setTimeout(function () {
                  alert("欢迎学习技术");
              },1000);
           });
            //
           $("#btn1").click(function () {
               $("#btn1").trigger("delay");
           });
        });
</script>
</head>
<body>
    <input type="button" id="btn1" value="按钮">
</body>
</html>

t239
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //自定义事件
        //trigger（）
        $(function () {
           $("#btn1").on("click",function () {
             alert("on绑定事件，trigger触发");
           }).trigger("click");
        });
</script>
</head>
<body>
    <input type="button" id="btn1" value="按钮">
</body>
</html>

t240
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //event对象
        //.type
        $(function () {
           $("#btn1").click(function (event) {
               alert(event.type);
           });
        });
        /*
        解惑
        每次调用一个事件的时候，jQuery都会默认给这个事件函数加上一个
        隐藏的参数，就是event对象。在函数中声明的变量名可以是e，也可以
        是event，只要是一个变量名，它实际是指代的event对象。

         */
</script>
</head>
<body>
    <input type="button" id="btn1" value="按钮">
</body>
</html>

t241
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //event对象
        //.target()，获取触发事件的元素
        $(function () {
           $("a").click(function (event) {
               var result = $(event.target).attr("href");
               alert(result);
               return false;
           });
        });

        /*
        $(event.target).attr("herf") 等价于
        $(this).attr("href");
         */
</script>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

t242
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //event对象
            //.which()，获取单击了哪个按键
           $("a").mousedown(function (event) {
               switch (event.which) {
                   case 1:
                       alert("你点击了左键");
                       break;
                   case 2:
                       alert("你点击了中键");
                       break;
                   case 3:
                       alert("你点击了右键");
                       break;
               }
           });
        });

        //event.which，返回值，1表示左键，2表示中键，3表示右键
</script>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

t243
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //event对象
        //.pageX 和 .pageY
        $(function () {
           $(document).mousemove(function (event) {
               var result = "鼠标坐标：(" + event.pageX + "，" + event.pageY + ")";
               $("body").text(result);
           });
        });
        /*
        在jQuery中，可以使用event对象的pageX和pageY两个属性来分别获取鼠标
        相对于页面左上角的坐标。该坐标是以页面作为参考点，不随滚动条的移动而
        变化。

         */
</script>
</head>
<body>

</body>
</html>

t244
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //event对象
        //.keyCode ，获取键盘上的哪个按键被按下
        $(function () {
           $(document).keydown(function (event) {
               if(event.shiftKey || event.ctrlKey || event.altKey)
               {
                   alert("禁止使用");
               }
           });
        });
        /*
        在jQuery中，使用event.keyCode的返回值判断按下哪个键，
        常用的按键与对应的码值
        W=87，
        S=83，
        A=65，
        D=68，
        方向上=38，
        方向下=40，
        方向左=37，
        方向右=39.

        如果需要获取shift，crtl，alt三个键，可以直接使用属性
        shiftKey，ctrlKey和altKey。

        keyCode属性的返回值都是一个数字，而shiftKey，ctrlKey，
        altKey的返回值是布尔型的。

         */
</script>
</head>
<body>
    <div>禁止使用shift，ctrl，alt键的效果</div>
</body>
</html>

t245
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body,div,span {
            margin: 0;
            padding: 0;
        }
        div{
            background-color: #EEEEEE;
            width: 99%;
            height: 80px;
            border: 1px solid #666666;
            padding: 5px;
            margin: 0 auto;
        }
        div span{
            font-size: 25px;
            font-weight: bold;
            padding: 5px;
            text-align: center;
            line-height: 25px;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $(window).keydown(function (event) {
                if(event.keyCode == 38 || event.keyCode == 87)
                {
                    $("span").text("上");
                }
                else if (event.keyCode == 40 || event.keyCode == 83)
                {
                    $("span").text("下");
                }
                else if (event.keyCode == 37 || event.keyCode == 65)
                {
                    $("span").text("左");
                }
                else if (event.keyCode == 39 || event.keyCode == 68)
                {
                    $("span").text("右");
                }
                else
                {
                    $("span").text("错误");
                }
            });
        });
        /*
        在jQuery中，使用event.keyCode的返回值判断按下哪个键，
        常用的按键与对应的码值
        W=87，
        S=83，
        A=65，
        D=68，
        方向上=38，
        方向下=40，
        方向左=37，
        方向右=39.

        如果需要获取shift，crtl，alt三个键，可以直接使用属性
        shiftKey，ctrlKey和altKey。

        keyCode属性的返回值都是一个数字，而shiftKey，ctrlKey，
        altKey的返回值是布尔型的。

         */
</script>
</head>
<body>
    <div>请按方向键或WASD，你控制的方向是：
        <span style="color: blue"></span>
    </div>
</body>
</html>

t246
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body,div,span {
            margin: 0;
            padding: 0;
        }
        div{
            background-color: #EEEEEE;
            width: 99%;
            height: 80px;
            border: 1px solid #666666;
            padding: 5px;
            margin: 0 auto;
        }
        div span{
            font-size: 25px;
            font-weight: bold;
            padding: 5px;
            text-align: center;
            line-height: 25px;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $(window).keydown(function (event) {
                switch (event.keyCode) {
                    case 37:
                    case 65:
                        $("span").text("左");
                        break;
                    case 38:
                    case 87:
                        $("span").text("上");
                        break;
                    case 39:
                    case 68:
                        $("span").text("右");
                        break;
                    case 40:
                    case 83:
                        $("span").text("下");
                        break;
                    default:
                        $("span").text("错误");
                        break;

                }

            });
        });
        /*
        在jQuery中，使用event.keyCode的返回值判断按下哪个键，
        常用的按键与对应的码值
        W=87，
        S=83，
        A=65，
        D=68，
        方向上=38，
        方向下=40，
        方向左=37，
        方向右=39.

        如果需要获取shift，crtl，alt三个键，可以直接使用属性
        shiftKey，ctrlKey和altKey。

        keyCode属性的返回值都是一个数字，而shiftKey，ctrlKey，
        altKey的返回值是布尔型的。

        另外插一句，我发现方向键的码值是按照顺时针编的，
        就是37,38,39,40，左上右下，加深记忆。
         */
</script>
</head>
<body>
    <div>请按方向键或WASD，你控制的方向是：
    <span style="color: blue"></span>
</div>
</body>
</html>

t247
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //this对象
        $(function () {
           $("div").click(function () {
               $(this).css("color","blue");
               //$(this) 等价于 $("div")
           });

           $("p").click(function () {
               $(this).css("color","red");
               //$(this) 等价于 $("p")
           });
        });
</script>
</head>
<body>
    <div>单击我改变样式，this始终指向触发当前事件的元素</div>
    <p>单击我改变样式，this始终指向触发当前事件的元素</p>
</body>
</html>

t248
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //this对象
        $(function () {
            var strHtml = "";
           $("li").each(function (index) {
              //var text1 = $("li").text(); 这样写得不到想要的效果
               var text1 = $(this).text();
              strHtml += text1 + " , ";
           });

           $("#div1").html(strHtml);
        });
        /*
        把$("li").text()改为$(this).text()效果就正确了。
        那么为什么用$("li")就不正确，而必须要使用$(this)呢？
        原因在于$("li")获取的是一个集合，而不是某一个元素。
        在事件函数中，如果想要使用当前元素，我们应尽量使用
        $(this)来代替$(selector)这种写法，避免bug。
         */
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <div id="div1"></div>
</body>
</html>

t249
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        习题，
        1.在jQuery 1.x版本中，如果想要为元素绑定一个事件，应该使用（）
        a.on()
        b.delegate()
        c.bind()
        d.addEventListener()

        2.在jQuery中，如果我们想要获取在键盘上按下的是哪个键，可以使用（）
        a.event.which
        b.event.type
        c.event.target
        d.event.keyCode

        3.下面关于jQuery事件操作的说明中，正确的是（）
        a.一般情况下，jQuery中的this指向的是触发当前事件的元素
        b.on（）方法只能为元素绑定一个事件，不能绑定多个事件
        c.on（）方法不能为动态创建的元素绑定事件
        d.自定义事件使用的是one（）方法

        答案：
        1A 2D 3A

         */
</script>
</head>
<body>

</body>
</html>
qq_18932003
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery事件

t205<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.5.1.js"></script> <script> $(function () { //内容..
复制链接

扫一扫