JQuery（23）_JQuery 事件

最新推荐文章于 2022-08-31 17:45:53 发布
最新推荐文章于 2022-08-31 17:45:53 发布
阅读量383 收藏
点赞数
分类专栏： JQuery（更新完） 文章标签： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36260974/article/details/103524017
版权

本系列博客汇总在这里：JQuery 汇总

JQuery 事件

一、说明

  • 提供可以绑定的事件有（加粗的为重点）
    blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。

二、代码演示

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function()
{
	/* 
	   1.事件结合选择器会把选择器选出来的一组元素都加上事件
	   2.在元素上可以不去指定事件
	   3.事件的方法建议使用匿名方法
	   4.事件的赋值必须要放在jQuery的主函数内部
	*/
	$("form input").blur(function()
	{
		//离开焦点的input是哪个这个this就是哪个对象
		var obj = $(this);
		var val = obj.val();
		var reg = obj.attr("reg");
		var tip = obj.attr("tip");
		var regObj = new RegExp(reg);
		if(!regObj.test(val))
		{
			//获得username紧挨着的下一个dom的jQuery对象
			var spanObj = obj.next();
			spanObj.html("<font color='red'>"+tip+"</font>");
		}
		else
		{
			var spanObj = obj.next();
			spanObj.html("");
		}
	});
	
	$("form input").focus(function()
	{
		$(this).css("background","yellow");
	});
	
	$("#regist").click(function()
	{
		//设置一个提交表单的标志
		var isSubmit = true;
		$("form input").each(function(){
			var obj = $(this);
			var val = obj.val();
			var reg = obj.attr("reg");
			var tip = obj.attr("tip");
			var regObj = new RegExp(reg);
			if(!regObj.test(val))
			{
				//获得username紧挨着的下一个dom的jQuery对象
				var spanObj = obj.next();
				spanObj.html("<font color='red'>"+tip+"</font>");
				isSubmit =false;
			}
			else
			{
				var spanObj = obj.next();
				spanObj.html("");
			}
		});
		if(isSubmit){
			//表单提交
			$("#myform").submit();
		}
	});
	
	$("#gender").change(function()
	{
		//获得改变后的值
		var val = $(this).val();
		alert(val);
	});	
});

</script>
</head>
<body>
<form id="myform" action="${path }/jsp2/tab.jsp" method="post">
<p>
	用户：<input id="username" name="username" type="text" reg="^\d{3,5}$" tip="请输入3到5位的数字"><span></span>
</p>
<p>
	密码：<input name="password" type="password" reg="^\w{6,8}$" tip="请输入6到8位的英文或者数字或_"><span></span>
</p>
<p>
	地址：<input name="address" type="text" reg="^.{0,50}$" tip="请输入50个字符"><span></span>
</p>

<p>
	性别：<select id="gender">
			<option value="1">男</option>
			<option value="2">女</option>
		</select><span></span>
</p>
<p>
	<input type="button" value="注册" id="regist">
