• jQuery【事件处理器、鼠标事件、表单事件、键盘事件、浏览器事件、事件对象、jQuery遍历】(三)-全面详解（学习总结---从入门到深化）

    目录

    事件之绑定事件处理器

    事件之鼠标事件

    事件之表单事件

    事件之键盘事件

    事件之浏览器事件

    事件对象

    jQuery遍历

    事件之绑定事件处理器

    1、 .on()
    在选定的元素上绑定一个或多个事件处理函数

    1. $("#button").on("click", function(event){
    2.     console.log("事件处理器")
    3. });


    事件委托
     

    1. $("#ul").on("click", "li", function(event){
    2.   console.log($(this).text());
    3. });

    2、.one()
    为元素的事件添加处理函数。处理函数在每个元素上每种事件类型
    最多执行一次
     

    1. $("#btn").one("click", function() {
    2.   console.log("这是一个只能触发一次的事件.");
    3. });

    3、.off()
    移除一个事件处理函数，移除on事件处理器
     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">
    9. script>
    10. head>
    11. <body>
    12.     <button id="btn1">添加事件按钮button>
    13.     <button id="btn2">删除事件按钮button>
    14.     <button id="btn3">按钮button>
    15.     <script>
    16.         function aClick() {
    17.             console.log("点击事件")
    18.        }
    19.         $("#btn1").on("click",function () {
    20.             $("#btn3").on("click", aClick);
    21.        });
    22.         $("#btn2").on("click",function () {
    23.             $("#btn3").off("click", aClick);
    24.        });
    25.     script>
    26. body>
    27. html>
    28.

    事件之鼠标事件

    1、 .click()
    为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的 "click" 事件

    1. $("#btn").click(function() {
    2.   alert("点击事件");
    3. });

    2、.hover()
    将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行
     

    1. $("li").hover(
    2.   // 滑入
    3.   function () {
    4.     console.log("滑入")
    5.  },
    6.   // 滑出
    7.   function () {
    8.     console.log("滑出")
    9.  }
    10. );

     3、.mouseenter()
    鼠标进入事件

    1. $("div").mouseenter(function(){
    2.     console.log("鼠标进入事件");
    3. })

    4、.mouseleave()
    鼠标离开事件

    1. $("div").mouseleave(function(){
    2.     console.log("鼠标进入事件");
    3. })

    5、.mousemove()
    鼠标滑动事件
     

    1. $("div").mousemove(function(){
    2.     console.log("鼠标进入事件");
    3. })

    6、.mouseover()
    鼠标进入事件（注：支持事件冒泡）
     

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9.     <style>
    10.         .container{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: red;
    14.        }
    15.         .box{
    16.             width: 100px;
    17.             height: 100px;
    18.             background-color: green;
    19.        }
    20.     style>
    21. head>
    22. <body>
    23.     <div class="container">
    24.         <div class="box">div>
    25.     div>
    26.     <script>
    27.         $(".container").mouseover(function(){
    28.             console.log("鼠标进入事件container");
    29.        })
    30.  
    31.         $(".box").mouseover(function(){
    32.             console.log("鼠标进入事件box");
    33.        })
    34.     script>
    35. body>
    36. html>

    7、.mouseout()
    鼠标离开事件（注：支持事件冒泡）
     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9.     <style>
    10.         .container{
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: red;
    14.        }
    15.         .box{
    16.             width: 100px;
    17.            height: 100px;
    18.             background-color: green;
    19.        }
    20.     style>
    21. head>
    22. <body>
    23.     <div class="container">
    24.         <div class="box">div>
    25.     div>
    26.     <script>
    27.         $(".container").mouseout(function(){
    28.             console.log("鼠标离开事件container");
    29.        })
    30.         $(".box").mouseout(function(){
    31.             console.log("鼠标离开事件box");
    32.        })
    33.     script>
    34. body>
    35. html>

    事件之表单事件

     1、.focus()
    为 JavaScript 的 "focus" 事件绑定一个获取焦点处理函数，或者触发元素上的 "focus" 事件

    1. $('#input').focus(function() {
    2.   alert('获得焦点事件');
    3. });

    2、.blur()
    为 "blur" 事件绑定一个失去焦点处理函数
     

    1. $('#other').click(function() {
    2.   $('#target').blur();
    3. });

    3、.change()
    为JavaScript 的 "change" 事件绑定一个表单改变处理函数
     

    1. $('.target').change(function() {
    2.   alert('内容改变');
    3. });

    4、.submit()
    当用户提交表单时，就会在这个表单元素上触发submit事件。它只能绑定在

    元素上
     

    1. $('#target').submit(function() {
    2.   alert('表单提交事件');
    3. });

    事件之键盘事件

    1、 .keydown()
    添加键盘按下事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">
    9. script>
    10. head>
    11. <body>
    12.     <input type="text" class="username">
    13.     <script>
    14.         $(".username").keydown(function(){
    15.             console.log("键盘");
    16.        })
    17.     script>
    18. body>
    19. html>

    2、.keypress()
    添加键盘事件
     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9. head>
    10. <body>
    11.     <input type="text" class="username">
    12.     <script>
    13.         $(".username").keypress(function(){
    14.             console.log("键盘");
    15.        })
    16.     script>
    17. body>
    18. html>

    3、.keyup()
    添加键盘抬起事件
     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">
    9. script>
    10. head>
    11. <body>
    12.     <input type="text" class="username">
    13.     <script>
    14.         $(".username").keyup(function(){
    15.             console.log("键盘");
    16.        })
    17.     script>
    18. body>
    19. html>

    事件之浏览器事件

     1、.resize()
    添加浏览器窗口发生变化触发事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9. head>
    10. <body>
    11.     <script>
    12.         $(window).resize(function(){
    13.             console.log("改变浏览器尺寸");
    14.        })
    15.     script>
    16. body>
    17. html>

    2、.scroll()
    浏览器滚动事件
     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9. head>
    10. <body>
    11.     <script>
    12.         $(window).scroll(function(){
    13.             console.log("滚动");
    14.        })
    15.     script>
    16. body>
    17. html>

    事件对象

    1、event.type
    获取事件类型
     

    1. $("#btn").click("click",function(e){
    2.     console.log(e.type);
    3. })

    2、event.target
    获取当前元素对象
     

    1. $("#btn").click("click",function(e){
    2.     console.log(e.target);
    3. })

    3、event.currentTarget
    获取当前元素对象
     

    温馨提示
    target：指向触发事件元素
    currentTarget：指向添加事件的元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 100px;
    12.             height: 100px;
    13.             background-color: red;
    14.        }
    15.     style>
    16. head>
    17. <body>
    18.     <div id="container">
    19.         <button id="btn">按钮button>
    20.     div>
    21.     <script>
    22.       $("#container").click("click",function(e){
    23.           console.log("container",e.currentTarget);
    24.           console.log("container",e.target);
    25.        })
    26.         $("#btn").click("click",function(e){
    27.             console.log("btn",e.currentTarget);
    28.             console.log("btn",e.target);
    29.        })
    30.     script>
    31. body>
    32. html>

    4、event.preventDefault()
    如果调用这个方法，默认事件行为将不再触发。
     

    1. <a href="https://itxiaotong.com">itxiaotonga>
    2. <script>
    3.     $("a").click("click",function(e){
    4.         e.preventDefault();
    5.    })
    6. script>

    5、event.stopPropagation()
    防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9.     <style>
    10.         div{
    11.             width: 100px;
    12.             height: 100px;
    13.             background-color: red;
    14.        }
    15.     style>
    16. head>
    17. <body>
    18.     <div>
    19.         <button>按钮button>
    20.     div>
    21.     <script>
    22.         $("div").click("click",function(e){
    23.             console.log("div");
    24.        })
    25.        $("button").click("click",function(e){
    26.             e.stopPropagation();
    27.             console.log("button");
    28.        })
    29.     script>
    30. body>
    31. html>

    jQuery遍历

    1、 .map()
    通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">
    9. script>
    10. head>
    11. <body>
    12.     <ul>
    13.         <li>列表1li>
    14.         <li>列表2li>
    15.         <li>列表3li>
    16.         <li>列表4li>
    17.     ul>
    18.  
    19.     <script>
    20.         $("li").map(function(index,ele){
    21.             console.log(index,ele);
    22.        })
    23.     script>
    24. body>
    25. html>

    2、.each()
    遍历一个jQuery对象，为每个匹配元素执行一个函数
     

    1. $("li").each(function(index,ele){
    2.     console.log(index,ele);
    3. })

    温馨提示
    each和map的返回值不同，map返回一个新的数组，each返回原始数组

    3、 .get()
    通过jQuery对象获取一个对应的DOM元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="./js/jquery-3.6.0.min.js">script>
    9. head>
    10. <body>
    11.     <ul>
    12.         <li>列表1li>
    13.         <li>列表2li>
    14.         <li>列表3li>
    15.         <li>列表4li>
    16.     ul>
    17.     <script>
    18.         var li = $("li").get(0);
    19.         li.innerHTML = "新的列表"
    20.     script>
    21. body>
    22. html>

  • 相关阅读:
    从原理聊 JVM（五）：JVM 的编译过程和优化手段
    【Spring】使用xml配置AOP
    Unity 截取3D图像 与 画中画PIP的实现
    【Spring】@RequestBody的实现原理
    工程化：Plugin 介绍
    js的this及this的指向是什么
    数据结构（13）最小生成树JAVA版：prim算法、kruskal算法
    优秀的 Verilog/FPGA开源项目介绍（三十一）- OFDM
    STM32HAL库-IWDG篇
    香港云服务器apache无法启动怎么办?
  • 原文地址：https://blog.csdn.net/m0_58719994/article/details/134398520