JQ实现商品左右选择

一、实现商品左右移动(只需要更改script代码)#

1.主要通过按钮事件加载文件事件
2.通过append()方法添加
3.leftSelect option：selected 之前学过用来选择当前选项

主要代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
		$("#a1").click(function(){ //>>这个选项
						
		//将被选中项添加到右边
			$("#rightSelect").append($("#leftSelect option:selected"));
									
		//将左边所有商品移动到右边
		$("#a2").click(function(){
			$("#rightSelect").append($("#leftSelect option"));
								});
			});	
	});

具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
				$(function(){
					$("#a1").click(function(){ //>>这个选项
						
						//将被选中项添加到右边
						$("#rightSelect").append($("#leftSelect option:selected"));
									
						//将左边所有商品移动到右边
					$("#a2").click(function(){
						$("#rightSelect").append($("#leftSelect option"));
										});
					});	
				});								
		</script>
	</head>
	<body>			
			<table border="1px" width="400px">
				<tr>
					<td>分类名称</td>
					<td><input type="text" value="手机数码"/></td>
				</tr>
				<tr>
					<td>分类描述</td>
					<td><input type="text" value="这里面都是手机数码"/></td>
				</tr>
				<tr>
					<td>分类商品</td>
					<td>
						<!--左边-->
						<div style="float: left;">
							已有商品<br />
							<select multiple="multiple" id="leftSelect">
								<option>华为</option>
								<option>小米</option>
								<option>锤子</option>
								<option>oppo</option>
							</select>
							<br />
							<a href="#" id="a1" > >> </a> <br />
							<a href="#" id="a2"> >>> </a>
						</div>
						<!--右边-->
						<div style="float: right;"> 
							未有商品<br />
							<select multiple="multiple" id="rightSelect">
								<option>苹果6</option>
								<option>肾7</option>
								<option>诺基亚</option>
								<option>波导</option>
							</select>
							<br />
							<a href="#"> << </a> <br />
							<a href="#"> <<< </a>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="提交"/>
					</td>
				</tr>
			</table>			
		</body>
</html>

oppo右移之前：

选择oppo右移之后

JQ实现省市联动

一、JQ中增加节点操作

  1. append：添加子元素
    $("#div1").append("娘俩!");

  2. appendTo：给自己找个爹，将自己添加到别人家里
    $("啊哈哈哈").appendTo("#div1");

  3. prepend：在子元素前面添加
    ("#div1").prepend("娘俩!");

  4. after：在自己的后面添加一个兄弟
    $("#div1").after("来,互相伤害呀!");

代码具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			//文档加载完成时间
			$(function(){
				$("#btn1").click(function(){
					//$("#div1").append("娘俩!");
					//$("啊哈哈哈").appendTo("#div1");
					//("#div1").prepend("娘俩!");					
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="点我" id="btn1"><br>
		<div id="div1">
			这里添加内容
		</div>
	</body>
</html>

二、JQ遍历

  • JQ对象调用
1
2
3
$(数组名).each(function(下标,数组值){
				console.log(下标+"==="+数组值);  //控制台输出
			});
  • JQ函数调用
1
2
3
$.each(数组名,function(下标,数组值){
				console.log(下标+"==="+数组值);  //控制台输出
			});

具体实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			//1.先准备好每个市
			var  cities = ["深圳市","东莞市","惠州市","广州市"];						
			//2.如何遍历
			
			//JQ对象调用
			$(cities).each(function(i,n){
				console.log(i+"==="+n);  //控制台输出
			});
				
			//JQ函数调用
			$.each(cities,function(i,n){
				console.log(i+">>>"+n);   //控制台输出
			});  
					
		</script>
	</head>
	<body>
	</body>
</html>

举例结果如下：

JQ遍历原理介绍：

具体实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			/*
			
			//1.先准备好每个市
			var  cities = ["深圳市","东莞市","惠州市","广州市"];						
			//2.如何遍历
		
			//JQ对象调用
			$(cities).each(function(i,n){
				console.log(i+"==="+n);
			});
				
			//JQ函数调用
			$.each(cities,function(i,n){
				console.log(i+">>>"+n);
			});  			
			*/
		   
			//1.先准备好每个市
			var  cities = ["深圳市","东莞市","惠州市","广州市"];			
			
			function callback1(i,n){
				console.log("123"+"---"+i+"---"+n);
			}
			
			//遍历数据
			function bianli(arr,callback1){
				
				for(var i=0;i<arr.length;i++)
				{
					 var item=arr[i]; //存入
					 callback1(i,item);
				}
				
			}
			
			//调用	
			bianli(cities,callback1);

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

JQ遍历原理如下：

三、省市联动
　　在JS实现省市联动之后进行优化

技术分析：

1
2
3
4

1.准备工作：城市信息(把JS的代码拿过来用)
2.添加节点：append()等
3.JQ遍历:$.each(数组名,function(下标,数字值){});

步骤分析：

1
2
3
4
5
6
1.导入JQ文件
2.文档加载事件：页面初始化  $(function(){});
3.确定事件：change事件
4.触发函数：得到选中的省份  $("#province").change(function(){});
5.得到城市，遍历城市   $("#province").change(function(){});
6.将便利的城市+++省份   $("#city").append("<option>"+n+"</option>");

具体代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>	
		//1.先准备好每个市
			var  provinces = [
				["深圳市","东莞市","惠州市","广州市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"],
				];						
		//2.文档加载事件
		$(function(){
			//4.选中省份
			$("#province").change(function(){
				//5.得到城市
				var cities=provinces[this.value];
				$("#city").empty();  //采用JQ的方式清空!!!!!!!!!!!!!!!!!!!
				//5.遍历城市数据
				$("#province").change(function(){
					$("#city").append("<option>"+n+"</option>");
				});
				
			});
		});					
		</script>
	</head>
	
	<body>
		<!--选择省份-->
		<select  id="province">
				<option value="-1">---选择省份</option>
				<option value="0">广东省</option>
				<option value="1">湖南省</option>
				<option value="2">福建省</option>
		</select>		
		<!--选择城市-->
			<select id="city">
		
			</select>
	</body>
</html>

页面结果如下：

JQ实现表格隔行换色

一、隔行换色

主要代码如下：

1
2
3
4
$(function(){
			$("tr:odd").css("background-color","blue");  //找到tr标签之后odd(奇数)
			$("tr:even:gt(0)").css("background-color","red"); //even(偶数) gt(0)过滤器从o开始
		});

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$("tr:odd").css("background-color","blue");
				$("tr:even:gt(0)").css("background-color","red");				
			});
		</script>
		
	</head>
	<body onload="init()">   //onload时间放在body体内
		<table border="1px" width="600px" id="tab">  给表格一个id名方便得到表格
			
			<tr >
				<td>
					<input type="checkbox" />   <!--复选框-->
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			
			<!--第一行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			
			<!--第二行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>2</td>
				<td>日用品</td>
				<td>洗衣粉</td>
				<td>这里面的洗衣服很干净的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第三行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr> 
			
			<!--第四行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第五行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>	
		</table>
	</body>
</html>

页面结果如下：

二、表格全选和全不选

1.所有函数默认具有(this)
2.属性选择器： 选择器[属性名='属性值']
3.更改属性的方法prop("要改的值",改成什么样子)

1主要代码如下：

1
2
3
4
5
6
7
8
9
$(function(){
	$("#checkAll").click(function(){
		//获取当前选中状态
		this.checked;  //代表当前函数所有者
		//获取所有分类项的checkbox
		//  属性选择器：选择器[属性名='属性值']
		$("input[type='checkbox']:gt(0)").prop("checked",this.checked); //修改属性prop方法	
	});
});
1
2
3
4
5
6
7
8
9
$(function(){
	$("#checkAll").click(function(){
		//获取当前选中状态
		this.checked;  //代表当前函数所有者
		//获取所有分类项的checkbox
		//  层级选择器 tbody tr td input
		$("tbody>tr>td>input").prop("checked",this.checked); 	//使用选择器1>选择器2
	});
});

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$("tr:odd").css("background-color","blue");
				$("tr:even:gt(0)").css("background-color","red");				
			});
		
		//全选和全不选:
			
				$(function(){
					$("#checkAll").click(function(){
						//获取当前选中状态
						this.checked;  //代表当前函数所有者
						//获取所有分类项的checkbox
						//  属性选择器：选择器[属性名='属性值']
						$("input[type='checkbox']:gt(0)").prop("checked",this.checked); //修改属性prop方法	
					});
				});
			</script>			
	
	</head>
	<body>
			<table border="1px" width="600px" id="tab">
				<thead>
					<tr >
						<td>
							<input type="checkbox" id="checkAll" />
						</td>
						<td>分类ID</td>
						<td>分类名称</td>
						<td>分类商品</td>
						<td>分类描述</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
					<td>1</td>
					<td>手机数码</td>
					<td>华为,小米,尼康</td>
					<td>黑马数码产品质量最好</td>
					<td>
						<a href="#">修改</a>|<a href="#">删除</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>2</td>
					<td>成人用品</td>
					<td>充气的</td>
					<td>这里面的充气电动硅胶的</td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>3</td>
					<td>电脑办公</td>
					<td>联想,小米</td>
					<td>笔记本特卖</td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>4</td>
					<td>馋嘴零食</td>
					<td>辣条,麻花,黄瓜</td>
					<td>年货</td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>5</td>
					<td>床上用品</td>
					<td>床单,被套,四件套</td>
					<td>都是套子</td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				</tbody>
			</table>
			
		</body>