</p>
</form>
</body>
</html>

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function()
{
	/* 1.事件结合选择器会把选择器选出来的一组元素都加上事件
	   2.在元素上可以不去指定事件
	   3.事件的方法建议使用匿名方法
	   4.事件的赋值必须要放在jQuery的主函数内部
	*/
	$("form input").blur(function()
	{
		//离开焦点的input是哪个这个this就是哪个对象
		var obj = $(this);
		var val = obj.val();
		var reg = obj.attr("reg");
		var tip = obj.attr("tip");
		var regObj = new RegExp(reg);
		if(!regObj.test(val))
		{
			//获得username紧挨着的下一个dom的jQuery对象
			var spanObj = obj.next();
			spanObj.html("<font color='red'>"+tip+"</font>");
		}
		else
		{
			var spanObj = obj.next();
			spanObj.html("");
		}
	});
	
	$("form input").focus(function()
	{
		$(this).css("background","yellow");
	});
	
	/* 
	$("#regist").click(function()
	{
		//设置一个提交表单的标志
		var isSubmit = true;
		$("form input").each(function()
		{
			var obj = $(this);
			var val = obj.val();
			var reg = obj.attr("reg");
			var tip = obj.attr("tip");
			var regObj = new RegExp(reg);
			if(!regObj.test(val))
			{
				//获得username紧挨着的下一个dom的jQuery对象
				var spanObj = obj.next();
				spanObj.html("<font color='red'>"+tip+"</font>");
				isSubmit =false;
			}
			else
			{
				var spanObj = obj.next();
				spanObj.html("");
			}
		});
		if(isSubmit)
		{
			//表单提交
			$("#myform").submit();
		}
		
	});
	*/
	
	$("#myform").submit(function()
	{
		var isSubmit =true;
		$("form input").each(function()
		{
			var obj = $(this);
			var val = obj.val();
			var reg = obj.attr("reg");
			var tip = obj.attr("tip");
			var regObj = new RegExp(reg);
			if(!regObj.test(val))
			{
				//获得username紧挨着的下一个dom的jQuery对象
				var spanObj = obj.next();
				spanObj.html("<font color='red'>"+tip+"</font>");
				isSubmit =false;
			}
			else
			{
				var spanObj = obj.next();
				spanObj.html("");
			}
		});
		//阻止表单提交，如果是true就允许表单提交
		return isSubmit;
	});
	
	$("#gender").change(function()
	{
		//获得改变后的值
		var val = $(this).val();
		alert(val);
	});
	
	
	$("body").keydown(function(event)
	{
		var num = window.event?event.keyCode : event.which;
		if(num == 13)
		{
			var isSubmit = true;
			$("form input").each(function()
			{
				var obj = $(this);
				var val = obj.val();
				var reg = obj.attr("reg");
				var tip = obj.attr("tip");
				var regObj = new RegExp(reg);
				if(!regObj.test(val))
				{
					//获得username紧挨着的下一个dom的jQuery对象
					var spanObj = obj.next();
					spanObj.html("<font color='red'>"+tip+"</font>");
					isSubmit =false;
					//跳出each循环
					//return false;
				}
				else
				{
					var spanObj = obj.next();
					spanObj.html("");
				}
			});
			if(isSubmit)
			{
				//表单提交
				$("#myform").submit();
			}
		}
	});	
});
</script>
</head>
<body>
<form id="myform" action="${path }/jsp2/tab.jsp" method="post">
<p>
	用户：<input id="username" name="username" type="text" reg="^\d{3,5}$" tip="请输入3到5位的数字"><span></span>
</p>
<p>
	密码：<input name="password" type="password" reg="^\w{6,8}$" tip="请输入6到8位的英文或者数字或_"><span></span>
</p>
<p>
	地址：<input name="address" type="text" reg="^.{0,50}$" tip="请输入50个字符"><span></span>
</p>

<p>
	性别：<select id="gender">
			<option value="1">男</option>
			<option value="2">女</option>
		</select><span></span>
</p>
<p>
	<input type="submit" value="注册" id="regist">
</p>
</form>
</body>
</html>

效果同上！
在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function()
{
	$("#username").keyup(function(event)
	{
		var num = window.event?event.keyCode : event.which;
		var charStr = String.fromCharCode(num);
		alert(num + "   "+charStr);
		//请注意组合键，此处不再深入探讨
		if(charStr != "H")
		{
			$(this).val("");
		}
	});	
});

</script>
</head>
<body>
<form id="myform" action="${path }/jsp2/tab.jsp" method="post">
<p>
	用户名：<input id="username" name="username" type="text" ><span></span>
</p>
<p>
	<input type="submit" value="注册" id="regist">
</p>
</form>
</body>
</html>

按键抬起后触发！

如有错误，欢迎指正！

