WEB阶段_JS篇（附代码笔记）

【注意】：

demo1.css

h1{
	color:yellow;
	font-size: 80px;
}

check.js

//	alert("hello")
		function checkForm(){
			//获得文本框的值，通过标签的id	
			var username = document.getElementById("username").value;
	//				var val = username.value; //获得文本框的值，通过value是该标签的值，用链式表达式如上
	//				alert(username);
			if(username == ""){
				alert("用户名不能为空");
				return false;//表示form表单那里提交不了
			}
			
			// 校验密码：
			var password = document.getElementById("password").value;
			if(password == ""){
				alert("密码不能为空");
				return false;
			}
			
			// 校验确认密码:
			var repassword = document.getElementById("repassword").value;
			if(repassword != password){
				alert("两次密码输入不一致！");
				return false;
			}
			
			// 校验邮箱:
			var email = document.getElementById("email").value;//email代表输入的值
			// JS校验正则表达式就有两个方法:String对象中的match方法,一个是正则对象中的test方法.
			// str.match("正则表达式");  正则.test("字符串");
			
			//若email不等于/.../的内容，那么就是错误的
			if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){   //day08截图有解释，//表示开始和结束（作为字符串形式），^表示字符串开始位置，匹配字母数字_-任意个，匹配@符号....
				alert("邮箱格式不正确！");
				return false;
			}
			
		}

（一）、案例一：使用JS完成图片滚动效果

1、window对象的一个定时操作

2、案例一：使用JS完成图片滚动效果

	
		
		
		
		
		
		
	
	
	
		
		

			
			

				

					
				
				

					
				
				

					登录
					注册
					购物车
				
				
			
	
			
			

			
			
			

				首页  
				电脑办公  
				手机数码  
				烟酒糖茶  
			
	
			
				
			
			

				
			
	
			
			
			

				
				

					热门商品
				
				
				

					
					

						
					
					
					

						

							

								
							
							

								
							
							

								
							
							

								
							
						
						
						

							

								
							
							

								
							
							

								
							
							

								
							
							

								
							
							

								
							
						
					
				
			
	
			
			
			

				 
			
	
			
			
			

				
				

					最新商品
				
				
				

					

						
					
					
					

						

							

								
							
							

								
							
							

								
							
							

								
							
						
						
						

							

								
							
							

								
							
							

								
							
							

								
							
							

								
							
							

								
							
						
					
				
			
	
			
			

				
			
	
			
			

				
					
					
					    关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 

					
					Copyright © 2008-2030 老韩商城 版权所有 
				
			
	
		
	

（二）、案例二：使用JS弹出广告

1、JS的BOM对象一

在打开新窗口时，name参数用于设置新窗口的名称。这个名称可以在后续的代码中被引用，以便对新窗口进行操作。通过设置一个特定的名称，可以确保新窗口被唯一标识，以方便其他代码对其进行控制或操作。对于指定name为“百度”，则表示新窗口的名称为“百度”，其他代码可以使用这个名称来引用或操作该窗口。

	
		
		
		
	
	
		02-HTML

		
		
		
		
		
		
		
		链接
	

2、JS的BOM对象二

	
		
		
		
		
		
	
	
		03-HTML（处于中间的页面）
		链接
		

		
		

		
		
		

		

	

3、JS的BOM对象三

 

	
		
		
		
		
		
	
	
		04-HTML
		
	

4、案例二：使用JS定时弹出广告

或使用window.setTimeout("show()",5000);与window.setTimeout("hide()",5000);也可以！

	
		
		
		
		
		
		
	
	
	
		
		

			

				
			
			
			

				

					
				
				

					
				
				

					登录
					注册
					购物车
				
				
			
	
			
			

			
			
			

				首页  
				电脑办公  
				手机数码  
				烟酒糖茶  
			
	
			
				
			
			

				
			
	
			
			
			

				
				

					热门商品
				
				
				

					
					

						
					
					
					

						

							

								
							
							

								
							
							

								
							
							

								
							
						
						
						

							

								
							
							

								
							
							

								
							
							

								
							
							

								
							
							

								
							
						
					
				
			
	
			
			
			

				 
			
	
			
			
			

				
				

					最新商品
				
				
				

					

						
					
					
					

						

							

								
							
							

								
							
							

								
							
							

								
							
						
						
						

							

								
							
							

								
							
							

								
							
							

								
							
							

								
							
							

								
							
						
					
				
			
	
			
			

				
			
	
			
			

				
					
					
					    关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 

					
					Copyright © 2008-2030 老韩商城 版权所有 
				
			
	
		
	

