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

news2024/11/26 16:34:20

目录

事件之绑定事件处理器

事件之鼠标事件

事件之表单事件

事件之键盘事件

事件之浏览器事件

事件对象

jQuery遍历

事件之绑定事件处理器

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

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


事件委托
 

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <button id="btn1">添加事件按钮</button>
    <button id="btn2">删除事件按钮</button>
    <button id="btn3">按钮</button>
    <script>
        function aClick() {
            console.log("点击事件")
       }
        $("#btn1").on("click",function () {
            $("#btn3").on("click", aClick);
       });
        $("#btn2").on("click",function () {
            $("#btn3").off("click", aClick);
       });
    </script>
</body>
</html>

事件之鼠标事件

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

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

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

$("li").hover(
  // 滑入
  function () {
    console.log("滑入")
 },
  // 滑出
  function () {
    console.log("滑出")
 }
);

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: red;
       }
        .box{
            width: 100px;
            height: 100px;
            background-color: green;
       }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
    <script>
        $(".container").mouseover(function(){
            console.log("鼠标进入事件container");
       })

        $(".box").mouseover(function(){
            console.log("鼠标进入事件box");
       })
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: red;
       }
        .box{
            width: 100px;
           height: 100px;
            background-color: green;
       }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
    <script>
        $(".container").mouseout(function(){
            console.log("鼠标离开事件container");
       })
        $(".box").mouseout(function(){
            console.log("鼠标离开事件box");
       })
    </script>
</body>
</html>

事件之表单事件

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

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

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

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

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

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

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

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

事件之键盘事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input type="text" class="username">
    <script>
        $(".username").keydown(function(){
            console.log("键盘");
       })
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" class="username">
    <script>
        $(".username").keypress(function(){
            console.log("键盘");
       })
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input type="text" class="username">
    <script>
        $(".username").keyup(function(){
            console.log("键盘");
       })
    </script>
</body>
</html>

事件之浏览器事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        $(window).resize(function(){
            console.log("改变浏览器尺寸");
       })
    </script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        $(window).scroll(function(){
            console.log("滚动");
       })
    </script>
</body>
</html>

事件对象

1、event.type
获取事件类型
 

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
       }
    </style>
</head>
<body>
    <div id="container">
        <button id="btn">按钮</button>
    </div>
    <script>
      $("#container").click("click",function(e){
          console.log("container",e.currentTarget);
          console.log("container",e.target);
       })
        $("#btn").click("click",function(e){
            console.log("btn",e.currentTarget);
            console.log("btn",e.target);
       })
    </script>
</body>
</html>

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

<a href="https://itxiaotong.com">itxiaotong</a>
<script>
    $("a").click("click",function(e){
        e.preventDefault();
   })
</script>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
       }
    </style>
</head>
<body>
    <div>
        <button>按钮</button>
    </div>
    <script>
        $("div").click("click",function(e){
            console.log("div");
       })
       $("button").click("click",function(e){
            e.stopPropagation();
            console.log("button");
       })
    </script>
</body>
</html>

jQuery遍历

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>

    <script>
        $("li").map(function(index,ele){
            console.log(index,ele);
       })
    </script>
</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>
    <script>
        var li = $("li").get(0);
        li.innerHTML = "新的列表"
    </script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1216941.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

笔记53：torch.nn.rnn() 函数详解

笔记53：torch.nn.rnn() 函数详解

参数解释&#xff1a; &#xff08;1&#xff09;input_size()&#xff1a;即输入信息 Xt 的每个序列的独热编码向量的长度&#xff0c;即 len(vocab) &#xff08;2&#xff09;hidden_size()&#xff1a;即隐变量 h 的维度&#xff08;维度是多少&#xff0c;就代表用几个数…
阅读更多...
【JUC】九、线程池ThreadPool

【JUC】九、线程池ThreadPool

文章目录 1、线程池2、分类3、线程池的使用4、工作流程5、拒绝策略6、线程池的七个参数7、自定义线程池8、什么时候考虑使用线程池&#xff1f; 1、线程池 线程池和数据库连接池的理念很相似&#xff0c;对于数据库连接池&#xff1a;普通的连接数据库是建立一个JDBC连接&…
阅读更多...
本地开发环境和服务器传输数据的几种方法

本地开发环境和服务器传输数据的几种方法

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…
阅读更多...
注册表单mvc

注册表单mvc

jsp给我们的ControllerServlet 1在哪看到我们的数据呢 2什么时候用了session,有什么用 register.jsp 获取表单的name,email formBean.name是怎么定义的 3为什么就可以formbean访问 要使用的jsp对象都在servlet里面用setAttribute定义的 request.getSession().setAttribute…
阅读更多...
听GPT 讲Rust源代码--library/core/src(8)

听GPT 讲Rust源代码--library/core/src(8)

题图来自 Hello, crustaceans. File: rust/library/core/src/future/ready.rs 在Rust源代码中&#xff0c;rust/library/core/src/future/ready.rs文件的作用是定义了一个名为Ready的Future类型。Ready是一个简单的Future实现&#xff0c;它立即返回一个给定的值。 Ready 是一个…
阅读更多...
大数据Doris（二十四）：数据导入（Stream Load）介绍

大数据Doris（二十四）：数据导入（Stream Load）介绍

文章目录 数据导入（Stream Load）介绍 一、适用场景 二、基本原理
阅读更多...
quartz笔记

quartz笔记

