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

目录

事件之绑定事件处理器

事件之鼠标事件

事件之表单事件

事件之键盘事件

事件之浏览器事件

事件对象

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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Android---网络编程优化

Android---网络编程优化

网络请求操作是一个 App 的重要组成部分&#xff0c;程序大多数问题都是和网络请求有关。使用 OkHttp 框架后&#xff0c;可以通过 EventListener 来查看一次网络请求的详细情况。一次完整的网络请求会包含以下几个步骤。 也就是说&#xff0c;一次网络请求的操作是从 DNS 解析…
阅读更多...
第四代智能井盖传感器：万宾科技智能井盖位移监测方式一览

第四代智能井盖传感器：万宾科技智能井盖位移监测方式一览

现在城市化水平不断提高&#xff0c;每个城市的井盖遍布在城市的街道上&#xff0c;是否能够实现常态化和系统化的管理&#xff0c;反映了一个城市治理现代化水平。而且近些年来住建部曾多次要求全国各个城市加强相关的井盖管理工作&#xff0c;作为基础设施重要的一个组成部分…
阅读更多...
Python windows安装Python3环境

Python windows安装Python3环境

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …
阅读更多...
Vue3 自定义hook函数

Vue3 自定义hook函数

这个hook函数并不是Vue3 自带的&#xff0c;而是为了方便我们书写和复用代码。 当我们在setup函数中写了很多内容过后&#xff0c;就会变得很乱&#xff0c;所以我们将实现相同功能的数据、方法和生命周期等等打包单独放在一个文件中&#xff0c;就会整洁很多。 例如&#xf…
阅读更多...
Linux友人帐之网络编程基础邮件服务器与DHCP服务器

Linux友人帐之网络编程基础邮件服务器与DHCP服务器

一、邮件服务器概述 1.1邮件服务基础 邮件服务器是一种计算机程序&#xff0c;它通过电子邮件协议接收、存储、处理和发送电子邮件。邮件服务器可以与电子邮件客户端程序&#xff08;如Outlook、Thunderbird等&#xff09;或Web邮件界面&#xff08;如Gmail、Outlook.com等&am…
阅读更多...
操作系统OS/存储管理/内存管理/内存管理的主要功能_基本原理_要求

操作系统OS/存储管理/内存管理/内存管理的主要功能_基本原理_要求

基本概念 内存管理的主要功能/基本原理/要求 **内存管理的主要功能&#xff1a; ** 内存空间的分配与回收。由操作系统完成主存储器空间的分配和管理&#xff0c;使程序员摆脱存储分配的麻烦&#xff0c;提高编程效率。地址转换。在多道程序环境下&#xff0c;程序中的逻辑地…
阅读更多...
数字档案室建设评价

数字档案室建设评价

数字档案室建设评价应考虑以下几个方面&#xff1a; 1. 安全性&#xff1a;数字档案室的主要目的是确保档案资料的安全性。评价应考虑数字档案室的物理安全性、防火措施、保密措施、网络安全等方面。 2. 可访问性&#xff1a;数字档案室应该易于访问和使用。评价应考虑数字档案…
阅读更多...
OCC教学：预备基础

OCC教学：预备基础

预备基础&#xff1a;1.概览 什么是Open CASCADE Technology&#xff1f; Open CASCADE Technology (OCCT) 是一个功能强大的开源 C 库&#xff0c;由数千个类组 成&#xff0c;并提供以下领域的解决方案&#xff1a; 表面和实体建模&#xff1a;对任何对象进行建模。3D 和 …
阅读更多...
制造业数据标准化的优势分析

制造业数据标准化的优势分析

之前我们介绍过>>数据驱动工作效率提升的5个层次——以PreMaint设备数字化平台为例&#xff0c;这次我们将深入分析数据标准化在制造业中的优势。 从持续的供应链中断和疯狂的通货膨胀&#xff0c;到日益昂贵和难以采购的原材料&#xff0c;制造企业正面对越来越多的挑战…
阅读更多...
APM/PX4/betaflight/inav开源飞控之IMU方向

APM/PX4/betaflight/inav开源飞控之IMU方向

APM/PX4/betaflight/inav开源飞控之IMU方向 1. 源由2. 坐标系2.1 APM/PX4&#xff1a;机体坐标 右手系规则2.2 betaflight/inav&#xff1a;xEast-yNorth-zUp yaw反向 右手系规则 3. 转向定义3.1 APM/PX43.2 betaflight/inav 4. 实例4.1 I C M 42688 P ICM42688P ICM42688P…
阅读更多...
把jar包打到本地仓库然后上传到私服

