jQuery事件

最新推荐文章于 2024-07-30 11:51:58 发布

小哦--

最新推荐文章于 2024-07-30 11:51:58 发布

阅读量87

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sundanping_123/article/details/100275693

版权

jQuery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		
		$(function(){


			// 在获得焦点的时候做什么事情
			/*$('#input01').focus(function(){
				alert('获得焦点')
			})*/

			//focus 一般用来让input元素开始就获取焦点，只能是一个元素获得焦点
			$('#input01').focus();


			$('#input01').blur(function(){

				// 获取input元素的value值用 val()
				var sVal = $(this).val();
				alert(sVal);

			})


			$('#form1').submit(function(){

				//alert('提交');

				// 阻止默认的提交行为
				return false;

			})
		})

	</script>
</head>
<body>
	<form id="form1" action="http://www.baidu.com">
		<input type="text" name="dat01" id="input01">
		<input type="text" name="dat02" id="input02">
		<input type="submit" name="" value="提交" id="sub">
	</form>
</body>
</html>

鼠标移入移出事件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		
		$(function(){

			// 鼠标移入，移入的子元素也会触发
			$('.con').mouseover(function(){
				alert('移入');
			})

			$('.con').mouseout(function(){
				alert('移出');
			})


			// 鼠标移入，移入的子元素不会触发
			/*

			$('.con2').mouseenter(function(){
				alert('移入');
			})

			$('.con2').mouseleave(function(){
				alert('移出');
			})
			
			合并成下面的写法：

			*/

			$('.con2').hover(function(){
				alert('移入')
			},function(){
				alert('移出')
			})
		})

	</script>
	<style type="text/css">
		.con,.con2{
			width:200px;
			height:200px;
			background-color:gold;
		}

		.box,.box2{
			width:100px;
			height:100px;
			background-color:green;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="box"></div>
	</div>	
	<br />
	<br />
	<br />
	<br />
	<div class="con2">
		<div class="box2"></div>
	</div>
</body>
</html>

resize:浏览器窗口大小发生改变：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		
		$(window).resize(function(){

			var $w = $(window).width();

			document.title = $w;
		});

	</script>
</head>
<body>
	
</body>
</html>