</html>

JQ实现表单属性过滤

一、过滤器

选择标签第一个：##

1
$("标签：first")

主要代码分析：

1
2
3
4
5
6
7
8
9
$(function(){
//2.文档加载事件(页面初始化操作)
			$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:first").css("background-color","green");  //div标签里面的第一个改颜色
			
				});	
			});

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--外部引入css文件-->
		<link rel="stylesheet" href="../../css/style.css">
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			//2.文档加载事件(页面初始化操作)
			$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:first").css("background-color","green");
			
				});	
			});
			
		</script>
	</head>
	
	<body>
		<input type="button" value="过滤出所有div的第一个元素" id="btn1"><br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
				
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span id="four">span</span>
	</body>
</html>

代码结果如下：

匹配所有索引值为偶数的元素(0开始)：##

1
$("标签：even")

匹配所有索引值为奇数的元素(0开始)：##

1
$("标签：odd")

主要代码分析：

1
2
3
4
5
6
7
8
9
10
11

$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:even").css("background-color","green");
				});	
				
				$("#btn2").click(function(){
					$("div:odd").css("background-color","red");
				});
			});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--外部引入css文件-->
		<link rel="stylesheet" href="../../css/style.css">
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			//2.文档加载事件(页面初始化操作)
			$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:even").css("background-color","green");
				});	
				
				$("#btn2").click(function(){
					$("div:odd").css("background-color","red");
				});
			});
			
		</script>
	</head>
	
	<body>
		<input type="button" value="过滤出所有div中偶数位的div" id="btn1"><br />
		<input type="button" value="过滤出所有div中奇数位的div" id="btn2"><br />
		<div id="one">  <!--0-->
			<div class="mini">1-1</div>  <!--1-->
		</div>  
		
		<div id="two">  <!--2-->
			<div class="mini">2-1</div>  <!--3-->
			<div class="mini">2-2</div>  <!--4-->
		</div>
				
		<div id="three">  <!--5-->
			<div class="mini">3-1</div>   <!--6-->
			<div class="mini">3-2</div>   <!--7-->
			<div class="mini">3-3</div>   <!--8-->
		</div>
		<span id="four">span</span>
	</body>
</html>

代码结果如下：

匹配所有大于(>)给定索引值(n)的元素：##

1
$("标签：gt(n)")

只展示部分代码(完整代码只需要把上面的div中value值和点击事件内的div:odd更改为div：gt(2))

1
2
3
4
5
6
7
8
$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					$("div:gt(2)").css("background-color","green");
				});	
				
				
			});

代码结果如下：

二、表单选择器

1
$("input/text/textarea等表单元素")

主要代码如下：

1
2
3
$(function(){
	$("text").css("color","red");
});

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$("text").css("color","red");
			});	
		</script>	
	</head>
	<body>
		<form>
		    <input type="button" value="Input Button"/>
		    <input type="checkbox" />
		
		    <input type="file" />
		    <input type="hidden" />
		    <input type="image" />
		
		    <input type="password" />
		    <input type="radio" />
		    <input type="reset" />
		
		    <input type="submit" />
		    <input type="text" />
		    
		    <select><option>1</option></select>
		
		    <textarea></textarea>
		    <button>Button</button>
		</form>
	</body>
</html>

三、表单内涂色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$(":text").css("background-color","blue");  //text图背景色
				$("#btn1").click(function(){
					$("select option:selected").css("background-color","red");  //选中的项目选中后变红色
				});
			});	
		</script>	
	</head>
	<body>
		<form>
		    <input type="button" value="Input Bustton"/>
		    <input type="checkbox" />
		
		    <input type="file" />
		    <input type="hidden" />
		    <input type="image" />
		
		    <input type="password" />
		    <input type="radio" />
		    <input type="reset" />
		
		    <input type="submit" />
		    <input type="text" />
		    
		    <select multiple="multiple">  <!--多行显示-->
					<option>Option1</option>
			    	<option>Option2</option>
			    	<option>Option3</option>
			</select>
		<input type="button" value="点我" id="btn1" />
		    <textarea></textarea>
		    <button>Button</button>
		</form>
	</body>
