jQuery事件处理

最新推荐文章于 2023-08-10 16:39:43 发布
最新推荐文章于 2023-08-10 16:39:43 发布
阅读量143 收藏
点赞数
分类专栏： 网页基础 Java【洗髓】 文章标签： HTML jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjs935219/article/details/100186565
版权


一、Jquery事件处理

1、

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery事件处理</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<button class="xxx">按钮一</button>
		<button class="xxx">按钮二</button>
		<button class="xxx">按钮三</button>
	</body>
	
	<script>
		$(".xxx").click( function(){
			var je = $(this);   //this为DOM对象, $(this)为jQuery对象
			alert("点中了："+je.html());
			
		});
		
	</script>
</html>

2、

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery事件处理2</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

	</head>
	<body>
		<button class="xxx">按钮一</button>
		<button class="xxx">按钮二</button>
		<button class="xxx">按钮三</button>
	</body>
	
	<script>
		
		function initEvenSupport()
		{
			/**/
			$(".xxx").click(function(){
				var je = $(this);
				alert("选中了："+je.html());
			});	
		}
		
		//ready也是一个事件,表示页面加载完成
		$(document).ready(function(){
			//等页面加载完成了,再添加事件回调
			initEvenSupport();
		});
	</script>
</html>

二、单项列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单选列表</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		
		<style>
			/*菜单面板*/
			.menu{
				width: 300px;
				background-color: cornflowerblue;
			}
			
			/*菜单面板+单项*/
			.menu .item{
				padding: 8px;
				color: #fff;
				text-align: center;
				user-select: none; /*文字不可选中，（需考虑兼容性-webkit-moz*/
			}
			/*菜单面板+单项+hover*/
			.menu .item:hover{
				background-color: #eee4;
				border-color: #888;
				border-width: 1px 0px;
				color: #444;
			}
			/*菜单面板+单项+选中状态（子选择器.menu元素下的.selected元素*/
			.menu .select{
				background-color: #eee8;
				border-color: #888;
				border-width: 1px 0px;
				color: #444;
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<div class="item">2019-09-01</div>
			<div class="item">2019-09-02</div>
			<div class="item">2019-09-03</div>
			<div class="item">2019-09-04</div>
			<div class="item">2019-09-05</div>
			<div class="item">2019-09-06</div>
			<div class="item">2019-09-07</div>
			<div class="item">2019-09-08</div>
			<div class="item">2019-09-09</div>
		</div>
	</body>
	<script>
		$(".item").click(function(){
			
			//把旧的选中项去掉选中状态
			//注：removeClass()参数里不需要加点号
			//用上了子选择器
			$(".menu .select").removeClass("select");
			
			//给点中的添加选中状态
			$(this).addClass("select");
			
			//取出点中项的信息
			var str = $(this).html();
			alert("选中了："+str);
		});
	</script>
</html>

三、对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对话框</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		
		<style>
			
			/*全景窗口，指定left top right bottom*/
			.Js-dialog{
				display: none; /*默认隐藏*/
				position: fixed;
				z-index: 1000;  /*确保遮住后面所有的元素*/
				left: 0px;
				top: 0px;
				right: 0px;
				bottom: 0px;
				background-color: #ccc8;
				opacity: 1;   /*不透明度*/
			}
			
			/*前景，对话框窗口*/
			.Js-dialog .frame{
				position: relative;
				width: 350px;
				min-height: 150px;
				margin: 150px auto;  /*居中显示*/
				background-color: #fff;
				border-radius: 2px;
				border: 1px solid #ccc;
				box-shadow: 1px 1px 3px #aaa;
			}
			
			/*右上角的关闭对话框，绝对定位*/
			.Js-dialog .close{
				position: absolute;
				top: 0px;
				right: 0px;
				border: 1px solid #fff;
			}
			
			/*悬浮*/
			.Js-dialog .close:hover{
				border: 1px solid #ccc;
			}
			
			/*用户自定义内容区*/
			.Js-dialog .content{
				width: 100%;
				text-align: center;
				margin: 50px auto;
			}
			
			/*中间内容样式*/
			.poem{
				background-color: #CCCCCC;
				width: 300px;
				margin: 50px auto;
			}
			.poem p{
				text-align: center;
			}
			.ss{
				text-align: 	center;
			}
		</style>
	</head>
	<body>

		<div class="poem">
			<p> 春晓 </p> 
			<p> 作者：孟浩然	</p>
			<p>
				春眠不觉晓，处处闻啼鸟。<br>
				夜来风雨声，花落知多少。<br>
			</p>
		</div>
		
		<div  class="ss">
			<button onclick="test()">显示对话框</button>
		</div>
		
		<!--对话框定义-->
		<div id="mydlg" class="Js-dialog">
			<div class="frame">
				<img class="close" src="img/ic_close.png" />
				<div class="content">
					Js-dialog对话框
				</div>
			</div>
		</div>
	</body>
	<script>
		function test()
		{
			showDialog("#mydlg");
		}
		
		/*可以传送一个jQuery对象，也可以传一个字符串*/
		window.showDialog = function(selector)
		{
			var dlg = selector;
			if(selector.constructor == String)	 
				dlg = $(selector);
			
			// 点击关闭时，关闭对话框 
			$(".close", dlg).click(function(){
				dlg.hide(); // Closure 闭包
			});
						
			dlg.show();
		}
	</script>
</html>

 

森-Js
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作元素、事件处理
weixin_61561066的博客
07-24 885
jQuery操作元素、事件处理
jQuery--事件方法
jfxu
12-03 387
1.$(document).ready()                 方法允许我们在文档完全加载完后执行函数。 2.click()                                           方法是当按钮点击事件被触发时会调用一个函数。 eg:   $("p").click(function(){   $(this).hide(); });
jQuery中常见的事件处理方法、事件的冒泡、事件对象
weixin_46065214的博客
08-23 477
jQuery中常见的事件处理方法、事件的冒泡、事件对象
jQuery 事件
苦涩
05-05 310
jQuery事件页面载入事件鼠标事件 页面载入事件 ready()：文档就绪事件（当HTML文档就绪时解析jQuery） 鼠标事件 click()：触发或将函数绑定到指定元素的click事件 dblclick()：当双击元素时，会发生dblclick事件 mousedown()/mouseup()：鼠标按下或松开事件 mouseover()/mouseout()：鼠标移入或移出事件 ...
深入理解jQuery 事件处理
10-22
下面小编就为大家带来一篇深入理解jQuery 事件处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈jquery事件处理
10-24
主要简单介绍了jquery事件处理，十分的实用，有需要的小伙伴可以参考下。
jQuery事件处理的特征(事件命名机制)
10-21
主要给大家介绍jquery事件处理的一些特征，jquery事件命名机制的相关知识，介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看下吧
jquery中的事件处理详细介绍
12-08
1.页面载入完毕响应事件 所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和操作了。 ①jQuery中的$(doucument).ready()事件 ready(fn)是jQuery事件模块中最重要的一个函数。这个方法可以看作是对[removed]注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有的javaScript函数都是需要在那一刻执行。 ready(fn) 返回值:Object 参数-fn:要在DOM载入就绪时执行的参数Function 当DOM载入就绪时绑定一个要执行的函数 而它有一种很简单的缩写形式$(document).rea
jQuery事件处理机制(4)
qq_45466959的博客
05-31 1166
在前端开发中，经常使用事件来完成一些交互操作。举例： 文本框获得焦点、鼠标滑过改变样式等。 jQuery提供的一些事件：jQuery中事件方法一般与事件名称相同。例如： 单机事件click，对应的事件方法是click()方法。常用事件方法：click()事件： 为元素绑定事件处理函数后，还可以手动触发事件。例如： 扩展 1.2 页面加载事件 在网页开发中，操作DOM时，会因为页面元素还没有加载而执行失败，因此引入事件处理函数；解决办法：jQuery提供了ready事件作为页面加载事件；Javavasci
JQuery——事件处理
最新发布
TianXuab的博客
08-10 321
这些示例演示了如何在 jQuery 中处理不同类型的事件。通过选择适当的事件，您可以为元素添加各种交互行为，以满足用户需求。请注意，上述示例中的事件处理方法也可以使用事件委托（event delegation）来提高性能和代码组织。在 jQuery 中，事件处理允许您在元素上绑定特定的行为，以响应用户的交互动作，如点击、悬停、键盘输入等。事件在用户按下或释放键盘上的按键时触发。事件在鼠标进入和离开元素时触发。事件在元素被点击时触发。（元素失去焦点时触发）等。（元素获得焦点时触发）、（提交表单时触发）、
JQuery系列之事件
老__L的博客
09-07 370
在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的JQuery对象中的元素。在JQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件的名称，命名空间，选择器，或处理函数名称的组合。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。如果一个简单的事件名称，比如提供"click"
五、jQuery事件处理
m0_61684063的博客
04-15 916
五、jQuery事件处理
jQuery 事件方法大全-超全的总结
liuliuhelingdao的博客
11-08 865
可能的事件属性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area。ready(fn);blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area。
jQuery的事件处理
Han_Zhou_Z的博客
01-08 780
目录 一、jQuery的事件处理 1、页面载入事件 2、事件绑定（bind） 3、反绑定事件（unbind） 4、一次性事件绑定（one） 5、模拟鼠标悬停（hover） 一、jQuery的事件处理 1、页面载入事件 $(document).ready() --- onload 2、事件绑定（bind） bind(type,[data],fn) type：表示事件类型(click、mouseover、mouseout...) [data]：可选参数,表示传递给事件对象的额外数据
jQuery事件处理概述
橘猫吃不胖的博客
01-09 1035
jQuery事件1 概述2 页面载入完毕响应事件2.1 window.onload2.2 $(document).ready()事件3 绑定与反绑定事件监听器3.1 概述3.2 绑定事件3.3 jQuery事件处理函数的好处3.4 反绑定事件3.5 一次性的事件绑定4 事件触发器4.1 trigger触发事件4.2 triggerHandler触发事件4.3 Event Helpers快捷事件5 事件的交互处理5.1 hover：模仿鼠标悬停6 事件对象6.1 使用jQuery事件对象6.2 Javascr
jQuery事件处理机制
05-24
jQuery事件处理机制是通过绑定事件处理程序来实现的。jQuery提供了一些方法来绑定事件处理程序，例如`on()`、`click()`、`keydown()`等等。 当事件被触发时，jQuery会将事件对象作为第一个参数传递给事件处理程序。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值