把jar包打到本地仓库然后上传到私服

1.首先把需要打成maven的包放到本地 2.然后本地配置maven的环境变量 没有配置的话可以看看下面这个&#xff0c;教程很详细 Windows系统配置maven环境_windows配置maven环境变量-CSDN博客 3.WinR cmd 输入如下的指令&#xff1a; mvn install:install-file -Dfile.\device…
阅读更多...
unity shaderGraph实例-扫描效果

unity shaderGraph实例-扫描效果

文章目录 效果展示整体结构各区域内容区域1区域2区域3区域4区域5区域6GraphSetttings注意事项使用方法 效果展示 整体结构 各区域内容 区域1 用场景深度减去顶点的View空间的视野深度&#xff08;Z值&#xff09;&#xff0c;这里Z值需要乘-1是因为从相机看到的物体顶点的视野…
阅读更多...
Kontakt Factory Library 2(Kontakt原厂音色库2)

Kontakt Factory Library 2(Kontakt原厂音色库2)

Kontakt Factory Library 2是一款由Native Instruments开发的音乐采样库。它是Kontakt采样器软件的官方库之一&#xff0c;提供了丰富的音色和音乐资源&#xff0c;可用于制作各种类型的音乐。 Kontakt Factory Library 2包含了数千个高质量的乐器采样&#xff0c;涵盖了各种乐…
阅读更多...
不会英语能学编程吗？0基础学编程什么软件好？

不会英语能学编程吗？0基础学编程什么软件好？

不会英语能学编程吗&#xff1f;0基础学编程什么软件好&#xff1f; 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型的软件&#xff0c;象如图这个…
阅读更多...
【数据分享】1961—2022年全国范围的逐日降水栅格数据

【数据分享】1961—2022年全国范围的逐日降水栅格数据

降水数据是我们在各项研究中最常用的气象指标之一&#xff01;之前我们给大家分享过来源于国家青藏高原科学数据中心发布的1901-2022年1km分辨率逐月降水栅格数据以及1901-2022年1km分辨率逐年降水栅格数据&#xff08;均可戳我跳转&#xff09;&#xff01;很多小伙伴拿到数据…
阅读更多...
OpenCV基础应用（4）— 如何改变图像的透明度

OpenCV基础应用（4）— 如何改变图像的透明度

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。本节课就手把手教你如何改变图像的透明度&#xff0c;希望大家学习之后能够有所收获~&#xff01;&#x1f308; 目录 &#x1f680;1.技术介绍 &#x1f680;2.实现代码 &#x1f680;1.技术介绍 改变图像透明度的实…
阅读更多...
Linux C 线程间同步机制

Linux C 线程间同步机制

线程间同步机制 概述保护机制互斥锁创建互斥锁  pthread_mutex_init加锁  pthread_mutex_lock解锁  pthread_mutex_unlock删除锁  pthread_mutex_destroy 条件变量创建条件变量  pthread_cond_init激活条件变量  pthread_cond_signal等待条件变量  pthread_cond_…
阅读更多...
媒体行业的3D建模：在影视中创造特效纹理

媒体行业的3D建模：在影视中创造特效纹理

在线工具推荐&#xff1a; 三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 - 3D模型预览图生成服务 在本文中&#xff0c;我们将探讨 3D 建模在媒体行业中的作用&#xff0c;特别是它在影视特效创作…
阅读更多...
某60工业互联网安全测试技术学习记录

某60工业互联网安全测试技术学习记录

系列文章目录 文章目录 系列文章目录前言工业互联网安全测试技术安全工具分类常用安全工具介绍 主机安全测试5.1 主机安全测试概览5.2 通用主机安全测试技术主机信息扫描 5.3 Linux主机安全测试5.4 Android 安全测试5.5 Windows主机安全测试5.6 UNIX 主机安全测试 工业渗透测试…
阅读更多...
COS对象存储

COS对象存储

一. 什么是对象存储 腾讯云叫COS&#xff0c;在阿里云叫OSS&#xff0c;是一样的对象存储&#xff08;Cloud Object Storage&#xff0c;COS&#xff09;是腾讯云提供的一种存储海量文件的分布式存储服务&#xff0c;具有高扩展性、低成本、可靠安全等优点。通过控制台、API、…
阅读更多...
最新文章

Copyright @ 2022~2023