</html>

代码结果如下：

JQuery选择器

一、JQuery中的选择器

基础选择器：

  • 元素选择器(标签的名称{})
  • ID选择器(#id的名字{})
  • 类选择器(.类名{})
  • 通配符选择器(*)
  • 选择器选择器(选择器1，选择器2)

基础选择器代码如下：

需要引入外来的css文件<link rel="stylesheet" href="../../css/style.css">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
	padding-left:25px;
}
.onSuccess{
    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
	padding-left:25px;
}
.high{
    color:red;
}


  div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
	border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini { 
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide { 
    display:none;
  }


table		{ border:0;border-collapse:collapse;}
td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even		{ background:#FFF38F;}  /* 偶数行样式*/
.odd		{ background:#FFFFEE;}  /* 奇数行样式*/
.selected		{ background:#FF6500;color:#fff;}

需要引入外来的JQ文件<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>

1
已经在JQuery文件内显示(如果需要可以去提取)

具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--外部引入css文件-->
		<link rel="stylesheet" href="../../css/style.css">
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			//2.文档加载事件(页面初始化操作)
			$(function(){
				//3.给按钮绑定事件
				$("#btn1").click(function(){
					//4.找到id为two的元素变为绿色
					$("#two").css("background-color","palegreen");  //"#two"  #ID的名字
				});	
				
				$("#btn2").click(function(){
					//4.找到mini的元素变为红色
					$(".mini").css("background-color","red");  //".mini"  .类名
				});	
				
				$("#btn3").click(function(){
					//4.找到所有div的元素变为黄色
					$("div").css("background-color","yellow");  //"div"  标签
				});	
				
				$("#btn4").click(function(){
					//4.找到所有div的元素变为黄色
					$("*").css("background-color","black");  //"*" *
				});	
				
				//找出mini类 和 span元素
				$("#btn5").click(function(){
					$(".mini,span").css("background-color","palegreen");
				});
				
			});
			
		</script>
	</head>
	
	<body>
		<input type="button" value="找到id为two的元素" id="btn1"><br />
		<input type="button" value="找到mini的元素" id="btn2"><br />
		<input type="button" value="找出所有div元素" id="btn3"><br />
		<input type="button" value="通配符选择器" id="btn4"><br />
		<input type="button" value="找出mini类 和 span元素" id="btn5"><br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
				
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span id="four">span</span>
	</body>
</html>

1.找到id为two元素的结果如下：

2.找到mini的元素的结果如下：

3.找出所有div元素的结果如下：

4.找出通配符选择器的结果如下：

5.找出mini类和span元素的结果如下：

层级选择器：

  • 子元素选择器：选择器1>选择器2
  • 后代选择器：选择器1 儿孙
  • 相邻兄弟选择器：选择器1+选择器2：找到紧挨的一个弟弟
  • 找出所有弟弟：选择器1~选择器2：找出所有的弟弟

与基本选择器body一致(点击事件有区别)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//找出body下面的子div   
$("#btn1").click(function(){
	$("body > div").css("background-color","palegreen");					
});

//找出body下面的所有div
$("#btn2").click(function(){
	$("body div").css("background-color","palegreen");					
});

//找出id为one的相邻兄弟div
$("#btn3").click(function(){
	$("#one+div").css("background-color","palegreen");					
});

//找出id为two的所有弟弟div
$("#btn4").click(function(){
	$("#two~div").css("background-color","palegreen");					
});

完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../css/style.css" />
		<!--引入JQ的文件-->
		<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
		<!--
			-- 子元素选择器:   选择器1 > 选择器2
			- 后代选择器:  选择器1 儿孙
			- 相邻兄弟选择器 :  选择器1 + 选择器2 : 找出紧挨着的一个弟弟
			- 找出所有弟弟:  选择器1~ 选择器2   : 找出所有的弟弟

		-->
		<script>
			//文档加载事件,页面初始化的操作
			$(function(){
				//初始化操作: 给按钮绑定事件
				//找出body下面的子div   
				$("#btn1").click(function(){
					$("body > div").css("background-color","palegreen");					
				});
				//找出body下面的所有div
				$("#btn2").click(function(){
					$("body div").css("background-color","palegreen");					
				});
				$("#btn3").click(function(){
					$("#one+div").css("background-color","palegreen");					
				});
				$("#btn4").click(function(){
					$("#two~div").css("background-color","palegreen");					
				});
				
			});
		</script>
	</head>
	<body>
		<input type="button" value="找出body下面的子div" id="btn1" />
		<input type="button" value="找出body下面的所有div" id="btn2" />
		<input type="button" value="找出id为one的相邻兄弟div" id="btn3" />
		<input type="button" value="找出id为two的所有弟弟div" id="btn4" />
				
		<br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span id="four">span</span>
	</body>
</html>

属性选择器：

　　找到一些标签内属性值

具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.外部引入jq文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				//通过属性选择器找到 a href
				 $("a[href]").css("color","red");
				 //找到包含href，title
				 $("a[href][title]").css("color","green");
				 //找到包含href，title并且title="testTitle"
				 $("a[href][title='testTitle']").css("color","yellow");
			});
		
			
		</script>
	</head>
	<body>
		<a href="#">href1</a><br />
		<a href="#" title="testTitle">href1 222</a>
	</body>
</html>

JQuery实现定时播放广告

#一、JQ中的动画效果#
　　JS中实现图片显示和隐藏使用的是img.style.display：block(显示)/none(隐藏)
　　Jquery中实现图片显示和隐藏使用的是$("#id名字").hide();/$("#id名字").show();

  • JQ的开发步骤：(将js代码和html页面代码进行分离)
    1. 导入JQ相关文件
  <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
2. 文档加载完成事件：
   $("#id名字").click(function(){});页面初始化操作：绑定事件，启动页面定时器；
//后三个是JS的开发操作(相当于把js要写的文件放在了外部让第一步去添加，然后用文档加载事件完成了之后完成JS的开发操作)
3. 确定相关操作的时间
4. 事件触发函数
5. 函数里面去操作相关的元素

实现隐藏的代码(只展示head内部)：

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
	$(function(){
		//隐藏页面图片
		$("#btn2").click(function(){  //去除标签的id=btn2
			//获得img
			$("#img1").hide();  //图片的id=img1
		});				
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				
				//显示页面图片
				$("#btn1").click(function(){
					//获得img
					//$("#img1").show();
					//$("#img1").slideDown();
					//$("#img1").fadeIn();
					  $("#img1").animate({ wdith:"1000px",opacity:"1"},5000); //透明度opacity
				});
								
				//隐藏页面图片
				$("#btn2").click(function(){
					//获得img
					//$("#img1").hide("100000");
					//$("#img1").slideUp(200);
					//$("#img1").fadeOut();
					  $("#img1").animate({ wdith:"1000px",opacity:"0.2"},5000); //透明度opacity
				});				
			});
		</script>		
	</head>
	<body>
		<input type="button" value="显示" id="btn1"/><br>
		<input type="button" value="隐藏" id="btn2"/><br>
		<img src="../../image/059b5245-e3c8-43bf-80fe-700f0e4e68b8-thumbnail.jpg" width="500px" id="img1">
	</body>
</html>
  • 知识点汇总：
    关于JQ的图片隐藏和显示：

隐藏：

  1. 已经定义好的方法：hide()/slideUp()/fadeOut() —-里面可以加时间
    $("#img1").slideDown(1000);
  2. 自定义的方法：animate() —-里面可以加第一个变量：{属性：值}/第二个变量：时间
    $("#img1").animate({ wdith:"1000px",opacity:"0.2"},5000); //透明度opacity

显示：

  1. 已经定义好的方法：show()/slideDown()/fadeIn() —-里面可以加时间
    $("#img1").slideUp(200);
  2. 自定义的方法：animate() —-里面可以加第一个变量：{属性：值}/第二个变量：时间
    $("#img1").animate({ wdith:"1000px",opacity:"0.2"},5000); //透明度opacity

#二、定时弹出广告(JS的基础上细化)#

步骤分析：

1.导入JQ的文件
2.编写JQ的文档加载事件
3.启动定时器setTimeout("毫秒值");
4.编写显示广告的函数
5.在显示广告里面加一个定时器
6.编写隐藏广告的函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1.导入JQ的文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js"></script >
			<script>
				
				//4.显示广告
				function show(){
					$("#img1").show();
					setTimeout("hide()",3000);//5.写一个定时器(跳到隐藏广告函数hide())
				}
				
				//6.隐藏广告
				function hide(){
					$("#img1").hide();
				}
				
				//2.编写一个文档加载事件+3.写一个定时器(跳到显示广告函数show())
				$(function(){
					setTimeout("show()",3000);
				});
				
			</script>
	</head>
	
	<body>
		<img src="../../image/059b5245-e3c8-43bf-80fe-700f0e4e68b8-thumbnail.jpg" width="200px" id="img1" style="display: none;">	 //先让图片隐藏display显示为none
	</body>
</html>

JQuery

一、JQuery概述
　　JQuery是一个快速、小型、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等变得更为简单，使用易于使用的API，可以跨多个浏览器工作。由于通用性和可扩展性的结合，jQuery已经改变了数百万人编写JavaScript的方式。
特点：

  1. 写更少的代码，做更多的事情
  2. 我们的页面js代码和HTML页面代码分离(动态绑定)

二、JQ入门

简写JQ代码：

1
2
3
$((function(){
  // 在这里写你的代码...
});

五种文件加载写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--导包,引入JQ的文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			
			//js文档加载完成的事件
			window.onload = function()
			{
				alert("window.onload   111");
			}
			
			window.onload = function()
			{
				alert("window.onload   222");  //覆盖上一个的111
			}
			
			/*文档加载完成的事件*/
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
			/*
			 	jQuery  简写成 $
			 */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*
				最简单的写法 
			*/
			$(function(){
				alert("$(function(){");
			});
			
		</script>
	</head>
	<body>
	</body>
</html>

三、JQ操作

  • JQ和JS之间的转换
    JQ对象只能调用JQ的属性和方法
    JS对象只能调用JS的属性和方法

触发click事件—>p/div标签的jQuery代码：

1
$("p/div").click()

具体实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script> //jq一定要有的调用外部js文件
		<script>  

			//JS的方式
			function changeJS(){
				var div=document.getElementById("div1");//获取div标签内容
				//div.innerHTML="JS成功了!" //通过innerHTML更改内容
				
				//JS对象 转成 JQ对象
				$(div).html("转成JQ对象!");   
				
			}
			
			//JQ的方式
			$(function(){	
				
				//按钮绑定事件
				$("#b2").click(function(){  //第二个按钮的id名为b2
					//找到div标签
					$("#div1").html("JQ成功了!");	
								
					//JQ对象 转成 JS对象 
					var $div=$("#div1");	
					var jsDiv=$div[0];//用中间量把div的值放在数组第一位
					jsDiv.innerHTML="转成JS对象!";
					
				});	
	
			});
				
		</script>
	</head>
	<body>
			<input type="button" value="JS修改div内容" onclick="changeJS()" >  //JS通过事件触发函数，函数实现功能
			<input type="button" value="JQ修改div内容" id="b2">  //JQ通过事件对于标签的jQuery代码格式
			<div id="div1">
				这里的内容一会就要被JS或者JQ改掉了!
			</div>
	</body>
</html>

四、开发步骤

  • JQ的开发步骤：(将js代码和html页面代码进行分离)
    1. 导入JQ相关文件
  <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
2. 文档加载完成事件：
   $(function(){});页面初始化操作：绑定事件[$("#id名字").click(function(){});]，启动页面定时器；
//后三个是JS的开发操作(相当于把js要写的文件放在了外部让第一步去添加，然后用文档加载事件完成了之后完成JS的开发操作)
3. 确定相关操作的时间
4. 事件触发函数
5. 函数里面去操作相关的元素

JS控制下拉列表左右选择

一、下拉列表元素左右移动

分析：首先是要做出来一个4*2的表格table，然后第一行第二行放type=text的标签，第四行则是一个type=sumbit的提交按钮。主要是第三行的第二列需要做出来两个div标签的表格(需要通过`div style="float:left;"`浮动让两个div在一行内 )，最后使用`<select multiple="multiple"> `中的multiple属性让下拉表所有元素显示出来。

最简单的展示代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	  <table border="1px" width="500px">
		  
		<tr>
			<td>分类名称</td>
			<td><input type="text" value="手机数码"></td>
		</tr>
		
		<tr>
			<td>分类描述</td>
			<td><input type="text" value="这里面都是手机数码"></td>
		</tr>
		
		<tr>
			<td>分类商品</td>
			<td>
				<!--左边-->
				<div style="float: left;"> <!--左浮动-->
					已有商品<br>
					<select multiple="multiple">  <!--让选择都显示出来-->
						<option>华为</option>
						<option>小米</option>
						<option>锤子</option>
						<option>oppo</option>
					</select>
					<br>
					<a href="#">>></a><br>
					<a href="#">>>></a><br>
				</div>
				
				<!--右边-->
				<div style="float: right;"> <!--右浮动-->
					未有商品<br>
					<select multiple="multiple">  <!--让选择都显示出来-->
						<option>iPhone</option>
						<option>诺基亚</option>
						<option>ipad</option>
						<option>Mac</option>
					</select>
					<br>
					<a href="#">>></a><br>
					<a href="#">>>></a><br>
				</div>
				
			</td>
		</tr>
		
		<tr>
			<td colspan="2"><input type="submit" value="提交"></td>
		
		</tr>	
	   </table>
	</body>
</html>

页面结果如下：

　　在刚才代码的基础上实现左右的元素可以相互挪动。

<select multiple="multiple" id="leftSelect"  ondblclick="selectOne()">
  • multiple：为把下拉表中所有可能列出；
  • ondblclick：表示可以通过双击实现功能

此只展示左边可以一次/多次移动到右边：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	  <script> 
		/*	
			步骤分析：
			1.确定事件：确定为onclick()点击事件
			2.事件触发函数selectOne()
			3.函数要做操作：
					将左边选中的元素--->右边的select中
						1.获取左边的元素
						2.将选中的元素添加到右边的select中
		*/
			function selectOne()
			{
				//1.获取左边的元素
				var leftSelect=document.getElementById("leftSelect");
				var rightSelect=document.getElementById("rightSelect");
				var options=leftSelect.options;    //获取当前的值
				//遍历找到被选中的option
				for(var i=0;i<options.length;i++)
				{
					var option1=options[i]; //当前值放入数组
					if(option1.selected) //如果是左边选中的值
					{
						//2.将选中的元素添加到右边的select中
							rightSelect.appendChild(option1);
					}
				}
			}
	
		//将左边一次性挪过去
			function selectAll()
			{
				//1.获取左边的元素
				var leftSelect=document.getElementById("leftSelect");
				var rightSelect=document.getElementById("rightSelect");
				var options=leftSelect.options;    //获取当前的值
				//遍历找到被选中的option
				for(var i=options.length-1;i>=0;i--) //倒序
				{
					var option1=options[i]; //当前值放入数组
					rightSelect.appendChild(option1);
				}
			}
			
			
		</script>
	</head>
	<body>
	  <table border="1px" width="500px">
		  
		<tr>
			<td>分类名称</td>
			<td><input type="text" value="手机数码"></td>
		</tr>
		
		<tr>
			<td>分类描述</td>
			<td><input type="text" value="这里面都是手机数码"></td>
		</tr>
		
		<tr>
			<td>分类商品</td>
			<td>
				<!--左边-->
				<div style="float: left;"> <!--左浮动-->
					已有商品<br>
					<select multiple="multiple" id="leftSelect"  ondblclick="selectOne()">  <!--让选择都显示出来-->  <!--ondblclick双击可以直接右移-->
						<option>华为</option>
						<option>小米</option>
						<option>锤子</option>
						<option>oppo</option>
					</select>
					<br>
					<a href="#" onclick="selectOne()">>></a><br>
					<a href="#" onclick="selectAll()">>>></a><br>
				</div>
				
				<!--右边-->
				<div style="float: right;"> <!--右浮动-->
					未有商品<br>
					<select multiple="multiple" id="rightSelect">  <!--让选择都显示出来-->
						<option>iPhone</option>
						<option>诺基亚</option>
						<option>ipad</option>
						<option>Mac</option>
					</select>
					<br>
					<a href="#"><<</a><br>
					<a href="#"><<<</a><br>
				</div>
				
			</td>
		</tr>
		
		<tr>
			<td colspan="2">
				<input type="submit" value="提交">
			</td>
		</tr>	
	   </table>
	</body>
</html>

代码结果如下：

JS实现表单检验（使用onfoucs等焦点时间）

二、表单检验(innerHTML属性)

　　在之前JS文档里写的检验表单基础上，完成当用户点击用户名时，就提示“用户名长度不能小于6位”。然后如果用户输入的少于6位就提示”请重新输入!”,正确则提示”注册用户名成功!”

JS中常用事件：

onfocus事件：获取焦点()----onfocus="show()"展示提示句
onblur事件：失去焦点()----onblur="checkUsername"检验
onkeyup事件:按键抬起事件()----onkeyup="checkUsername"检验

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/*
			1.确定事件：onfocus
			2.事件驱动函数
			3.函数需要干一些事情：修改span内容
			*/ 
			function show(){
				var span=document.getElementById("span1");  //获取span标签的当前对象
				span.innerHTML="<font color='red'>用户名长度不能小于6位</font>";	//输出一句话		
			}
			
			
			/*
				校验用户名：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkUsername()
			3.函数需要干一些事情：显示校验结果
			*/
			function checkUsername(){
				var chang=document.getElementById("username").value;  //获取输入的值
				if(chang.length<6)
				{
					var span=document.getElementById("span1");   //获取span标签的当前对象
					span.innerHTML="<font color='red'>请重新输入!</font>";	//输出一句话
				}
				else
				{
					var span=document.getElementById("span1");   //获取span标签的当前对象
					span.innerHTML="<font color='red'>注册用户名成功!</font>";	//输出一句话
				}
			}
		
		</script>
	</head>
	<body>
		<form action="../01-自动轮播图片/图片自动轮播.html">  <!--要用表单去提交-->

			//给input输入里面加名字id 然后加一个show展示的方法  然后给取消焦点事件和按键抬起焦点事件
			用户名：<input type="text" id="username" onfocus="show()" onblur="checkUsername()" onkeyup="checkUsername()">
			//给予一个span标签输出结果 给一个id名字	   
					<span id="span1"></span><br>
			密码：<input type="password" id="password"><br>
			确定密码：<input type="password" id="password"><br>
			邮箱：<input type="text" id="email"><br>
			手机号：<input type="text" id="text"><br>
			<input type="submit" value="提交" >		
		</form>
	</body>
</html>

输入少于6位会提示：

输入满足条件会提示：

表单校验(复杂版)

此为主代码(后面附外部引入的js文件和跳转到的自动轮播文件代码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
			引入外部的js文件  最后要调用其中的对比邮箱正误
		-->
		<script type="text/javascript" src="../regutils.js"></script>
		
		<script>
			/*
			1.确定事件：onfocus
			2.事件驱动函数
			3.函数需要干一些事情：修改span内容
			*/ 
			function showTips(spanID,msg){
				var span=document.getElementById(spanID);  //获取 span标签的id
				span.innerHTML=msg;	  //更改输出span一句话
			}
			
			
			/*
				校验用户名：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkUsername()
			3.函数需要干一些事情：显示校验结果
			*/
			function checkUsername(){
				var chang=document.getElementById("username").value;	
				if(chang.length<6)
				{
					var span=document.getElementById("span1");
					span.innerHTML="<font color='red'>格式不对，请重新输入用户名!</font>";	
					return false;
				}
				else
				{
					var span=document.getElementById("span1");
					span.innerHTML="注册用户名成功!";	
					return true;
				}
			}
			
			
			/*
				校验密码：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkpassword()
			3.函数需要干一些事情：显示校验结果
			*/
						function checkpassword(){
							//获取密码输入
							var chang = document.getElementById("password").value;
		
							//对密码输入进行校验
							if(chang.length < 6)
							{
								var span=document.getElementById("span2");
								span.innerHTML = "<font color='red' size='2'>格式不对，请重新输入密码!</font>";
								return false;
							}
							else
							{
								var span=document.getElementById("span2");
								span.innerHTML = "注册密码成功!";
								return true;
							}
						}
			
			
			/*
			重复校验密码：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkrepassword()
			3.函数需要干一些事情：显示是否正确
			*/
			function checkrepassword(){
				var chang1=document.getElementById("password").value;
				var chang2=document.getElementById("repassword").value;	
				if(chang1!= chang2)
				{
					var span=document.getElementById("span3");
					span.innerHTML = "<font color='red'>对不起,两次密码不一致</font>";
					return false;
				}
				else
				{
					var span=document.getElementById("span3");
					span.innerHTML = "密码一致";
					return true;
				}
			}	
			
			/*
				校验邮箱：
			1.确定事件：onblur 失去焦点
			2.事件驱动函数 checkMail()
			3.函数需要干一些事情：显示校验结果
			*/
			function checkMail(){
				var email=document.getElementById("email").value; //获取当前输入的email值
				var flag=checkEmail(email);  //设置一个flag用来判断输入的email和系统js导入的文件是否相等
				var span=document.getElementById("span4");
				if(flag)  //判断flag是否相等
				{
					span.innerHTML = "邮箱可用!";
					return true;
				}
				else
				{
					span.innerHTML = "<font color='red'>邮箱格式有误!</font>";
					return false;
				}
			}
			
			//校验表格
			function checkForm()
			{
				var flag = checkUsername() && checkpassword() && checkrepassword() && checkMail(); //只有都通过才可以使用
				return flag;
			}
			
		</script>
	</head>
	<body>
		<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >  <!--要用表单去提交-->
			用户名：<input type="text" id="username" onfocus="showTips('span1','输出的用户名必须不低于6位')" onblur="checkUsername()" onkeyup="checkUsername()">
					<span id="span1"></span><br>
			密码：<input type="password" id="password" onfocus="showTips('span2','输出的密码必须不低于6位')" onblur="checkpassword()" onkeyup="checkpassword()">
					<span id="span2"></span><br>
			确定密码：<input type="password"  id="repassword" onfocus="showTips('span3','请输入密码')" onblur="checkrepassword()" onkeyup="checkrepassword()">
					<span id="span3"></span><br>
			邮箱：<input type="text" id="email" onfocus="showTips('span4','请输入邮箱')" onblur="checkMail()" >
					<span id="span4"></span><br>
			手机号：<input type="text" id="email"><br>
			<input type="submit" value="提交" align="center">	
		</form>
	</body>
</html>

代码中使用到的图片自自动轮播.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
			var i=0;
			function changeImg(){
				var img=document.getElementById("img1"); //1.先获取当前对象
				
				//计算出当前要切换到第几章图片
				var c=i%3+1;
				
				img.src="../img/"+c+".jpg";
				i++;
			}
			
			function init(){
				setInterval("changeImg()",1000);
			}
			
			
		</script>
	</head>
	
	<body onload="init()">
		<img src="../img/1.jpg" width="100%" id="img1"/>
		
	</body>
</html>

代码中使用到的regutils.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551

/* 
用途：检查输入的Email信箱格式是否正确 
输入：strEmail：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkEmail(strEmail) 
{      
    var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    if ( emailReg.test(strEmail) ) {
        return true;
    }
    else {
//      alert("您输入的Email地址格式不正确！");
        return false;
    }
};
 
/*
用途：校验ip地址的格式 
输入：strIP：ip地址 
返回：如果通过验证返回true,否则返回false； 
*/
function isIP(strIP) 
{
    if (isNull(strIP)) {
        return false;
    }
    var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ //匹配IP地址的正则表达式 
    if (re.test(strIP)) {
        if ( RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256) {
            return true;
        }
    }
    return false;
};
 
/* 
用途：检查输入手机号码是否正确 
输入：strMobile：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkMobile( strMobile )
{	//13588888888
    var regu = /^[1][345678][0-9]{9}$/;
    var re = new RegExp(regu);
    if (re.test(strMobile)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入的电话号码格式是否正确 
输入：strPhone：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkPhone( strPhone ) 
{
    var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
    var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
    var prompt = "您输入的电话号码不正确!"; 
    if ( strPhone.length > 9 ) {
        if ( phoneRegWithArea.test(strPhone) ) {
            return true;
        }
        else {
            alert( prompt );
            return false;
        }
    }
    else {
        if ( phoneRegNoArea.test( strPhone ) ) {
            return true;
        }
        else {
            alert( prompt );
            return false;
        }
    }
};
 
/* 
用途：检查输入字符串是否为空或者全部都是空格 
输入：str 
返回：如果全是空返回true,否则返回false 
*/
function isNull( str )
{
    if ( str == "" ) {
        return true;
    }
    var regu = "^[ ]+$";
    var re = new RegExp(regu);
    return re.test(str);
};
 
/* 
用途：检查输入对象的值是否符合整数格式 
输入：str 输入的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isInteger( str )
{
    var regu = /^[-]{0,1}[0-9]{1,}$/;
    return regu.test(str);
};
 
/* 
用途：检查输入字符串是否符合正整数格式 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isNumber( s )
{
    var regu = "^[0-9]+$";
    var re = new RegExp(regu);
    if (s.search(re) != - 1) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否是带小数的数字格式,可以是负数 
输入：str：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isDecimal( str )
{
    if (isInteger(str)) {
        return true;
    }
    var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
    if (re.test(str)) {
        if (RegExp.$1 == 0 && RegExp.$2 == 0) {
            return false;
        }
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入对象的值是否符合端口号格式 
输入：str 输入的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isPort( str )
{
    return (isNumber(str) && str < 65536);
};
 
/* 
用途：检查输入字符串是否符合金额格式,格式定义为带小数的正数，小数点后最多三位 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isMoney( s )
{
    var regu = "^[0-9]+[\.][0-9]{0,3}$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否只由英文字母和数字和下划线组成 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isNumberOr_Letter( s )
{
    //判断是否是数字或字母 
    var regu = "^[0-9a-zA-Z\_]+$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否只由英文字母和数字组成 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isNumberOrLetter( s )
{
    //判断是否是数字或字母 
    var regu = "^[0-9a-zA-Z]+$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：检查输入字符串是否只由汉字、字母、数字组成 
输入：s：字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isChinaOrNumbOrLett( s )
{
    //判断是否是汉字、字母、数字组成 
    var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
    var re = new RegExp(regu);
    if (re.test(s)) {
        return true;
    }
    else {
        return false;
    }
};
 
/* 
用途：判断是否是日期 
输入：date：日期；fmt：日期格式 
返回：如果通过验证返回true,否则返回false 
*/
function isDate( date, fmt ) 
{
    if (fmt == null) {
        fmt = "yyyyMMdd";
    }
    var yIndex = fmt.indexOf("yyyy");
    if (yIndex ==- 1) {
        return false;
    }
    var year = date.substring(yIndex, yIndex + 4);
    var mIndex = fmt.indexOf("MM");
    if (mIndex ==- 1) {
        return false;
    }
    var month = date.substring(mIndex, mIndex + 2);
    var dIndex = fmt.indexOf("dd");
    if (dIndex ==- 1) {
        return false;
    }
    var day = date.substring(dIndex, dIndex + 2);
    if (!isNumber(year) || year > "2100" || year < "1900") {
        return false;
    }
    if (!isNumber(month) || month > "12" || month < "01") {
        return false;
    }
    if (day > getMaxDay(year, month) || day < "01") {
        return false;
    }
    return true;
};
function getMaxDay(year, month) 
{
    if (month == 4 || month == 6 || month == 9 || month == 11) {
        return "30";
    }
    if (month == 2) {
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            return "29";
        }
        else {
            return "28";
        }
        return "31";;
    }
};
 
/* 
用途：字符1是否以字符串2结束 
输入：str1：字符串；str2：被包含的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isLastMatch(str1, str2) 
{
    var index = str1.lastIndexOf(str2);
    if (str1.length == index + str2.length) {
        return true;
    }
    return false;
};
 
/* 
用途：字符1是否以字符串2开始 
输入：str1：字符串；str2：被包含的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isFirstMatch(str1, str2) 
{
    var index = str1.indexOf(str2);
    if (index == 0) {
        return true;
    }
    return false;
};
 
/* 
用途：字符1是包含字符串2 
输入：str1：字符串；str2：被包含的字符串 
返回：如果通过验证返回true,否则返回false 
*/
function isMatch(str1, str2) 
{
    var index = str1.indexOf(str2);
    if (index ==- 1) {
        return false;
    }
    return true;
};
 
/* 
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确，且结束如期>=起始日期 
输入：startDate：起始日期，字符串; endDate：结束如期，字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkTwoDate( startDate, endDate ) 
{
    if ( !isDate(startDate) ) {
        alert("起始日期不正确!");
        return false;
    }
    else if ( !isDate(endDate) ) {
        alert("终止日期不正确!");
        return false;
    }
    else if ( startDate > endDate ) {
        alert("起始日期不能大于终止日期!");
        return false;
    }
    return true;
};
 
/* 
用途：检查复选框被选中的数目 
输入：checkboxID：字符串 
返回：返回该复选框中被选中的数目 
*/
function checkSelect( checkboxID ) 
{
    var check = 0;
    var i = 0;
    if ( document.all(checkboxID).length > 0 ) 
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) {
            if ( document.all(checkboxID).item( i ).checked ) {
                check += 1;
            }
        }
    }
    else {
        if ( document.all(checkboxID).checked ) {
            check = 1;
        }
    }
    return check;
}
function getTotalBytes(varField) 
{
    if (varField == null) {
        return - 1;
    }
    var totalCount = 0;
    for (i = 0; i < varField.value.length; i++) {
        if (varField.value.charCodeAt(i) > 127) {
            totalCount += 2;
        }
        else {
            totalCount++ ;
        }
    }
    return totalCount;
}
function getFirstSelectedValue( checkboxID )
{
    var value = null;
    var i = 0;
    if ( document.all(checkboxID).length > 0 )
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ )
        {
            if ( document.all(checkboxID).item( i ).checked ) {
                value = document.all(checkboxID).item(i).value;
                break;
            }
        }
    }
    else {
        if ( document.all(checkboxID).checked ) {
            value = document.all(checkboxID).value;
        }
    }
    return value;
}
function getFirstSelectedIndex( checkboxID )
{
    var value = - 2;
    var i = 0;
    if ( document.all(checkboxID).length > 0 )
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) {
            if ( document.all(checkboxID).item( i ).checked ) {
                value = i;
                break;
            }
        }
    }
    else {
        if ( document.all(checkboxID).checked ) {
            value = - 1;
        }
    }
    return value;
}
function selectAll( checkboxID, status )
{
    if ( document.all(checkboxID) == null) {
        return;
    }
    if ( document.all(checkboxID).length > 0 )
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) {
            document.all(checkboxID).item( i ).checked = status;
        }
    }
    else {
        document.all(checkboxID).checked = status;
    }
}
function selectInverse( checkboxID ) 
{
    if ( document.all(checkboxID) == null) {
        return;
    }
    if ( document.all(checkboxID).length > 0 ) 
    {
        for ( i = 0; i < document.all(checkboxID).length; i++ ) 
        {
            document.all(checkboxID).item( i ).checked = !document.all(checkboxID).item( i ).checked;
        }
    }
    else {
        document.all(checkboxID).checked = !document.all(checkboxID).checked;
    }
}
function checkDate( value ) 
{
    if (value == '') {
        return true;
    }
    if (value.length != 8 || !isNumber(value)) {
        return false;
    }
    var year = value.substring(0, 4);
    if (year > "2100" || year < "1900") {
        return false;
    }
    var month = value.substring(4, 6);
    if (month > "12" || month < "01") {
        return false;
    }
    var day = value.substring(6, 8);
    if (day > getMaxDay(year, month) || day < "01") {
        return false;
    }
    return true;
};
 
