Jquery（三）事件函数

最新推荐文章于 2024-07-30 11:51:58 发布
最新推荐文章于 2024-07-30 11:51:58 发布
阅读量170 收藏
点赞数
分类专栏： 前端开发 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51760209/article/details/126056344
版权

Jquery（三）事件函数

一、窗口事件类型函数

1.resize

用于窗口对象（window），当窗口大小发生变化时调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$(window).resize(function() {
					alert("我被改变大小了!");
				});
			});
		</script>
	</head>
	<body> 
	</body>
</html>

2.scroll

用于窗口、iframe、div 等可能出现滚动条的对象。当使用鼠标滚轮滚动时调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
						var count = 0;
						$(window).scroll(function() { 
							// alert(count) 
							$("span").text(count++); 
						});
						
						});
		</script>
	</head>
	<body>
		<div style="height: 1400px;background-color: aquamarine;"> 
		</div> 
		<span>0</span>
	</body>
</html>

3.window.onload、body.onload、document 的区别

window.onload 和 body.onload 为同一事件绑定方式，同时绑定时只调用一个。
唯一的区别是， 可以在 body 标签上声明处理函数。例如<body onload=‘init()’>这两个事件对应的是整个文档(包含文档上的 css、js、html、图片信息)加载完成后调用。只能写一次 document.ready：当 html 文档解析后就调用事件处理函数。图片、css 等此时有可能没有加载，不兼容。
文档加载事件函数：
load：用于 window、图片等。在文档或图片加载完成后执行处理函数。
ready：用于 document 对象，当文档加载后执行处理函数，相当于 document.onload.可以写多次
–举例：$(document).ready(fun1);
–缩写：$(fun1);
unload：用于 window 对象。在文档关闭前执行处理函数。

二、表单事件函数

1.focus

当元素获得焦点时触发目标函数，不支持冒泡；

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() { //在页面加载完成后让#username 得到焦点
				$("#username").focus();
			});
		</script>
	</head>
	<body>
		<input type="text" id="a" value="a" /> 
		<input type="text" id="b" value="b" /> 
		<input type="text" id="username" value="zs" /> 
		<input type="text" id="c" value="c" /> 
	</body>
</html>

效果展示：
在这里插入图片描述

2.focusin

和 focus 一样，只是此事件支持冒泡；focusin 事件跟 focus 事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("p").focusin(function() {
					$(this).find("span").css("display", "inline").fadeOut(1000);
				});
			});
		</script>
	</head>
	<body>
		<p><input type="text" /> <span>focusout fire</span></p>
		<p><input type="password" /> <span>focusout fire</span></p>
	</body>
</html>

效果展示：
在这里插入图片描述

3.blur

当 focusable 元素失去焦点时触发目标函数，不支持冒泡；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
		<!--判断输入的值是否是数，如果是数就不管了，不是数要弹框警告-->
		<script type="text/javascript">
			$(function(){
				var old=0;
				$("#numb").focus(function(){
					old=$(this).val();
				})
				$("#numb").blur(function(){
					var t=$(this).val();
					if(isNaN(t))
					{
						$(this).val(old);
						alert("输入错误");
					}
					else{
						alert("输入正确");
					}
//				parseFloat() parseInt() 将字符串转换成数，如果转换不成功  Nan。
//              如果数字开头的字符串，会将数字转换成数类型。
//				var  numb = parseInt(v);
				//  alert(isNaN(v))
			})

			})
		</script>
	</head>
	<body>
		请输入购买数量：<input type="text" id="numb" value="0"  />
	</body>
</html>

效果展示：
在这里插入图片描述

4.focusout

和 blur 一样，只是此事件支持冒泡；select

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("p").focusout(function() {
					$(this).find("span").css("display", "inline").fadeOut(1000);
				});
			});
		</script>
	</head>
	<body>
		<p><input type="text" /> <span>focusout fire</span></p>
		<p><input type="password" /> <span>focusout fire</span></p>
	</body>
</html>

效果展示：
在这里插入图片描述

5.change

当下拉框、单选框,文本框的值发生变化时调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
	</head>
	<body>
		<select id="num" name="num">
			<option value="4">4</option>
			<option value="8">8</option>
			<option value="12">12</option>
			<option value="16">16</option>
		</select>
		当前每一页显示<span id="pages">6</span>条信息。
		<script type="text/javascript">
			$(function(){
				$("#num").change(function(){
					alert("已绑定");
					var value=$(this).val();
					$("#pages").html(value);
				})
			})
		</script>
	</body>
</html>

在这里插入图片描述

6.submit

