jQuery-事件

最新推荐文章于 2022-08-08 14:25:36 发布
最新推荐文章于 2022-08-08 14:25:36 发布
阅读量126 收藏
点赞数
文章标签： JQuery-事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuke666666/article/details/88916724
版权

一、on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。

$("p").on("click", function(){
alert( $(this).text() );
});

二、bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数。

当每个段落被点击的时候，弹出其文本。

jQuery 代码:
$("p").bind("click", function(){
  alert( $(this).text() );
});

三、trigger(type,[data])
在每一个匹配的元素上触发某类事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音乐导航</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.nav {
	            width: 900px;
	            height: 60px;
	            background: black;
	            margin: 0 auto;
        	}
        	
        	.nav li{
        		width: 100px;
        		height: 60px;
        		float: left;
        		position: relative;
        		overflow: hidden;
        	}
        	
        	.nav a{
        		position: absolute;
        		width: 100%;
        		height: 100%;
        		font-size: 24px;
        		color: seagreen;
        		text-decoration: none;
        		text-align: center;
        		line-height: 60px;
        		z-index: 2;
        	}
        	
        	.nav span {
                position: absolute;
                width: 100%;
                height: 100%;
                background: tan;
                top: 60px;
            }
		</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
//			$(function(){
//				$(".nav li").mouseenter(function(){
//					$(this).children("span").stop().animate({top:0});
//					var index=$(this).index();
//					$("audio").get(index).load();
//					$("audio").get(index).play();
//				});
//				$(".nav li").mouseleave(function(){
//					$(this).children("span").stop().animate({ top: 60 });
//				});
//			});
//			
//			var flag=true;
//			$(document).on("keydown",function(e){
//				if (flag) {
//					flag=false;
//					var code=e.keyCode;
//					if(code>=49 && code<=57){
//						$(".nav li").eq(code-49).trigger("mouseenter");
//					}
//				}
//			});
//			
//			$(document).on("keyup",function(e){
//					flag=true;
//					var code=e.keyCode;
//					if(code>=49 && code<=57){
//						$(".nav li").eq(code-49).trigger("mouseleave");
//					}
//			});
//			$(function(){
//				$(".nav li").mouseenter(function(){
//					$(this).children("span").stop().animate({top:0});
//					var index=$(this).index();
//					$("audio").get(index).load();
//					$("audio").get(index).play();
//				});
//				$(".nav li").mouseleave(function(){
//					$(this).children("span").stop().animate({top:60});
//				});
//				
//				var flag=true;
//				$(document).on("keydown",function(e){
//					if(flag){
//						flag=false;
//						var code=e.keyCode;
//						if(code>=49 && code<=57){
//							$(".nav li").eq(code-49).trigger("mouseenter");
//						}
//					}
//				});
//				$(document).on("keyup",function(e){
//					flag=true;
//					var code=e.keyCode;
//					if(code>=49 && code<=57){
//						$(".nav li").eq(code-49).trigger("mouseleave");
//					}
//				});
//			});
			$(function(){
				$(".nav li").mouseenter(function(){
					$(this).children("span").stop().animate({top:0});
					var index=$(this).index();
					$("audio").get(index).load();
					$("audio").get(index).play();
				});
				$(".nav li").mouseleave(function(){
					$(this).children("span").stop().animate({top:60});
				});
				
				var flag=true;
				$(document).on("keydown",function(e){
					if(flag){
						flag=false;
						var code=e.keyCode;
						if(code>=49 && code<=57){
							$(".nav li").eq(code-49).trigger("mouseenter");
						}
					}
				});
				$(document).on("keyup",function(e){
					flag=true;
					var code=e.keyCode;
					if(code>=49 && code<=57){
						$(".nav li").eq(code-49).trigger("mouseleave");
					}
				});
			});
		</script>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li><a href="#">1</a><span></span></li>
				<li><a href="#">2</a><span></span></li>
				<li><a href="#">3</a><span></span></li>
				<li><a href="#">4</a><span></span></li>
				<li><a href="#">5</a><span></span></li>
				<li><a href="#">6</a><span></span></li>
				<li><a href="#">7</a><span></span></li>
				<li><a href="#">8</a><span></span></li>
				<li><a href="#">9</a><span></span></li>
			</ul>
			<div>
				<audio src="mp3/1.ogg"></audio>
				<audio src="mp3/2.ogg"></audio>
				<audio src="mp3/3.ogg"></audio>
				<audio src="mp3/4.ogg"></audio>
				<audio src="mp3/5.ogg"></audio>
				<audio src="mp3/6.ogg"></audio>
				<audio src="mp3/7.ogg"></audio>
				<audio src="mp3/8.ogg"></audio>
				<audio src="mp3/9.ogg"></audio>
			</div>
		</div>
	</body>