/* 
用途：检查输入的起止日期是否正确，规则为两个日期的格式正确或都为空且结束日期>=起始日期 
输入：startDate：起始日期，字符串; endDate： 结束日期，字符串 
返回：如果通过验证返回true,否则返回false 
*/
function checkPeriod( startDate, endDate ) 
{
    if ( !checkDate(startDate) ) {
        alert("起始日期不正确!");
        return false;
    }
    else if ( !checkDate(endDate) ) {
        alert("终止日期不正确!");
        return false;
    }
    else if ( startDate > endDate ) {
        alert("起始日期不能大于终止日期!");
        return false;
    }
    return true;
};
 
/* 
用途：检查证券代码是否正确 
输入：secCode:证券代码 
返回：如果通过验证返回true,否则返回false 
*/
function checkSecCode( secCode ) 
{
    if ( secCode.length != 6 ) {
        alert("证券代码长度应该为6位");
        return false;
    }
    if (!isNumber( secCode ) ) {
        alert("证券代码只能包含数字");
        return false;
    }
    return true;
};
 
/*
function:cTrim(sInputString,iType) 
description:字符串去空格的函数 
parameters:iType：1=去掉字符串左边的空格;2=去掉字符串左边的空格;0=去掉字符串左边和右边的空格 
return value:去掉空格的字符串 
*/
function cTrim(sInputString, iType) 
{
    var sTmpStr = ' ';
    var i = - 1;
    if (iType == 0 || iType == 1) 
    {
        while (sTmpStr == ' ') {
            ++i;
            sTmpStr = sInputString.substr(i, 1);
        }
        sInputString = sInputString.substring(i);
    }
    if (iType == 0 || iType == 2) 
    {
        sTmpStr = ' ';
        i = sInputString.length;
        while (sTmpStr == ' ') {
            --i;
            sTmpStr = sInputString.substr(i, 1);
        }
        sInputString = sInputString.substring(0, i + 1);
    }
    return sInputString;
};

