第一章 JQuery入门 ② 代码

1.课前测试

表单校验：
1.创建一个表单，包含用户名和邮箱两个表单元素
2.点击提交按钮或光标离开文本框的时候触发校验
3.用户名不能空，长度必须是4-10。
邮箱不能空，长度6-50，必须有@和. 而且 .在@后面

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
		<style type="text/css">
			.err{
				color:red;
				font-size:8px;
			
			}

		</style>
		
	</head>

	<body>
		<!-- ///*表单校验：
		1.创建一个表单，包含用户名和邮箱两个表单元素
		2.点击提交按钮或光标离开文本框的时候触发校验
		3.用户名不能空，长度必须是4-10。
		  邮箱不能空，长度6-50，必须有@和. 而且 .在@后面*/ -->
		<form action="" method="get" onsubmit="return checkAll()">
		<h3>用户名/邮箱验证</h3>
		<p>
			用户名(长度必须是4-10):<br/>
			<input type="text" name="username" id="username" placeholder="用户名(长度必须是4-10)" onblur="checkUsername()"/>
			<div id="usernameTip" class="err"></div>
		</p>
		<p>
			邮箱(长度6-50):<br/>
			<input type="text" name="email" id="email" placeholder="邮箱(长度6-50)" onblur="checkemail()"/>
			<div id="useremailTip" class="err"></div>
		</p>
		<input type="submit" value="提交"/>
		<input type="reset" value="重置"/>
		</form>


	<script type="text/javascript">
		function checkUsername(){
			
		
			if(username.value==""){

				usernameTip.innerHTML="错误！用户名不能为空";
				return false;
			}
			
			if(username.value.length<4 || username.value.length>10){
				
				usernameTip.innerHTML="错误！用户名长度不对，长度必须是4-10";
				return false;
			}
			
			
			usernameTip.innerHTML="";
			return true;
		}
		function checkemail(){
			var atPos = email.value.indexOf("@");
			var dotPos = email.value.indexOf(".");
			
			if(email.value.length<6  || email.value.length>50 ){

				useremailTip.innerHTML="错误！email长度不对，长度必须为6-50";
				return false;
			}

			if( atPos==-1 || dotPos==-1 ){

				useremailTip.innerHTML="错误！email不含有@和.";
				return false;
			}
			if(atPos > dotPos || atPos + 1 == dotPos){

				useremailTip.innerHTML="错误！email中.在@后前面";
				return false;
			}

			useremailTip.innerHTML="";
			return true;
			
		}
		function checkAll(){
		
		var isUsernameOk = checkUsername();
		
		var isemailOk =checkemail();

		if(isUsernameOk && isemailOk){

			return true;
		}
		return false;
	
	}
	
	</script>
		
	</body>
</html>

运行结果如下：
#pic_center

1. js用法对比jq用法案例演练加法 >0620 Noname1

jquery对象和js对象的互相转换
jQuery操作CSS样式

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
	.txt{
		border:1px solid black;
		height:30px;
	}
  </style>


 </head>

 <body>

 <input type="text" name="num1" id="num1" placeholder="数字1"/>
 <input type="button" id="btnAdd" value="+"/>
 <input type="text" name="num2" id="num2" placeholder="数字2"/>
 =
 <span id="res">结果</span>
  
<!--引入jq-->
 <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
  
	//页面加载事件
	//window.onload=function(){}
	//jq页面加载事件
	/*$(document).ready(function(){
		alert(123);
	})*/
	//jq页面加载事件，简化版
	$(function(){
		//修饰文本框样式
		//一个一个设值行内样式
		//$("#num1,#num2").css("border","1px solid black");
		//$("#num1,#num2").css("height","30px");
		//批量设置行内样式
		/*$("#num1,#num2").css({
			border:"1px solid black",
			height:30
		})*/

		//设置元素的类样式
		$("#num1,#num2").addClass("txt");

		//绑定按钮单击事件
		//btnAdd.onclick=function(){}
		
		//jq绑定按钮单击
		$("#btnAdd").click(function(){
			 //val():获取表单元素的值
			 var v1 = $("#num1").val();
			 var v2 = $("#num2").val();
			 //计算加法
			 var he =Number(v1)+Number(v2);
			 //将结果设置到span中
			 //html():获取非表单元素的内容
			 //html(内容):设置非表单元素的内容
			 $("#res").html(he);
		})
	})

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

运行结果如下：

2. jQuery动画效果

代码如下：

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
 
  </style>


 </head>

 <body>
  

 <!--引入jq-->
 <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
 <!--定义内部js代码块-->
 <script type="text/javascript">
  //测试$
  //alert($);
  //alert(jQuery);
  //在页面中添加div，设值div样式,点击div的时候实现动画效果
	$("<div></div>").css({
		border:"1px solid red",
		backgroundColor:"red",  //backgroundColor
		width:"200px",
		height:"200px",
		position:"absolute",
		top:"50px",
		left:"100px"
	}).click(function(){
		$(this).animate({left:"+=200"},1000)
		       .delay(200)
			   .animate({width:"+=100",height:"+=100"},1000)
			   .delay(200)
			   .animate({width:"-=50",height:"-=50"},1000)
			   .delay(200)
			   .slideUp();
				
	})
	.appendTo("body");
//appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。（参考jQuery教程）
  </script>
 </body>
</html>

运行结果如下：
#pic_center