</html>

四、delegate(selector,[type],[data],fn)
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

当点击鼠标时，隐藏或显示 p 元素：

HTML 代码:
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>jQuery 代码:
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

五、toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

六、scroll([[data],fn])
当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

$("div").scroll(function() {
  $("span").text(x+=1);
});
wuke666666
关注
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 8534
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
jquery-ui.css、jquery-ui.js下载
11-05
例如，要创建一个对话框，只需简单调用`.dialog()`方法，jQuery UI会自动处理剩下的布局、事件绑定和动画效果。 jQuery UI的组件丰富多样，例如： 1. **Dialogs** - 提供模态和非模态对话框，用于展示信息、警告或...
职场小白之隐藏或显示按钮
qq_38614818的博客
12-03 2865
隐藏或显示按钮总结 一、html隐藏与显示按钮 <!--第一种方法--> <div> <!--display: none 隐藏按钮--> <button type="button" style="display: none" >隐藏</button> <!--display: block 显示按钮--> <button type="button" style="display: block">
jQuery知识点总结
qq_45030966的博客
09-10 253
1.jQuery ​ 是一个快速小巧、功能丰富的第三方JavaScript库 ​ 功能： ​ 1.选取HTML元素 ​ 2.操作元素 ​ 3.CSS操作 ​ 4.操作HTML事件 ​ … ​ 使用：引入链接到需要的HTML文件中 ​ 1.直接引入网络资源 ​ 2.将网络资源下载到本地去引入 ​ 2.jQuery的使用 2.1$(选择器) 普遍选择器 选取所有元素 console.log($("*")); 标签名选择器 选取的为数组 console.log($("p"));
元素的显示与隐藏，案例：鼠标经过显示遮罩
m0_69034993的博客
07-09 958
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生声明。除了转换为块元素之外，同时还有显示元素的意思。visibility属性用于指定一个元素应可见还是隐藏。visibility隐藏元素后，继续占有原来的位置。display隐藏元素后，不再占有原来的位置。display属性用于设置一个元素如何显示。3.overflow 溢出显示隐藏。
点击显示隐藏的方法
m0_62285976的博客
08-08 395
我们需要引入jquery-3.5.1.min.js ，如果没有，请翻看我的下一篇博客。我这里下面是一张图片，如果是其他的东西也可以用，直接套公式就可。点击左上方返回键外面这层阴影像左上方移动至消失。这段代码一定要卸载body里面优先执行。最后得到的效果就是这样的啦。在body下写入如下代码。然后我们开始简单的布局。okk，到这里就完啦。...
11.28 点击显示隐藏
A_tuohai的博客
12-08 1083
首先创建一个新的html，在body下面写入两个button按钮用于点击显示隐藏 然后在这个两个button按钮中写入id标签 然后在第二个button按钮下方再添加一个div，id标签也一样要命名，这个div作用是两个按钮点击时显示这个div或者是隐藏这个div的 这时候我们的源代码已经写完了，这时候我们写css样式，在头部title下方写入style样式标签，在标签内写入div所用的样式或者按钮样式，按钮样式我在这里就不写了，自己需要写什么样式的都可以，我这里写的div样式只写了宽高还有背景颜色.
jQuery---解除事件
Philo的博客
01-26 5405
jQuery—解除事件 常见的解除事件有三种，往往取决与你绑定事件所用的关键字： 举例1： //绑定事件，使用id选择器给btn1绑定点击事件 $("#btn1").on("click",function(){ console.log("点击事件") }).mouseenter(function(){ console.log("鼠标聚焦事件") }) //点击第二个按钮，解除第一个按钮事件 $("#btn2").on("click",function()
jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq
09-30
jQuery通过提供一套丰富的API，使得开发者可以快速实现常见的网页操作，如选择元素、添加事件监听器、执行AJAX请求等，而无需编写大量复杂的原生JavaScript代码。 在标签中，"jquery_3.4.1.js"和"jquery-3.4.1"再次...
jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_
10-03
jQuery的核心特性包括选择器、DOM操作、事件处理、动画效果以及Ajax操作。选择器是jQuery的精髓，它简化了JavaScript中获取DOM元素的方式，如"$()"函数可以轻松选取HTML元素。DOM操作则提供了一整套方法，如$("#id")...
jquery-migrate3.4版本
05-17
在jQuery 3.x中，一些过时或不推荐使用的API被移除，如`.data()`的旧实现、`.live()`事件处理和`.browser`对象等。Migrate 3.4.0为这些移除的功能提供临时支持，以便于迁移。 4. **浏览器兼容性**： 虽然现代...
jquery-1.11.1.js和jquery-1.11.1.min.js
12-06
在Web开发领域，jQuery是一款极其重要的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。标题中的"jquery-1.11.1.js"和"jquery-1.11.1.min.js"是jQuery库的两个不同版本，它们都...
CSS样式实现通过移动鼠标来隐藏和显示
A88552211的博客
10-16 1131
均在CSS中的操作 通过使用display的值 block 和 none 来实现 但是如果将为元素 :hover 放在 要显示的div是不操作的 应放在父元素的后面，接着放 操作元素对应的样式标签 正确运行的代码 <!DOCTYPE html> <html lang="en"> <head> <!-- <meta name="viewport" content="width=device-width,initia
基于事件总线的C/C++嵌入式开发框架轻量级设计源码
09-28
该项目是一款基于事件总线的C/C++嵌入式开发框架，其设计源码总计112个文件，涵盖43个头文件、39个源文件、9个Markdown文档、4个源代码文件、3个工程文件、3个配置文件、2个Python脚本以及1个Git忽略文件。框架最低占用ROM 1.5KB，RAM 172字节，具有极低的资源消耗。核心技术采用事件总线，支持Reactor和状态机两种模式，并具备协作式内核，确保极高的可靠性。框架支持深度裁剪，便于移植，适用于对资源敏感的嵌入式系统开发需求。
基于JavaScript的化妆品网站HTML+CSS全栈设计源码
最新发布
09-28
本项目为全栈式化妆品网站设计源码，采用JavaScript进行开发，包含90个文件，涵盖40个SCSS样式文件、22个JavaScript脚本文件、8个HTML模板文件、6个PNG图片资源、5个CSS样式文件、3个JSON配置文件以及其他类型文件。该网站旨在提供专业的化妆品展示和购物体验。
基于HTML和Java的2021年NBA球星信息管理系统设计源码
09-28
本项目是一款基于HTML和Java开发的NBA球星信息管理系统源码，共包含84个文件，涵盖23个Java源文件、23个JPG图片文件、10个ICO图标文件、9个HTML页面文件、5个属性文件、4个PNG图片文件、2个XML配置文件、2个SQL数据库文件、1个Git忽略文件和1个JAR库文件。该系统专注于管理2021年NBA球星的相关信息，旨在提供高效的信息管理解决方案。
Python标准库(Python Standard Library)
09-28
1. 核心模块 o 1.1. 介绍 o 1.2. _ _builtin_ _ 模块 o 1.3. exceptions 模块 o 1.4. os 模块 o 1.5. os.path 模块 o 1.6. stat 模块 o 1.7. string 模块 o 1.8. re 模块 o 1.9. math 模块 o 1.10. cmath 模块 o 1.11. operator 模块 o 1.12. copy 模块 o 1.13. sys 模块 o 1.14. atexit 模块 o 1.15. time 模块 o 1.16. types 模块 o 1.17. gc 模块 2. 更多标准模块 o 2.1. 概览 o 2.2. fileinput 模块 o 2.3. shutil 模块 o 2.4. tempfile 模块 o 2.5. StringIO 模块 o 2.6. cStringIO 模块 o 2.7. mmap 模块 3. 线程和进程 o 3.1. 概览 o 3.2. threading 模块 o 3.3. Queue 模块 o 3.4. thread 模块 o 3.5. comm
技术资料分享电子镇流器知识技术资料开发设计用的重要资料.zip
09-28
技术资料分享电子镇流器知识技术资料开发设计用的重要资料.zip
基于STC15W408AS芯片与串口通信的赛博沙漏设计源码
09-28
该项目是采用STC15W408AS芯片，基于串口通信技术实现的赛博沙漏设计源码。包含44个文件，涵盖C语言源代码、头文件、项目配置、PCB文档和SCH文档等。该设计通过串口接收陀螺仪与加速度计的数据，实现赛博沙子的动态流动效果和重力反馈，为用户带来独特的交互体验。
jQuery-1.9.1事件系统深度解析：事件体系结构与AddEvent设计
jQuery事件原型主要包含以下几点： 1. **唯一ID**：为事件处理函数分配一个唯一的标识符`$$guid`，确保每个函数都能被正确识别。这在处理多个相同类型的事件监听器时尤其重要。 2. **事件存储**：jQuery为每个DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值