jQuery七：jQuery事件处理方法；$(“选择器表达式“).事件(function(){})~~~

最新推荐文章于 2021-09-23 13:22:12 发布

小懒羊爱吃草

最新推荐文章于 2021-09-23 13:22:12 发布

阅读量305

点赞数 1

分类专栏：（5）常用功能与过滤器、监听器、FreeMarker；

本文链接：https://blog.csdn.net/csucsgoat/article/details/112805568

版权

（5）常用功能与过滤器、监听器、FreeMarker；专栏收录该内容

46 篇文章 12 订阅

订阅专栏

页面元素需要添加事件，jQuery提供了完整的支持；其基本流程是先使用选择器选择页面元素，然后调用方法，就能该页面元素添加上方法！

需要注意：（1）先用选择器选择页面元素，然后页面元素再调用方法！！！这个基本流程；（2）function匿名函数的写法；（3）很多css的属性要清楚，属性的单词不要写错；（4）jQuery事件的命名和原先JavaScript中的命名有点不一样哦；（比如html中是onclick，jQuery中是click，其实无所谓啦，jQuery就是这样命名的而已，，）

3.示例2（增）这个时候就需要用到event参数了

一：jQuery事件处理方法简介

jQuery对事件提供了完整的支持，并简化了使用办法；

常用事件：

二：准备工作：

<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title>

<style>
.myclass {
	font-style: italic;
	color: darkblue;
}
/* 高亮css类 */
.highlight {
	color: red;
	font-size: 30px;
	background: lightblue;
}
</style>

</head>

<body>
	<div class="section">
		<h2>jQuery选择器实验室</h2>
		<input style="height: 24px" id="txtSelector" />
		<button id="btnSelect" style="height: 30px">选择</button>
		<hr />
		<div>
			<p id="welcome">欢迎来到选择器实验室</p>
			<ul>
				<li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
						style="color: darkgreen" href="http://www.so.com">360</a>
				</span>
				</li>
				<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
						style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
				</span>
				</li>
				<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
						<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
				</span>
				</li>
			</ul>
	
			<p>你好</p>		
            <span class="myclass ">我是拥有myclass类的span标签</span>
			<p class="myclass">我是拥有myclass的p标签</p>
			<form id="info" action="#" method="get">
				<div>
					用户名：<input type="text" name="uname" value="admin" /> 密码：<input
						type="password" name="upsd" value="123456" />
				</div>
				<div>
					婚姻状况： <select id="marital_status">
						<option value="1">未婚</option>
						<option value="2">已婚</option>
						<option value="3">离异</option>
						<option value="4">丧偶</option>
					</select>
				</div>
				<div class="left clear-left">
					<input type="submit" value="提交" /> <input type="reset" value="重置" />
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
	<script type="text/javascript">
	
	</script>
</body>
</html>

三：示例

1.示例1：

可以发现，jQuery调用事件，还是先用选择器选择页面元素，然后页面元素再调用方法！！！

注意下面的写法！！！！！匿名函数之类的~~~

	<script type="text/javascript">
	// function()写成了一个匿名函数
		$("p.myclass").on("click",function(){
			// $(this)指当前事件产生的对象；在这儿$(this)就是指的p.myclass这个p标签
			$(this).css("background-color","red");//这样一看，很多css属性的单词要记熟，不能出错哎
		})
	</script>

效果：

上面代码的简化形式：使用jQuery事件时候，一般使用简写形式！！！！！

	<script type="text/javascript">
	// function()写成了一个匿名函数
		$("p.myclass").on("click",function(){
			// $(this)指当前事件产生的对象；在这儿$(this)就是指的p.myclass这个p标签
			$(this).css("background-color","red");//这样一看，很多css属性的单词要记熟，不能出错哎
		})
		
		// 上面的简写形式
		$("span.myclass").click(function(){
			$(this).css("background-color","yellow");
		})
	</script>

…………………………

2.示例2：

用户名输入框，当键盘输入的时候，文本颜色变成红色：

	<script type="text/javascript">
		$("input[name='uname']").keypress(function(){
			$(this).css("color","red");
		})
	</script>

效果：

上面加点逻辑：只有当用户名框中输入空格时才变红；

3.示例2（增）这个时候就需要用到event参数了

预备内容：event参数的内容

	<script type="text/javascript">
		$("input[name='uname']").keypress(function(event){
			console.log(event);
			$(this).css("color","red");
		})
	</script>

当知道空格这个字符对应的keyCode为32后，就可以在程序中加以判断处理：

	<script type="text/javascript">
		$("input[name='uname']").keypress(function(event){
			if(event.keyCode == 32){
				$(this).css("color","red");
			}		
		})
	</script>

效果：