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，一经查实，立即删除！

相关文章

kotlin retrofit

kotlin retrofit

参考博客 【Android】【Kotlin】使用【Retrofit】基本使用 如何在kotlin中正确使用retrofit 将kotlin协程用于网络请求—完整实例&#xff0c;看这一篇就够了 Kotlin协程Retorfit网络请求框架封装
阅读更多...
前端的页面结构

前端的页面结构

前端页面的结构通常由HTML、CSS和JavaScript组成。以下是前端页面的典型结构&#xff1a; HTML&#xff08;超文本标记语言&#xff09;&#xff1a; HTML是用于定义网页结构的标记语言。它通过使用各种标签和元素来描述页面的内容、布局和组织结构。HTML提供了标题、段落、链接…
阅读更多...
《QT从基础到进阶·三十一》事件循环QCoreApplication，QGuiApplication，QApplication

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

QCoreApplication&#xff1a;为非界面类项目提供一个事件监听循环。 QGuiApplication&#xff1a;以QtGui模块基础开发的界面项目需要应用环境。 QApplication&#xff1a;以QWidget模块基础开发的界面项目需要应用环境。 可以简单总结为&#xff0c;如果是非界面项目开发&am…
阅读更多...
C语言测试题：用冒泡法对输入的10个字符由小到大排序 ，要求数组做为函数参数。

C语言测试题：用冒泡法对输入的10个字符由小到大排序 ，要求数组做为函数参数。

编写一个函数&#xff1a; 用冒泡法对输入的10个字符由小到大排序 &#xff0c;要求数组做为函数参数。 冒泡排序是一种简单的排序算法&#xff0c;它会多次遍历要排序的数列&#xff0c; 每次遍历时&#xff0c;依次比较相邻的两个元素&#xff0c;如果它们的顺序不符合要求…
阅读更多...
IoC和DI

IoC和DI

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

golang学习笔记——查找质数

查找质数 编写一个程序来查找小于 20 的所有质数。 质数是大于 1 的任意数字&#xff0c;只能被它自己和 1 整除。 “整除”表示经过除法运算后没有余数。 与大多数编程语言一样&#xff0c;Go 还提供了一种方法来检查除法运算是否产生余数。 我们可以使用模数 %&#xff08;百…
阅读更多...
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…
阅读更多...
ios swift sqlite3 简单使用

ios swift sqlite3 简单使用

一.创建Person类 import UIKitclass Person: NSObject {var name:String? nilvar sex:String? nilvar age:String? niloverride func setValue(_ value: Any?, forUndefinedKey key: String) {}} 二.在使用的地方导入sqlite.3头文件&#xff0c;例如方法都在viewcontr…
阅读更多...
【二分法】

【二分法】

二分法可以在有序排列中&#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 …
阅读更多...
adb shell settings高级指令设置系统属性所有的指令汇总+注释

adb shell settings高级指令设置系统属性所有的指令汇总+注释

adb shell settings高级指令设置系统属性所有的指令汇总 目录 系统设置&#xff08;system&#xff09; 安全设置&#xff08;secure&#xff09; 全局设置&#xff08;global&#xff09; 删除设置 帮助 示例应用 屏幕超时时间 自动旋转屏幕 通知光 触觉反馈 动…
阅读更多...
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;谷歌就拒绝再向…
阅读更多...
C++实现有理数类 四则运算和输入输出

C++实现有理数类 四则运算和输入输出

面试 C 程序员&#xff0c;什么样的问题是好问题&#xff1f; - 知乎 https://www.cnblogs.com/bwjblogs/p/12982908.html
阅读更多...
网络安全（大厂面试真题集）

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

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

Copyright @ 2022~2023