结果展示如下：

JS实现表格变色和全选问题

三、表格问题

  • 表格隔行变色：

　　使用数组(row=rows[i])存放每一行(tab.rows)然后奇偶数的方式换颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
			1.确定事件：文档加载完成 onload
			2.事件触发函数：init()
			3.函数：操作页面的元素
					要操作表格每一行--动态改变背景颜色
		
		-->
		<script>
			function init(){
				//得到表格
				var tab=document.getElementById("tab");
				//得到表格每一行
				var rows=tab.rows;
				//奇偶数更改颜色
				for(var i=1;i<rows.length;i++)
				{
					var row=rows[i];   //得到其中的某行
					if(i%2==0)
					{
						row.bgColor="red";
					}
					else
					{
						row.bgColor="blue";
					}		
				}		
			}	
		</script>
		
	</head>
	<body onload="init()">   //onload时间放在body体内
		<table border="1px" width="600px" id="tab">  给表格一个id名方便得到表格
			
			<tr >
				<td>
					<input type="checkbox" />   <!--复选框-->
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			
			<!--第一行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			
			<!--第二行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>2</td>
				<td>日用品</td>
				<td>洗衣粉</td>
				<td>这里面的洗衣服很干净的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第三行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr> 
			
			<!--第四行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第五行-->
			<tr>
				<td>
					<input type="checkbox" />  <!--复选框-->
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			
		</table>
	</body>
