homework/朱瑞/jinjie15/jinjie15.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JQuery常用方法&ajax</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
	*{margin:0; padding:0; box-sizing:border-box;}
	ul,li{list-style:none;}
	.clearfix{*zoom:1;}
	.clearfix:after{
		display:block;
		content:''; 
		clear:both;
	}
	a{
		color:green; 
		font-size:14px; 
		text-decoration:none;
	}
	#div2 .box2{
			width: 150px;
			height: 300px;
			background: #ccc;
			text-align: center;
			position: fixed;
			top: 0;
			right: 0;
		}
#div3 .box3{
			border: 1px solid #ccc;
			width: 150px;
			height: 150px;
		}
</style>
</head>
<body>
	<div id="div1">
		<h3>1.当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色</h3>
		<button class="btn">点击变换颜色</button>
  </div>
  <div id="div2">
		<h3>2.当窗口滚动时，获取垂直滚动距离</h3>
		<div class="box2">
			<p>div垂直的滚动距离为:<span>0px</span></p>
		</div>
  </div>
  <div id="div3">
		<h3>3.当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色</h3>
		<div class="box3"></div>
	</div>  
    <div id="div4">
		<h3>4.当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字</h3>
		<input class="txt" type="text" placeholder="请输入英文字母">
		</div>
    <div id="div5">
		<h3>5.当选择 select 后，获取用户选择的内容</h3>
		<select name="" class="good">
			<option value="1">舞蹈</option>
			<option value="2">瑜伽</option>
			<option value="3">音乐</option>
			<option value="4">旅行</option>
		</select>
		<p>用户选择的内容是:<span></span></p>
	</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
	$(document).ready(function(){
		$("#div1 .btn").on("click",function(){
			$(this).css("background-color","red");
			setTimeout(function(){
				$("#div1 .btn").css("background-color","blue");
			},500);
		});

		/*$(document).on("scroll",function(){
			console.log($(this).scrollTop());
		});
*/
		$(window).on("scroll",function(){
				$("#div2 .box2 span").text($(window).scrollTop()+"px");
			});

		$("#div3 .box3").on("mouseenter",function(){
			$(this).css("background-color","red");
		});
		$("#div3 .box3").on("mouseleave",function(){
			$(this).css("background-color","");
		});

		$("#div4 .txt").on("focus",function(){
			$(this).css("border","1px solid blue");
		});
		$("#div4 .txt").on("change",function(){
			$(this).val($(this).val().toUpperCase());
		});
		$("#div4 .txt").on("blur",function(){
			$(this).css("border","");
			if($(this).val()!=""){
				console.log($(this).val());
			}
		});

		$("#div5 .good").on("change",function(){
			//console.log($(this).val());
			$("#div5 span").text($(".good option:selected").text());
		});


	});

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