（三）、使用JS完成表单的提示和校验

1、使用JS完成注册页面的提示和校验

	
		
		
		
		
		
		
	
		
	
	
	
		
		
		

			

				

					
				
				

					
				
				

					登录1
					注册
					购物车
				
				
  
			
			
			

				

					
首页
					
首页
					
首页
					
首页
				
			
			
			

				

					

						

							

								
用户名
								

							
							

								
密码
								

							
							

								
确认密码
								

							
							

								
性别
								
男
									女
								
							
							

								
籍贯
								

									
										--请选择--
										
									
									
										--请选择--
										
									
								
							
							

								
爱好
								

									篮球
									足球
									排球
									羽毛球
									蛋球
								
							
							

								
邮箱
								

							
							

								

							
							
						
					
				
			
			
			

				
			
			
			
			
		
		
		
		
	

（四）、使用JS完成表格的隔行换色

1、data

	
		
		
		
		
	
	
		

			

			

				
分类的ID
				
分类的名称
				
分类的描述
				
操作
			
			
			

			

				
1
				
手机数码
				
手机数码
				
修改|删除
			
			

				
2
				
电脑办公
				
电脑办公
				
修改|删除
			
			

				
3
				
烟酒糖茶
				
烟酒糖茶
				
修改|删除
			
				

				
4
				
衣服包包
				
烟酒糖茶
				
修改|删除
			
				

				
5
				
汽车用品
				
烟酒糖茶
				
修改|删除
			
			
	
		
	

2、left

	
		
		
	
	
		
		
分类管理
		
商品管理
		
订单管理
	

3、right

 

	
		
		
	
	
		
欢迎，欢迎，热烈欢迎~！
	

4、top

 <是小于；>是大于

	
		
	
	
		
欢迎来到黑马商城
		数据 a < 6
		数据 a › 10	
	

5、案例四：网站后台页面的显示

（五）、使用JS完成复选框的全选和全不选

1、data

	
		
		
		
		
	
	
		

			

				

					

						
						
					
				
				

					

					
分类的ID
					
分类的名称
					
分类的描述
					
操作
					
				
			
			

				

					

					
1
					
手机数码
					
手机数码
					
修改|删除
				
				

					

					
2
					
电脑办公
					
电脑办公
					
修改|删除
				
				

					

					
3
					
烟酒糖茶
					
烟酒糖茶
					
修改|删除
				
					
				

					

					
4
					
衣服包包
					
烟酒糖茶
					
修改|删除
				
				

					

					
5
					
汽车用品
					
烟酒糖茶
					
修改|删除
				
			
	
		
	

2、left

	
		
		
	
	
		
		
分类管理
		
商品管理
		
订单管理
	

3、right

	
		
		
	
	
		
欢迎，欢迎，热烈欢迎~！
	

4、top

	
		
	
	
		
欢迎来到黑马商城
		数据 a < 6
		数据 a › 10	
	

5、案例五：网站的后台页面的显示

（六）、使用JS完成省市二级联动效果

1、DOM对象的操作一

创标签-创文本-文本如标签-标签再入标签

	
		
		
			

	
	
		
		
		

			
上海
			
北京
		
	

2、JS的全局函数

这段代码是将给定的URL字符串进行编码，返回编码后的结果。编码是指将URL中的特殊字符转换为表示该字符的十六进制ASCII码，并在其前面加上"%"符号。encodeURI()函数只对URL中的非字母数字字符进行编码，而不会对整个URL进行编码。

3、案例六：使用JS完成省市的二级联动的效果

	
		
		
		
		
		
		
	
		
	
	
	
		
		
		

			

				

					
				
				

					
				
				

					登录1
					注册
					购物车
				
				
  
			
			
			

				

					
首页
					
首页
					
首页
					
首页
				
			
			
			

				

					

						

							

								
用户名
								

							
							

								
密码
								

							
							

								
确认密码
								

							
							

								
性别
								
男
									女
								
							
							

								
籍贯
								

									
										--请选择（省）--
										广东省
										广西省
										云南省
										江苏省
										浙江省
									
									
										--请选择（市）--
										
									
								
							
							

								
爱好
								

									篮球
									足球
									排球
									羽毛球
									蛋球
								
							
							

								
邮箱