</html>

页面成果展示如下：

  • 表格的全选和全不选(在前面的基础上)

    使用getElementsByTagName()/getElementsByName()获取每个分类项目的当前值存入一个数组
    1.var checks=document.getElementsByTagName("input");直接是将所有的input选项拿出来(但是不一定所有的input都有单选框)。
    2.var checks = document.getElementsByName("checkone");可以在要选的input里面加id为checkone，可以获取。

主要代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function checkAll(){
					//获取当前第一个按钮的状态
					var check1=document.getElementById("check1");  //给第一个input加一个id名为check1
					var checked=check1.checked; //把第一个值放在一个checked里面存着
					
					//获得所有分类项的checkbox
					var checks=document.getElementsByTagName("input");
					//var checks = document.getElementsByName("checkone");
					
					//修改每一个checkbox的状态
					for(var i = 0; i < checks.length; i++)
					{
						var checkone = checks[i];//让之前的每个数取出来
						checkone.checked = checked;//设置成和第一个一样的值(全选/全不选)
					}
				
				}

以下是完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
			1.确定事件：文档加载完成 onload
			2.事件触发函数：init()
			3.函数：操作页面的元素
					要操作表格每一行--动态改变背景颜色	
		-->
		<script>
			function init(){
				//得到表格
				var tab=document.getElementById("tab");
				//得到表格每一行
				var rows=tab.rows;
				//奇偶数更改颜色
				for(var i=1;i<rows.length;i++)
				{
					var row=rows[i];//得到其中的某行
					if(i%2==0)
					{
						row.bgColor="red";
					}
					else
					{
						row.bgColor="blue";
					}					
				}					
			}
			
			/*
					全选和全不选步骤分析:
						 1.确定事件: onclick 单击事件
						 2.事件触发函数: checkAll()
						 3.函数要去做一些事情:
								    获得当前第一个checkbox的状态
								 	获得所有分类项的checkbox
								 	修改每一个checkbox的状态	
			*/
			
			function checkAll(){
					//获取当前第一个按钮的状态
					var check1=document.getElementById("check1");
					var checked=check1.checked;
					
					//获得所有分类项的checkbox
					var checks=document.getElementsByTagName("input");
					//var checks = document.getElementsByName("checkone");
					//测试是不是有六个：alert(checks.length);
					for(var i = 0; i < checks.length; i++)
					{
					//修改每一个checkbox的状态
						var checkone = checks[i];
						checkone.checked = checked;
					}
				
				}
			
		</script>
	
	</head>
	<body onload="init()">
		<table border="1px" width="600px" id="tab">
			
			<tr >
				<td>
					<input type="checkbox" onclick="checkAll()" id="check1" >
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			
			<!--第一行-->
			<tr>
				<td>
					<input type="checkbox" name="checkone" >  <!--复选框-->
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			
			<!--第二行-->
			<tr>
				<td>
					<input type="checkbox" name="checkone">  <!--复选框-->
				</td>
				<td>2</td>
				<td>日用品</td>
				<td>洗衣粉</td>
				<td>这里面的洗衣服很干净的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第三行-->
			<tr>
				<td>
					<input type="checkbox" name="checkone">  <!--复选框-->
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr> 
			
			<!--第四行-->
			<tr>
				<td>
					<input type="checkbox"  name="checkone">  <!--复选框-->
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			<!--第五行-->
			<tr>
				<td>
					<input type="checkbox"  name="checkone">  <!--复选框-->
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			
			
		</table>
	</body>
</html>

页面成果展示如下：

,