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>

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

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

相关文章

《QT从基础到进阶·三十一》事件循环QCoreApplication，QGuiApplication，QApplication

《QT从基础到进阶·三十一》事件循环QCoreApplication，QGuiApplication，QApplication

QCoreApplication&#xff1a;为非界面类项目提供一个事件监听循环。 QGuiApplication&#xff1a;以QtGui模块基础开发的界面项目需要应用环境。 QApplication&#xff1a;以QWidget模块基础开发的界面项目需要应用环境。 可以简单总结为&#xff0c;如果是非界面项目开发&am…
阅读更多...
IoC和DI

IoC和DI

Spring 是包含众多工具的 IoC 容器,存的是对象,对象这个词在 Spring 的范围内,称之为 bean IoC 是控制反转 控制权进行了反转,比如对某一个东西的控制权在 A 手上,结果变成了 B ,Spring 管理的是 bean ,所以这里的控制权指的是 bean 的控制权,也就是对象的控制权进行了反转 …
阅读更多...
Linux动静态库

Linux动静态库

文章目录 1. 静态库2. 动态库3. 动态库的加载 本章代码gitee仓库&#xff1a;动静态库 1. 静态库 Linux开发工具gcc/g篇&#xff0c;此篇文章讲过动静态库的基本概念&#xff0c;不了解的可以先看一下这篇文章。 现在我们先来制作一个简单的静态库 mymath.h #pragma once#i…
阅读更多...
VSCode 好用的插件分享

VSCode 好用的插件分享

文章目录 Introlistcode runner 【在文本编辑器中编辑好各类语言的源代码&#xff0c;然后一键运行】gitlens - 【git提交信息即时查看&#xff0c;类似IDEA中的 show annotation】还有更多&#xff0c;会日常补充。 Intro 大四毕业前&#xff0c;我只有一台dell latitude 455…
阅读更多...
Web前端—小兔鲜儿电商网站底部设计及网站中间过渡部分设计

Web前端—小兔鲜儿电商网站底部设计及网站中间过渡部分设计

版本说明 当前版本号[20231116]。 版本修改说明20231116初版 目录 文章目录 版本说明目录底部&#xff08;footer&#xff09;服务帮助中心版权 banner侧边栏圆点 新鲜好物&#xff08;goods&#xff09;标题 底部&#xff08;footer&#xff09; 结构&#xff1a;通栏 >…
阅读更多...
Python框架篇(2):FastApi-参数接收和验证

Python框架篇(2):FastApi-参数接收和验证

提示: 如果想获取文章中具体的代码信息&#xff0c;可在微信搜索【猿码记】回复 【fastapi】即可。 1.参数接收 1.1 路径参数(不推荐) 1.代码清单 在app/router下&#xff0c;新增demo_router.py文件,内容如下: from fastapi import APIRouterrouter APIRouter( prefix&qu…
阅读更多...
【二分法】

【二分法】

二分法可以在有序排列中&#xff0c;通过不断对半切割数据&#xff0c;提高数据查找效率。 lst [1,4,6,7,45,66,345,767,788,999] n 66 left 0 right len(lst)-1 while left < right: #边界&#xff0c;当右边比左边还小的时候退出循环 mid (left right)//2 …
阅读更多...
2023年05月 Python（六级）真题解析#中国电子学会#全国青少年软件编程等级考试

2023年05月 Python（六级）真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试（1~6级）全部真题・点这里 一、单选题（共25题，每题2分，共50分） 第1题 明明每天坚持背英语单词，他建立了英语单词错题本文件“mistakes.txt”，将每天记错的单词增加到该文件中，下列打开文件的语句最合适的是？（ ） A: f = open(“mistakes.txt”) B: …
阅读更多...
2023.11.16 hivesql高阶函数之开窗函数

2023.11.16 hivesql高阶函数之开窗函数

目录 1.开窗函数的定义 2.数据准备 3.开窗函数之排序 需求:用三种排序方法查询学生的语文成绩排名,并降序显示 4.开窗函数分组 需求:按照科目来分类,使用三种排序方式来排序学生的成绩 5.聚合函数与分组配合使用 6.聚合函数同时和分组以及排序关键字配合使用 --需求1&…
阅读更多...
MySQL主主复制

MySQL主主复制

主1 192.168.66.15 主2 192.168.66.16 主1&#xff1a; roottest2 ~]# hostname master1 [roottest2 ~]# bash [rootmaster1 ~]# vim /etc/my.cnf server-id11 log-binmysql-bin auto_increment_increment2 auto_increment_offset1 replicate-do-dbdemo_db …
阅读更多...
缩放图片算法优化 sse

缩放图片算法优化 sse