Quartz-CSDN博客 上面是Quartz的一些基本知识,如果对quartz的基本API不是很了解的话,建议先看下上面的 和Linux Crontab对比 1.执行粒度: Linux Crontab是进程级 quart是线程级 2.跨平台性: Crontab只能在Linxu运行 quart是java实现,可以跨平台 3.调度集上 Crontab的…
阅读更多...
网络的概念与定义

网络的概念与定义

一.网络的概念与定义 1.1 网络的概念 具有独立功能的计算机通过通信介质连接起来就形成了网络。为了满足人们的各种需求&#xff0c;比如访问网页&#xff0c;在线游戏&#xff0c;在线视频等&#xff0c;会形成比如文本&#xff0c;图片&#xff0c;视频等都是信息的不同呈现方…
阅读更多...
【AI视野·今日NLP 自然语言处理论文速览 第六十四期】Fri, 27 Oct 2023

【AI视野·今日NLP 自然语言处理论文速览 第六十四期】Fri, 27 Oct 2023

AI视野今日CS.NLP 自然语言处理论文速览 Fri, 27 Oct 2023 Totally 80 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers torchdistill Meets Hugging Face Libraries for Reproducible, Coding-Free Deep Learning Studies: A Case …
阅读更多...
11.16 知识总结（模型层更多内容）

11.16 知识总结（模型层更多内容）

一、 多表查询&#xff08;跨表查询&#xff09; <br class"Apple-interchange-newline"><div></div> 子查询&#xff1a;分步查询 链表查询&#xff1a;把多个有关系的表拼接成一个大表(虚拟表) inner join left join right join 1.1 基于双下划…
阅读更多...
【EI会议征稿】第三届网络安全、人工智能与数字经济国际学术会议（CSAIDE 2024）

【EI会议征稿】第三届网络安全、人工智能与数字经济国际学术会议（CSAIDE 2024）

第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&#xff09; 2024 3rd International Conference on Cyber Security, Artificial Intelligence and Digital Economy 第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&#…
阅读更多...
鸿蒙4.0真机调试踩坑

鸿蒙4.0真机调试踩坑

传言鸿蒙next版本将不再兼容Android&#xff0c;所以领导安排做下鸿蒙开发的调研工作。 鸿蒙开发指南其实已经非常的友好了。但是鸿蒙开发本身还是有些坑要踩&#xff0c;这篇文章主要讲了鸿蒙真机调试问题。 目前手上的真机为华为 nova6&#xff0c;处理器为麒麟990.鸿蒙系统…
阅读更多...
Python从 0 到 1 系统学习的全面详细内容

Python从 0 到 1 系统学习的全面详细内容

这里为大家梳理了一些Python从 0 到 1 系统学习的全面详细内容&#xff0c;想要系统的自学Python&#xff0c;希望我们可以提供一个框架&#xff0c;方便作为参考&#xff0c;学习Python。 1、为什么要学习Python&#xff1f; Python是一种功能强大的编程语言&#xff0c;它具…
阅读更多...
WebGoat环境搭建

WebGoat环境搭建

首先安装jdk&#xff0c;此步骤省略…验证 直接打开cmd&#xff0c;输入以下命令&#xff1a; java -version &#xff08;可以查看安装的JDK版本。&#xff09; javac &#xff08;查看java文件编译成的class文件&#xff09; WebGoat下载 WebGoat的下载地址&#xff1a;Relea…
阅读更多...
x3daudio1_7.dll错误：解决方法和丢失原因及作用

x3daudio1_7.dll错误：解决方法和丢失原因及作用

x3daudio1_7.dll是Windows操作系统中的一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;主要作用是为DirectX音频提供支持。DirectX是微软推出的一套多媒体应用程序开发接口&#xff0c;广泛应用于游戏、多媒体制作等领域。x3daudio1_7.dll文件包含了许多与三维音频…
阅读更多...
atoi函数的模拟实现

atoi函数的模拟实现

函数原型&#xff1a;int atoi (const char * str); 作用&#xff1a;将字符串转换为整数 注意事项&#xff1a; 1、会忽略字符串前的空白字符&#xff0c;并从第一个非空白字符开始解析整数&#xff0c;直到遇到非数字字符为止 具体代码如下&#xff1a; #include <s…
阅读更多...
异行星平台--CRM系统搭建

异行星平台--CRM系统搭建

使用异行行低代码平台搭建的CRM系统。CRM系统中&#xff0c;包括“客户”、“商机”、“合同”、“回款”、“开票”、“营销”、“回访”、“产品”、“联络人”、“销售订单”、“线索”。 “管理后台”可能是指一个用于管理后台系统的应用&#xff0c;可能包括对各种功能和数…
阅读更多...
Logback 日志格式参数说明

Logback 日志格式参数说明

打印日志格式&#xff1a; <property name"LOG_PATTERN" value"[${APP_NAME} ${SERVER_IP}:${SERVER_PORT}] %d{yyyy-MM-dd HH:mm:ss.SSS} %level ${PID} [%X{traceId}-%X{spanId}] [%thread] %logger %m%n${LOG_EXCEPTION_CONVERSION_WORD:-%wEx}"/&g…
阅读更多...
HMM与LTP词性标注之LTP介绍

HMM与LTP词性标注之LTP介绍

文章目录 LTP 上图缺点&#xff1a;参数太多&#xff0c;中文语料库匮乏 注意力机制&#xff0c;相当于给每一个词赋予一个权重&#xff0c;权重越大的越重要。 bert的缺点&#xff1a;神经元太多&#xff0c;较慢。 LTP 如果只是需要做词性的识别&#xff0c;那么用LTP就可…
阅读更多...
与7无关的数

与7无关的数

系列文章目录 进阶的卡莎C++_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023