当表单提交时触发,return false 不提交 return true 提交。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
		<script type="text/javascript">
			$(function(){
					$("#sub_btn").click(function(){
						var val1= $("#uname").val();
						var val2=$("#psd").val();
						if(val1==null||val1==""){
							alert("请输入账号");
						}
						else if(val2==null||val2==""){
							alert("请输入密码");
						}
						else{
							$("#myform").submit();
						}
					})
			})
		</script>
	</head>
	<body>
		<form id="myform" action="index.html">
			用户名：<input type="text"  id="uname" name="uname" placeholder="请输入用户名"/>
			密码：<input type="password"  id="psd" name="psd" placeholder="请输入密码"/>
			<input type="button" id="sub_btn" value="登录"/> <!-- 注意：type值不能为submit;标签要用input,不能用button-->
			<!-- button自带submit效果，若type为submit同理，会自动提交-->
		</form>
	</body>
</html>

三、jQuery 事件对象内置函数及属性

1.event.currentTarget

获取绑定事件的 DOM 元素,相当于 this。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("p").click(function(e) {
					console.log($(this).html());
					console.log(e.currentTarget);
					console.log(e.currentTarget == this);
				})
			})
		</script>
	</head>
	<body>
		<p>刘备</p>
		<p>刘备 2</p>
	</body>
</html>

效果展示：
在这里插入图片描述

2.event.data

传递给执行函数的参数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
						$("p").click({
									id: 1
						}, function(e) {
							console.log(e.data.id); 
							//通过 e.data.参数名取得传参的值 
							console.log($(this).html()); 
							console.log(e.currentTarget); 
							console.log(e.currentTarget==this); 
						}) 
			}) 
		</script>
	</head>
	<body>
		<p>刘备</p>
		<p>刘备 2</p>
	</body>
</html>

效果展示：
在这里插入图片描述
event.isDefaultPrevented()：返回是否调用
event.preventDefault() 方法,来返回一个布尔值。
event.pageX：鼠标相对于文档的左边缘的位置（左边）。
event.pageY：鼠标相对于文档的顶部边缘的位置（坐标）。
event.preventDefault()如果调用这个方法，默认事件行为将不再触发。
event.target：触发事件的 DOM 元素。
event.timeStamp：这个属性返回事件触发时距离 1970 年 1 月 1 日的毫秒数。
event.type：描述事件的性质

总结

1.blur:元素失去焦点时触发目标函数，不支持冒泡
2.focusout:元素失去焦点时触发目标函数，支持冒泡
3.change:当下拉框、单选框,文本框的值发生变化时调用
4.submit:当表单提交时触发,return false 不提交 return true 提交
5.event.currentTarget:获取绑定事件的 DOM 元素,相当于 this
6.event.data:传递给执行函数的参数,拿到参数:event.data.参数名

