jQuery库的简单使用:jQuery 中的事件:绑定,移除,合成,事件冒泡,事件对象的属性,

最新推荐文章于 2022-11-13 16:56:45 发布
最新推荐文章于 2022-11-13 16:56:45 发布
阅读量190 收藏
点赞数
分类专栏： Spring(+注解开发)&&SpringMVC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43416157/article/details/109240293
版权

jQuery 中的事件

在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 
在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 
在 jQuery 中使用$(document).ready() 方法.

在这里插入图片描述

事件绑定:

bind()

合成事件

hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 
当光标移出这个元素时, 会触发指定的第二个函数.
toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 
当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.
toggle() 的另一个作用: 切换元素的可见状态.

事件冒泡

事件会按照 DOM 层次结构像水泡一样不断向上只止顶端
解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.

事件对象的属性

事件对象: 当触发事件时, 事件对象就被创建了. 
在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 
事件处理函数执行完毕后, 事件对象就被销毁了.
event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标.

移除事件

移除某按钮上的所有  click 事件: $(“btn”).unbind(“click”)
移除某按钮上的所有事件: $(“btn”).unbind();
one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除.
即在每个对象上, 事件处理函数只会被执行一次.

练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//为 .head 添加 Onclick 响应函数: 若 .content 隐藏则显示, 若 .content 显示, 则隐藏
	$(function() {
		/*
		$(".head").click(function(){
			//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定
			//的选择器. 
			var flag = $(".content").is(":hidden");
			
			if(flag){
				//show() 方法: 使隐藏的变为显示
				$(".content").show();
			}else{
				$(".content").hide();
			}
		});
		 */

		//bind: 为某 jQuery 对象绑定事件. 
		/*
		$(".head").bind("click", function(){
			//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定
			//的选择器. 
			var flag = $(".content").is(":hidden");
			
			if(flag){
				//show() 方法: 使隐藏的变为显示
				$(".content").show();
			}else{
				$(".content").hide();
			}
		});
		 */

		//mouseover: 鼠标移上去
		//mouseout: 鼠标移出. 
		/*
		$(".head").mouseover(function(){
			$(".content").show();
		}).mouseout(function(){
			$(".content").hide();
		});
		 */

		//合成事件: hover: 鼠标移上去执行第一个函数, 移出执行第二个函数. 
		/*
		$(".head").hover(function(){
			$(".content").show();
		}, function(){
			$(".content").hide();
		});
		 */

		//合成事件: toggle: 第一次点击执行第一个函数, 第二次点击执行第二个
		//函数 ... 循环执行. 
		$(".head").toggle(function() {
			$(".content").show();
		}, function() {
			$(".content").hide();
		});
	})
</script>
</head>
<body>
	<div id="panel">
		<h5 class="head">什么是jQuery?</h5>
		<div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由
			John Resig
			创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
		</div>
	</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 13px;
	line-height: 130%;
	padding: 60px;
}

#content {
	width: 220px;
	border: 1px solid #0050D0;
	background: #96E555;
}

span {
	width: 200px;
	margin: 10px;
	background: #666666;
	cursor: pointer;
	color: white;
	display: block;
}

p {
	width: 200px;
	background: #888;
	color: white;
	height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {
		//事件的冒泡: 什么是事件的冒泡
		$("body").click(function() {
			alert("body click");
		});
		$("#content").click(function() {
			alert("div click");
		});
		$("span").click(function() {
			alert("span click");
			//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡. 
			return false;
		});
	})
</script>
</head>
<body>
	<div id="content">
		外层div元素 <span>内层span元素</span> 外层div元素
	</div>
	<div id="msg"></div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 13px;
	line-height: 130%;
	padding: 60px;
}

#content {
	width: 220px;
	border: 1px solid #0050D0;
	background: #96E555;
}

span {
	width: 200px;
	margin: 10px;
	background: #666666;
	cursor: pointer;
	color: white;
	display: block;
}