魏宇轩
关注
专栏目录
23-【JS全解】JS语法
小峰同学的前端小屋
04-17 218
文章目录什么是表达式和语句变量提升标识符的规则注释if语句while for 语句短路逻辑for循环break continuelable语句：标签 什么是表达式和语句 表达式一般有值，语句一般改变环境如声明、赋值 只有函数有返回值 返回值为他的值 但是console.log(3)表达式的值为函数返回值 underfined 打印出的东西为3 表达式不需要分号结尾。一旦在表达式后面添加分号，则 ...
jQueryAPI_1.7.1_CN jQuery文档
07-07
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
JavaScript-23：转换为数字类型
臧小川的博客
09-20 150
// 1.parseInt(变量) 可以吧字符型的转换为数字型 得到的是整数 console.log(parseInt('3.99')); // 3 取整 console.log(parseInt('120px')); // 120 会去掉这个px单位 // 2.parseFloat(变量) 可以把字符型的转换为数字型 得到的是小数 浮点数 console.log(parseFloat('120px')); // 120 console.log(parseFloat('3.14')); // 3.1
Javascript的数据类型及类型转换
qq_57215961的博客
05-05 211
Javascript的数据类型采用了弱类型方式。其数据类型由6种，包括数字型（Number）、字符串型（String）、布尔型（Boolean）、未定义型（Undefined）、空类型（Null）、特殊类型（Object）。 强数据类型&&弱数据类型 强数据类型：数据的数据类型在编译前确认（Java、C、C#、C++、Object-C） 弱数据类型：数据的数据类型在编译时确认（Javascript、PHP、Python） 数字型Number 包含...
url传参特殊字符问题（%#等）
zhang515745112的博客
09-01 1万+
java对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent js中，你通过url传值，需要这样： function updatePLChild(name){  //先对参数进行编码  name = encodeURIComponent(name);  location.href="newLessonPlan.do?name="+na
Lucky带你玩转JQuery
07-13
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。jQuery 是作为 JavaScript 的一个函数库，包含以下特性：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAX本课程Lucky老师会带着你由浅入深，逐步掌握并与实战案例相结合，做到学以致用, 是作为全栈开发或者前端开发必会技能
JavaScriptJQuery_jQuery简介
热门推荐
JiuMeilove的博客
06-24 2万+
仓库:可以把很多东西放入这个仓库里面,找到东西只需要到仓库里查找到就可以了JavaScript:即library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate,hide,show,比如获取元素等简单理解:就是一个js文件,里面对原生js代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能了. 比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)这些库都是对原生JavaScr
jQuery页面加载事件
zhansan的博客
06-04 3904
jQuery页面加载事件
JQuery事件的基本使用
m0_48041877的博客
08-29 3448
JQuery的基本使用以及网站推荐
使用jquery移除元素事件
vv110x的博客
08-31 2413
p onclick="add()">点击；使用$("p").removeAttr("onclick"),进行移除。二、第二种移除定义在中绑定click事件。
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"再次...
jQuery1.11.0_20140330_jquery_
10-02
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"...jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities
jQuery 3.1_jquery_
10-04
事件处理是jQuery的一个关键部分，它提供了优雅的方式来绑定和触发事件。`.on()`方法是用于绑定事件的主要方式，如`$("#element").on("click", function() {...})`会在元素被点击时执行回调函数。同时，`.off()`可以...
jquery_api.rar_jquery a_jquery api
09-24
　本文档旨在帮助广大javascript爱好者快速了解jquery库，以及供广大应用jquery进行开发的人员 提供一个速查手册！ 本文档资源来自于jquery.org.cn,部分内容直接翻译或copy自jquery.com！感谢jquery框架开发者 John ...
Java Script-对象属性
Swxctx
08-13 1323
concat() 连接两个或更多的数组，并返回结果。 evrery() 检测数值元素的每个元素是否都符合条件。 filter() 检测数值元素，并返回符合条件所有元素的数组。 indexOf() 搜索数组中的元素，并返回它所在的位置。 join() 把数组的所有元素放入一个字符串。 lastindexOf() 返回一个指定的字符串值最后
JQuery（24）_JQuery 的 Ajax
魏宇轩
12-14 3990
本系列博客汇总在这里：JQuery 汇总 JQuery 的 Ajax一、说明 一、说明
JQuery（7）_Jquery 子元素选择器
魏宇轩
12-13 2780
本系列博客汇总在这里：JQuery 汇总 Jquery 子元素选择器一、子元素选择器1、:nth-child(index/even/odd/equation)2、:first-child3、:last-child4、: only-child二、代码演示 一、子元素选择器 1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)...
JQuery（22）_JQuery 常用的遍历节点方法
魏宇轩
12-13 1578
本系列博客汇总在这里：JQuery 汇总 JQuery 常用的遍历节点方法一、常用的遍历节点方法1、children()2、next()3、prev()4、siblings()二、代码演示 一、常用的遍历节点方法 1、children() 取得匹配元素的所有子元素组成的集合，该方法只考虑子元素而不考虑任何后代元素。 2、next() 取得匹配元素后面紧邻的同辈元素的集合。 3、prev() 取得...
JQuery（9）_Jquery 选择器练习
魏宇轩
12-13 854
本系列博客汇总在这里：JQuery 汇总 练习1、给网页中所有的 元素添加 onclick 事件。2、使一个特定的表格隔行变色。3、对多选框进行操作，输出选中的多选框的个数。 1、给网页中所有的 元素添加 onclick 事件。 2、使一个特定的表格隔行变色。 3、对多选框进行操作，输出选中的多选框的个数。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值