君知燕云归
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Jquery中事件
m0_73030012的博客
09-17 1399
事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情！我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动！事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。jquery是为事件处理特别设计的语法：$(selector).toggle(fun1, fun2,fun3-----)第一个方法和第二个方法是必须的，后面是可选的。注意：这个方法在1.8之前可以使用的，目前已经不支持！！
jQuery 事件
weixin_69620038的博客
02-23 113
下一步是定义了点击后触发事件。
jQuery函数事件
weixin_57763117的博客
05-29 224
1.jQuery 事件处理函数是 jQuery 中的核心函数。事件处理函数是当 HTML 中发生事件时自动被调用的函数由事件、触发（triggered）是经常被用到的术语由于 jQuery 是为事件处理特别设计的，网页 <head> 部分的“事件处理”函数中。 2.在上面的例子中，定义了一个处理 HTML 按钮的点击事件的click函数 (“button”).click(function() {..some code}) 其中click函数内部的代码隐藏的所有元素 (document
jQuery中的 事件类型（几乎全部）的 事件本身解释 和 参数解释 以及 代码演示
最新发布
x15514104477的博客
07-30 1127
对jquery中 几乎所有事件类型 的 事件本身的解释、事件参数的解释以及事件对应的代码示例帮助新手理解
jQuery学习笔记（三）- jQuery事件与其他方法【完】
Ludwig1957的博客
02-06 280
2021.2.5 文章目录jQuery学习笔记（三）jQuery事件jQuery事件注册jQuery事件处理事件处理on()绑定事件事件处理 off()解绑事件自动触发事件 trigger()jQuery事件对象jQuery其他方法jQuery对象拷贝多库共存jQuery插件 jQuery学习笔记（三） jQuery事件 jQuery事件注册 单个事件注册 语法：element.事件(function(){}) 如：$('div').click(function(){事件处理程序}) 其他事件和原生基本.
jQuery 三击事件实现代码
10-26
虽然jQuery没有提供现成的三击事件处理函数，但是我们可以通过编写自定义代码来实现。以下知识点将详细介绍如何利用jQuery来实现三击事件的功能，并且附带了相应的实现代码。 ### jQuery三击事件知识点： 1. **...
jquery事件与函数的使用介绍
10-26
在JavaScript和jQuery的世界里，事件和函数是两个非常核心的概念，它们共同构成了用户与网页交互的基础。jQuery库简化了事件处理和函数定义的过程，使得开发者能够更高效地编写交互式的前端应用。接下来，我们将深入...
jQuery数组处理函数整理
10-21
jQuery是一个广泛使用的JavaScript库，它提供了一系列便捷的API来简化HTML文档遍历、事件处理、动画制作以及Ajax交互。在处理数组方面，jQuery也提供了丰富的函数，帮助开发者更高效地操作数组。以下是对这些函数的...
jQuery 自定义函数写法分享
10-28
三、 jQuery 的 extend 方法还有一个重载原型 `extend` 方法还有一个重载原型：`extend(boolean, dest, src1, src2, src3...)`，其中第一个参数 `boolean` 代表是否进行深度拷贝，其余参数和前面介绍的一致。 例如...
JQuery函数 | 选择器 | 事件
weixin_73054157的博客
01-04 970
JavaScript的window.onload入口函数事件是等到所有内容、外部图片等文件加载完成之后，才去执行window.onload事件。JQuery能做的JavaScript都能做到；而JavaScript能做的，JQuery不一定能做到。JQuery的ready入口函数事件是在HTML所有标签加载完成之后，才去执行ready事件。JQ选择器分为“基本选择器，层级选择器，过滤选择器，属性选择器，筛选选择器，表单选择器”一个HTML页面，不能出现相同id属性的标签。
jQuery事件大全(真的很全)
杨春建的博客
09-21 1万+
Dom： Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title",
通用domReady方法，类似于jquery
summer7310的专栏
10-04 734
function myReady(fn){     //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式     if ( document.addEventListener ) {         document.addEventListener("DOMContentLoaded", fn, false);     } else {    
页面加载完成之后执行js函数
热门推荐
勿视人非 的专栏
11-23 2万+
中的onload / window.onload事件,与jQuery的$().ready(function(){}) / (function(){}) 方式比较:  1.执行时机 window.onload方法是在网页中的所有的元素(包括元素的所有关联文件：图片、音视频、flash等)都完全加载到浏览器之后才执行。如果页面的这些内容很多会让用户等待很长时间。 jQuery中的$(docume
页面加载完毕后执行事件
banghe8611的博客
01-29 2018
页面加载完成后触发事件很简单， 写这个的原因是因为，每次用到的时候总是忘了怎么写。。。 首先最简单的方法。jquery的一种简写形式： $(function(){ alert("页面加载完成！"); }); 其对应的完整形态为： $(document).ready(function(){ alert("页面加载完成！"); }); ...
jQuery语法及事件函数总结
Hopefully Sky的博客
08-05 1926
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它凭借简洁的语法和跨平台的兼容性，极大地简化了 JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业
jQuery 的事件函数整理
qq_15652607的博客
09-23 531
 jQuery的常用事件整理 on,off, bind,unbind, 绑定一个事件，或者移除一个事件 one,绑定一个一次性的事件 hover， 当鼠标移动到一个匹配的元素的上面时，触发第一个函数，当移出去时，触发第二个函数 blur, focus,当元素失去焦点时触发blur事件，当元素获取焦点时触发focus事件 click,当匹配的元素被点击时触发click 事件 keypre...
jquery之事件函数
kevin_love_it的博客
11-26 246
jquery事件函数
JQuery事件函数
xibozi的博客
11-02 156
$(“对象”).事件( function(){ } ); $(document).ready(function(){}) $(“p”).click(function(){}) $(“input”).focus(function(){}) $(“input”).blur(function(){}) $("#div1").hover(function(){},function(){}) hover有2个函数， $(“input”).keypress(function(){}) $(“div1”).hide()
jQuery事件函数详解
柯晓楠
01-15 560
概念 官方概念： jQuery 是为事件处理特别设计的。jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 个人理解： 事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情，我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动。 JQuery中的事件有很...
jquery三种立即执行函数
11-09
中常见的三种立即执行函数是： 1. (function($){})(jQuery)：这种写法是将jQuery作为...3. jQuery(function($){})：这种写法是将一个匿名函数作为参数传入到jQuery函数中，当DOM加载完成后，这个匿名函数就会被执行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

君知燕云归

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

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

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

打赏作者

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

抵扣说明：

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

余额充值