p {
	width: 200px;
	background: #888;
	color: white;
	height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	/*
	1. 事件: 当鼠标移动时, 就会触发 mousemove 事件. 
	2. 如何得到事件对象: 在响应函数中添加一个参数就可以. 
	3. 事件对象的两个属性: pageX,pageY
	 */
	$(function() {
		//事件的 pageX, pageY 属性
		$("body").mousemove(function(obj) {
			$("#msg").text("x: " + obj.pageX + ", y: " + obj.pageY);
		});
	})
</script>
</head>
<body>
	<div id="content">
		外层div元素 <span>内层span元素</span> 外层div元素
	</div>
	<div id="msg"></div>
	<br>
	<br>
	<a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>
</html>

jQuery 中的动画: 隐藏和显示

hide(): 在 HTML 文档中, 为一个元素调用 hide() 方法
	会将该元素的 display 样式改为 none. 代码功能同 css(“display”, “none”);
show(): 将元素的 display 样式改为先前的显示状态.
以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 
不会有任何动画. 可以通过制定速度参数使元素动起来.
以上两个方法会同时减少(增大)内容的高度, 宽度和不透明度.

fadeIn(), fadeOut(): 只改变元素的透明度. 
fadeOut() 会在指定的一段时间内降低元素的不透明度, 直到元素完全消失. 
fadeIn() 则相反.

slideDown(), slideUp(): 只会改变元素的高度. 
如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时, 
这个元素将由上至下延伸显示. slideUp() 方法正好相反, 元素由下至上缩短隐藏. 

toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的. 
slideToggle(): 通过高度变化来切换匹配元素的可见性. 
fadeTo(): 把不透明度以渐近的方式调整到指定的值(0 – 1 之间). 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	//演示动画效果: show() 和 hide() 方法中传入毫秒数以达到动画的效果
	/*
	$(function(){ 
		$(".head").toggle(function(){
			$(".content").show(1000);
		}, function(){
			$(".content").hide(1000);
		});
	})
	 */

	//只改变高度
	/*
	$(function(){ 
		$(".head").toggle(function(){
			$(".content").slideDown(500);
		}, function(){
			$(".content").slideUp(500);
		});
	})
	 */

	//只改变透明度
	/*
	$(function(){ 
		$(".head").toggle(function(){
			$(".content").fadeIn(1000);
		}, function(){
			$(".content").fadeOut(1000);
		});
	})
	 */

	//toggle() 可以切换元素的可见状态. 
	//slideToggle(): 通过高度变化来切换匹配元素的可见性
	//fadeToggle(): 通过透明度来切换元素的可见性.
	//fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间). 
	$(function() {
		$(".content").show();
		var i = 1;

		$(".head").click(function() {
			//$(".content").toggle();
			//$(".content").slideToggle();
			//$(".content").fadeToggle();

			$(".content").fadeTo("slow", i);
			i = i - 0.1;
		});
	})
</script>
</head>
<body>
	<div id="panel">
		<h5 class="head">什么是jQuery?</h5>
		<div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由
			John Resig
			创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
		</div>
	</div>
</body>
</html>
ReflectMirroring
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery中on绑定事件后引发的事件冒泡问题如何解决
10-22
主要介绍了jQuery中on绑定事件后引发的事件冒泡问题及解决办法，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
JQuery中的常用事件、对象属性与使用方法分析
11-27
本文实例讲述了JQuery中的常用事件、对象属性与使用方法。分享给大家供大家参考，具体如下： JQuery中的常用事件 .click() 鼠标单击触发事件，参数可选（data，function） .dblclick() 双击触发，同上 ...
jQuery加载、jQuery选择器、jQuery样式操作、click事件、jQuery索引值、jQuery属性操作、jQuery特殊效果
qq2951890557的博客
07-29 243
jQuery加载： 将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery有ready方法解决 JS写法 window.onload = function(){ var div = document.getElementById('div'); alert(div.innerHTML); } JQuery写法 $(document).ready(function() { var $div = $('#div'); alert('jquery:' + $div.html()
jQuery的事件和动画
weixin_65795413的博客
03-23 854
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #aa { width: 200px; height: 200px; ...
jQuery学习：事件处理（绑定事件 解绑事件 事件委派/委托））
weixin_47295886的博客
11-13 622
event.clientX event.clientY --相对于视口的左上角--也就是打开窗口的界面。event.offsetX event.offsetY--相对于事件元素的左上角。鼠标移入移出的方法mouseenter鼠标移入--mouseleave鼠标移除。event.pageX event.pageY--相对于页面的左上角。事件相关处理阻止事件冒泡:event.stopPropagation()绑定点击事件的两种方式 on(事件，回调函数) click。得到事件的坐标-首先是事件对象。
jQuery网页开发案例:jQuery 事件--jQuery 事件注册,jQuery 事件处理,jQuery 事件对象
薛定谔的猫
10-29 145
事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。events:一个或多个用空格分隔的事件类型，如"click"或"keydown"。模式不会触发元素的默认行为，这是和前面两种的区别。可以绑定多个事件，多个处理事件处理程序。点击的删除按钮，可以删除当前的微博留言。事件被触发，就会有事件对象的产生。
JQuery中绑定事件（bind()）和移除事件（unbind()）
10-24
本文主要向大家详细介绍了jQuery的绑定事件和移除事件的使用方法和示例分享，这里推荐给有需要的小伙伴们参考下。
jQuery中事件对象e的事件冒泡用法示例介绍
11-30
之前查手册的时候没有看到有事件对象这一概念，当时我想实现的是点击一个文本框出现一个下拉多选框，在文本框失去焦点是触发blur事件，从而使下拉框隐藏起来。但是当我要选择多选框是也会使它隐藏，就不能进行选择了...
spring注解驱动(声明式事务):简单使用,原码解析,AutoProxyRegistrar,ProxyTransactionManagementConfiguration
入梦镜
09-06 2194
简单使用 配置类 package jane.tx; import javax.sql.DataSource; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework
It is illegal to call this method if the current request is not in asynchronous mode (i.e. isAsyncSt
入梦镜
10-18 1861
源头 package jane.servlet; import java.io.IOException; import javax.servlet.AsyncContext; import javax.servlet.ServletException; import javax.servlet.ServletResponse; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import
spring框架:通过注解配置bean,扫描组件的包含和排除,注解的自动装配
入梦镜
04-16 1711
注解配置bean 注解配置bean有两个步骤: 将需要spring管理的对象加上注解 在spring的配置文件里面加上扫描器 注解有四种类型: 注解都是写在实现类里面的,不是写在接口上面 @Component 普通组件,就是标识这个类是要给springIOC容器管理的组件 @Repository 持久化层组件,就是标识一个持久化层的类要给springIOC容器管理,持久...
SpringMVC框架:View视图类型,配置文件路径设置,编码过滤器
入梦镜
06-08 1303
分类 /* * View作用:处理模型数据,实现页面的跳转(转发和重定向) * View类型: * InternalResourceView:转发视图 * JstlView:转发视图 * RedirectView:重定向视图 */ @RequestMapping(value = "/param",method = RequestMethod.POST) public String param() { // return "redirect:index.jsp"; ret
spring框架:AOP动态代理(以注释的方式配置切面)
入梦镜
04-26 1138
动态代理 动态代理里面有三个对象:原始对象,代理对象,目标对象 这三个对象可以理解成找工作的人(原始对象),帮你找工作的中介(代理对象),找工作这件事(目标对象) 现在以一个例子来理解: 就是你需要实现一个计算器,计算器的功能需要又计算的操作,还需要有日志的记录,比如执行前记录现在执行的是那一个方法,计算的两个数是什么,执行后记录方法名和计算的结果 现在的难点就是在这个日志的功能你需要怎么实现,可...
spring框架:JdbcTemplate,声明式事务管理(传播行为,隔离级别,回滚,超时和只读属性)
入梦镜
04-28 844
JdbcTemplate
SpringMVC框架:拦截器
入梦镜
06-11 744
拦截器 拦截器作用的位置 客户端发送一个请求,首先是经过过滤器Fitter来进行处理,过滤器通过后就交给DispatherServlet来处理,然后DispatherServlet就会找到控制层中对应的控制方法,就是xxxhandler,而拦截器的作用位置就是DispatherServlet和xxxhandler之间的一层 简介 Spring MVC也可以使用拦截器对请求进行拦截处理，用户可以自定义拦截器来实现特定的功能，自定义的拦截器可以实现HandlerInterceptor接口，也可以继承Handle
spring框架的简介和搭建spring的运行环境
入梦镜
03-22 601
六大框架 struts1,struts2,hibernate,spring,springMVC,mybatis MVC框架:struts1,struts2,springMVC 持久层框架:hibernate,mybatis 整合型框架/设计型框架:spring spring的概述 spring是一个开源的框架,为了简化企业级的开发 spring是一个IOC(DI)和AOP容器框架,其中最重要的是I...
SpringMVC框架:响应数据处理
入梦镜
06-06 570
响应数据处理 简单个例子 @RequestMapping(value = "/param",method = RequestMethod.POST) public ModelAndView param() { ModelAndView mav=new ModelAndView(); mav.addObject("username", "root");//向request作用域放值 mav.setViewName("success");//设置视图名称,实现页面跳转 return mav
jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作
入梦镜
10-23 528
jQuery中的 DOM 操作 查 查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 操作文本节点：通过 text() 方法 增 创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回. 注意: 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用
jquery事件绑定 冒泡
最新发布
09-09
在jQuery中，可以使用事件绑定方法来处理事件冒泡。jQuery提供了多种事件绑定的方法，其中常见的是`on()`方法和`bind()`方法。这些方法可以用于绑定事件处理程序，并且默认情况下会处理事件冒泡。 例如，使用`on()`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ReflectMirroring

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值