前情提要 这里实现了打印文件的缩放算法 缩放打印文件&#xff08;prt,prn&#xff09; 核心功能如下&#xff1a; void CZoomPrtFile::zoomPrtFile(BYTE* pTargetData) {float xRatio static_cast<float>(m_perWidth - 1) / m_zoomWidth;float yRatio static_cast<…
阅读更多...
OpenHarmony应用开发入门教程(一、开篇)

OpenHarmony应用开发入门教程(一、开篇)

前言 华为正式宣布2024年发布的华为鸿蒙OS Next版将不再兼容安卓系统。这一重大改变&#xff0c;预示着华为鸿蒙OS即将进入一个全新的阶段。 都说科技无国界&#xff0c;这是骗人的鬼话。谷歌的安卓12.0系统早已发布&#xff0c;但是自从受到美影响&#xff0c;谷歌就拒绝再向…
阅读更多...
网络安全（大厂面试真题集）

网络安全（大厂面试真题集）

前言 随着国家政策的扶持&#xff0c;网络安全行业也越来越为大众所熟知&#xff0c;想要进入到网络安全行业的人也越来越多。 为了拿到心仪的 Offer 之外&#xff0c;除了学好网络安全知识以外&#xff0c;还要应对好企业的面试。 作为一个安全老鸟&#xff0c;工作这么多年…
阅读更多...
android studio导入eclipse项目

android studio导入eclipse项目

网上下载一个老工程&#xff0c;.project文件里有eclipse。 android studio导入eclipse项目 eclipse项目结构 Android studio文件结构 下面是导入步骤&#xff1a; 第一步&#xff0c;打开一个项目。 选择File->New->Import Project 第二步&#xff0c;选择Eclipse项目根…
阅读更多...
如何设计开发一对一交友App吸引更多活跃用户

如何设计开发一对一交友App吸引更多活跃用户

在当今社交媒体时代&#xff0c;一对一交友App开发正日渐成为发展热点。如何吸引更多活跃用户成为开发者们的首要任务。通过本文&#xff0c;我们将探讨一系列方法&#xff0c;助您设计开发一对一交友App&#xff0c;吸引更多用户的关注和参与&#xff0c;提升App的活跃度。 了…
阅读更多...
elementplus DateTimePicker 日期范围选择器 设置默认时间范围为当前月的起始时间到结束时间

elementplus DateTimePicker 日期范围选择器 设置默认时间范围为当前月的起始时间到结束时间

代码如下&#xff1a; <el-date-pickerv-model"value"type"datetimerange"start-placeholder"Start Date"end-placeholder"End Date":default-time"defaultTime" />const defaultTime: [Date, Date] [new Date(2000…
阅读更多...
小米手环8pro重新和手机配对解决办法

小米手环8pro重新和手机配对解决办法

如果更换了手机&#xff0c;那么小米手环8pro是无法和新手机自动连接的。 但是在新手机上直接连接又连接不上&#xff0c;搜索蓝牙根本找不到手环的蓝牙。 解决办法就是&#xff1a; 把手环恢复出厂&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 是的&…
阅读更多...
服务器数据恢复—服务器raid5离线磁盘上线同步失败的数据恢复案例

服务器数据恢复—服务器raid5离线磁盘上线同步失败的数据恢复案例

服务器数据恢复环境&故障&#xff1a; 某品牌DL380服务器中有一组由三块SAS硬盘组建的RAID5阵列。数据库存放在D分区&#xff0c;数据库备份存放在E分区。 服务器上有一块硬盘的状态灯显示红色&#xff0c;D分区无法识别&#xff0c;E分区可识别&#xff0c;但是拷贝文件报…
阅读更多...
Node.js详解

Node.js详解

一、是什么 Node.js 是一个开源与跨平台的 JavaScript 运行时环境 在浏览器外运行 V8 JavaScript 引擎&#xff08;Google Chrome 的内核&#xff09;&#xff0c;利用事件驱动、非阻塞和异步输入输出模型等技术提高性能 可以理解为 Node.js 就是一个服务器端的、非阻塞式I/…
阅读更多...
【XTDrone Ubuntu20.04】XTDrone+ Ubuntu20.04 + PX4安装

【XTDrone Ubuntu20.04】XTDrone+ Ubuntu20.04 + PX4安装

XTDrone仿真平台配置 文章目录 XTDrone仿真平台配置依赖安装 ROS一键安装Marvos安装PX4 安装安装QTGroundControlXTDrone下载安装 环境&#xff1a; VMWare 16.0 Ubuntu 22.04 &#xff08;因为没人配过&#xff09;Ubuntu 20.04 参考文章&#xff1a; 仿真平台基础配置 (yuq…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023