jQuery2

最新推荐文章于 2022-03-24 16:22:51 发布

dingxiaozhuang

最新推荐文章于 2022-03-24 16:22:51 发布

阅读量141

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Judith__/article/details/108721080

版权

一、jQuery事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery事件</title>
</head>
<style>
	
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
		//方式一
		function f1(){
			alert(1);
		}
		
		//方式二
		$(function(){
			$("#p2").click(function(){
				alert(2);
			});
			
			//方式三
			$(".p3").click(action);//点击之后就会出现
			
			
			//方式四
			$("#div02>.ul").on("click",".me",dianwo);
			
			//鼠标触摸事件
			$("#p2").mouseover(function(){
				console.log("触摸了一下");
			});
			
			//鼠标移除事件
			$("#p2").mouseout(function(){
				console.log("离开了！")
			});
			
			//鼠标单击文本框事件
			$("div>#name").click(useNameAction);
			
			//光标离开文本框事件
			$("div>#input").blur(userNameCheck);
			
		});
		function action(){
			alert(3);
		};
		
		function dianwo(){
			console.log("冒泡点击事件");
		}
</script>
<body>
		<p onclick="f1()">按钮1</p>
		<p id="p2">按钮2</p>
		<p class="p3">按钮2</p>
		<div class="div01">
			姓名：<input id="name" type="text" value="填写姓名" />
		</div>
		<div>
			<ul class="ul">
				<li class="me"></li>
			</ul>
		</div>
		<ul>
			<li class="me"></li>
		</ul>
		
</body>
</html>