jQuery对表单的操作及更多应用

发表于 | 分类于

文章头图

学习了jQuery的基本语法，发现jQuery的选择器非常强大，还解决了浏览器的兼容问题，迫不及待想要尝试一下，于是对着书本的案例实现了一些小案例，虽然是小案例，但是对我来说也不容易，花了好多时间才调试通过。意识到知识不去整理，很快就忘记，加上本次学习的都是一些比较常用的案例，于是想记录下来，方便以后直接拷贝~~

1、单行文本框添加获取、失去焦点样式事件

对文本框的操作，包括获取焦点时候输入框变色、失去焦点时恢复原来的颜色。需要注意的是：input的边框必须设置为2px，textarea的边框必须设置为1px，这样才能防止它们获取和失去焦点时，产生“抖动”现象。具体请看下面代码，大家可以新建一个html文件，随意改动一下input和textarea的边框看看效果。

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本框获取和失去焦点事件</title>
	<style type="text/css">
		body fieldset{
			width: 400px;
			margin: 0 auto; /*垂直居中*/
		}
		body input{
			width: 200px;
			height: 28px;
		}
		body div{
			margin: 15px 0;
		}
		body textarea{
			vertical-align: middle;
			width: 400px;
			height: 100px;
		}
		.bor{
			outline: none;
			border:2px solid red; /*input的边框大小设置为2px，防止focus和blur时组件的大小发生改变，产生“抖动”。*/
		}
		.bor2{
			outline: none;
			border:1px solid red; /*textarea的边框大小设置为2px，防止focus和blur时组件的大小发生改变，产生“抖动”*/。
		}
	</style>
</head>
<body>
	<form action="#" method="POST" id="regForm">
		<fieldset>
			<legend>个人基本信息</legend>
			<div>
				<label for="userName">名称：</label>
				<input type="text" name="用户名" id="userName">
			</div>
			<div>
				<label for="psw">密码：</label>
				<input type="password" name="密码" id="psw">
			</div>
			<div>
				<label for="msg">详细信息:</label>
				<textarea id="msg"></textarea>
			</div>
		</fieldset>
	</form>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){  //单独input设置样式，防止边框大小产生的“抖动”！
			$("input").focus(function(){
				$(this).addClass("bor");
			}).blur(function(){
				$(this).removeClass("bor");
			});
			$("textarea").focus(function(){ //单独textarea设置样式，防止边框大小产生的“抖动”！
				$(this).addClass("bor2");
			}).blur(function(){
				$(this).removeClass("bor2");
			});
		});
	</script>
</body>
</html>

运行效果如下：
文本框获取和失去焦点样式控制

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多行文本框高度变化</title>
	<style type="text/css">
		span{
			display: inline-block;
			width: 60px;
			height: 40px;
			background: #ccc;
			font-size: 12px;
			color: white;
			line-height: 40px;
			text-align: center;
			cursor: pointer; /*设置指针为手型，使其像可点击的按钮*/
		}
		span:hover{  /*鼠标经过，背景变为橙色*/
			background-color: orange; 
		}
		form{
			width: 400px;
			margin: 0 auto;
		}
		textarea{
			overflow: visible;
		}
	</style>
</head>
<body>
	<form action="">
		<div class="msg_caption">
			<span class="bigger">增加高度</span>
			<span class="smaller">减少高度</span>
			<span class="up">滚动条上</span>
			<span class="down">滚动条下</span>
		</div>
		<div>
			<label for="comment">文本框的高度（范围50px-500px，每次调整50px）</label>
			<textarea id="comment" name="" cols="56" rows="8"></textarea>
		</div>
		
	</form>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			var $comment=$('#comment');//获取评论框
			var heigh="";
			$('.bigger').click(function(){  //给“放大按钮”绑定事件
				if (!$comment.is(":animated")){ //确保当前没有动画正在执行，防止动画队列累积。
					if ($comment.height()<500) {
						// $comment.height($comment.height() - 50);没有动画的代码
						$comment.animate({height:"+=50"},300); //设置动画。让过度更自然
					}
				}
			});	
			$('.smaller').click(function(){ //给“缩小按钮”绑定事件
				if (!$comment.is(":animated")) { //确保当前没有动画正在执行，防止动画队列累积。
					if ($comment.height()>50) {
						// $comment.height($comment.height() - 50);没有动画的代码
						$comment.animate({height:"-=50"},300); //设置动画。让过度更自然
					}
				}
			});	
			$('.up').click(function(){ //给“向上滚动”绑定事件
				if (!$comment.is(":animated")) { //确保当前没有动画正在执行，防止动画队列累积。
					// $comment.height($scrollTop.height() - 50);没有动画的代码
					$comment.animate({scrollTop:"-=50"},300); //设置动画。让过度更自然
				}
			});	
			$('.down').click(function(){ //给“向下滚动”绑定事件
				if (!$comment.is(":animated")) { //确保当前没有动画正在执行，防止动画队列累积。
					// $comment.height($scrollTop.height() + 50);没有动画的代码
					$comment.animate({scrollTop:"+=50"},300); //设置动画。让过度更自然
				}
			});	
		});
	</script>
</body>
</html>

运行效果如下：

image.png

3、复选框的基本操作（全选/全不选、反选、联动）

对复选框的操作，包括：全选/全不选、反选、联动（全选按钮的状态会跟随选项组的变化而变化，选项组中有一个没有选中，全选按钮都不会选中。反过来也一样，选项组全部选中时，全选按钮会自动变为选中状态）。代码如下：

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 lang="en">
<head>
	<meta charset="UTF-8">
	<title>复选框基本操作</title>
	<style type="text/css">
		form{
			width: 600px;
			margin: 0 auto;
		}
		form div{
			margin: 10px 0;
		}
	</style>
</head>
<body>
	<form>
		<h3>你爱好的运动是什么？</h3>
			<input type="checkbox" name="items" value="足球"/>足球
			<input type="checkbox" name="items" value="篮球"/>篮球
			<input type="checkbox" name="items" value="羽毛球"/>羽毛球
			<input type="checkbox" name="items" value="棒球"/>棒球
			<span>|</span>
			<input type="checkbox" id="checkAll"/><label for="checkAll">全选/全不选</label>
			<input type="checkbox" id="checkRev"/><label for="checkAll">反选</label>
		<div>
			<input type="button" value="提交" id="send"/>
		</div>
	</form>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){ 
			$("#checkAll").click(function(){ //全选/全不选操作
				$('[name=items]:checkbox').prop("checked",this.checked);
			});
	
			$("#checkRev").click(function(){ //反选操作
				$('[name=items]:checkbox').each(function(){
					$(this).prop("checked",!$(this).prop("checked"));//jQuery写法
					// this.checked=!this.checked;//JavaScript写法，更加简洁
				});
			});
			$('[name=items]:checkbox').click(function(){  //对复选框组绑定事件
				var flag=true;
				$('[name=items]:checkbox').each(function(){ //遍历每一个名为items的checkbox
					if(!this.checked){//如果有未选中的
						flag=false;
					}
				});
				$('#checkAll').prop('checked',flag);//将全选框设置为“未选中”状态 
			});
			$('#send').click(function(){ //为发送按钮绑定click事件，弹出选中的选项。
				var str="你选中的是:\r\n";
				$('[name=items]:checkbox:checked').each(function(){
					str += $(this).val()+"\r\n";
				});
				alert(str);
			});
		});
	</script>
</body>
</html>

运行效果：
复选框操作

4、移动下拉框内容（单击移动、全部移动、双击移动）

对下拉框的操作，包括：将选中的内容移动到另一个选项组中、双击某个选项移动到另一个选项组中、全部选项移动到另一个选项组中。代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>复制下拉框的内容</title>
	<style type="text/css">
		.comWidth{
			width: 400px;
			margin: 0 auto;
		}
		.content{
			float: left;
			margin: 0 auto;
			/*height: 240px;*/
			margin-right: 10px;
			padding:10px 5px;
		}
		#select1{
			width: 140px;
			height: 160px;
			margin-bottom: 10px;
		}
		#select2{
			width: 140px;
			height: 160px;
			margin-bottom: 10px;
		}
		span{
			display: block;
			background: #ccc;
			padding: 2px;
			font-size: 12px;
			cursor: pointer;
			margin-bottom: 5px;
		}
		.tips{
			clear: both;
			color: #f00;
			font-size: 10px;
			text-indent: 5px;
		}
	</style>
</head>
<body>
<div class="comWidth">
	<div class="content">
		<h3>左边：</h3>
		<select multiple id="select1">
			<option value="1">选项1</option>
			<option value="2">选项2</option>
			<option value="3">选项3</option>
			<option value="4">选项4</option>
			<option value="5">选项5</option>
		</select>
		<div>
			<span id="add">>>添加选中内容到右边</span>
			<span id="addAll">>>添加所有内容到右边</span>
		</div>
	</div>
	<div class="content">
		<h3>右边：</h3>
		<select multiple id="select2">
		</select>
		<div>
			<span id="remove">>>移动选中内容到左边</span>
			<span id="removeAll">>>移动所有内容到左边</span>
		</div>
	</div>
	<div class="tips">提示：双击也可以移动选项！</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('#add').click(function(){ //将选中的option移动到右边
			var $options = $('#select1 option:selected');
			// var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
			$options.appendTo('#select2');
		});
		$('#addAll').click(function(){ //将全部option移动到右边
			var $options = $('#select1 option');
			// var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
			$options.appendTo('#select2');
		});
		$('#remove').click(function(){ //将全部option移动到左边
			var $options = $('#select2 option:selected');
			// var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
			$options.appendTo('#select1');
		});
		$('#removeAll').click(function(){ //将全部option移动到左边
			var $options = $('#select2 option');
			// var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
			$options.appendTo('#select1');
		});
		$('#select1').dblclick(function(){ //双击将选中option移动到右边
			// var $options = $('option:selected',this);//另一种选中方式
			var $options = $('#select1 option:selected');
			// var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
			$options.appendTo('#select2');
		});
		$('#select2').dblclick(function(){ //双击将选中option移动到左边
			var $options = $('option:selected',this);
			// var $options = $('#select1 option:selected');//另一种选中方式
			// var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
			$options.appendTo('#select1');
		});
	});
</script>
</body>
</html>

运行效果：

移动下拉框的内容

5、表单验证

表单验证包括：对输入内容进行实时检测并给出相应提示、内容不符合要求时阻止表单提交。代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
	<style type="text/css">
		form{
			width: 400px;
			margin: 0 auto;
			border: 1px solid #ccc;
			padding: 10px;
		}
		body div{
			margin-bottom: 10px;
		}
		label{
			display: inline-block;
			text-align: right;
			width: 80px;
		}
		.sub{
			margin-left: 85px;
		}
		h3{
			text-align: center;
		}
	</style>
</head>
<body>
	<h3>表单验证(邮箱没有进行正则表达式验证)</h3>
	<form action="" method="POST">
		<div class="inpt">
			<label for="userName">用户名：</label>
			<input type="text" id="userName" class="required" />
		</div>
		<div class="inpt">
			<label for="email">邮箱：</label>
			<input type="text" id="email" class="required" />
		</div>
		<div class="inpt">
			<label for="personalInfo">个人信息：</label>
			<input type="text" id="personalInfo" />
		</div>
		<div class="sub">
			<input type="submit" id="send" value="提交" />
			<input type="reset" id="res">
		</div>
	</form>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("form :input.required").each(function(){
				var $required = $('<strong class="high" style="color:#f00;">*</strong>');//创建元素
				$(this).parent().append($required);//把元素追加到文档中
			});
			$('form :input').blur(function(){ //为表单元素添加失去焦点事件
				var $parent=$(this).parent();
				$parent.find(".formTips").remove();//删除以前的提醒元素
				//验证用户名
				if ($(this).is('#userName')) {
					if (this.value==""||this.value.length<6) {
						var errMsg = "请至少输入6位用户名";
						$parent.append('<span class="formTips onError" style="color:red;font-size:10px;">'+errMsg+'</span>').find('.high').remove();
					}else {
						var okMsg='输入正确';
						$parent.append('<span class="formTips onSuccess" style="color:#333;font-size:10px;">'+okMsg+'</span>').find('.high').remove();
					}
				}
				//验证邮箱
				if ($(this).is('#email')) {
					if (this.value=="") {
						var errMsg = "请输入正确的邮箱地址";
						$parent.append('<span class="formTips onError" style="color:red;font-size:10px;">'+errMsg+'</span>').find('.high').remove();
					}else {
						var okMsg='输入正确';
						$parent.append('<span class="formTips onSuccess" style="color:#333;font-size:10px;">'+okMsg+'</span>').find('.high').remove();
					}
				}
			}).keyup(function(){
				$(this).triggerHandler("blur");
			}).focus(function(){
				$(this).triggerHandler("blur");
			});
				//提交事件
				$('#send').click(function(){
					$('form .required:input').trigger('blur');//触发失去焦点事件
					var $errNum=$('form .onError').length;
					if ($errNum>0) {
						return false;
					}
					console.log('aa');
					alert("已提交！");
				});
		});
	</script>
</body>
</html>

运行效果：

表单验证

6、表格应用

6.1 普通的隔行变色

普通的隔行变色可以，新建两个不同的样式，例如新建两个样式：.even{background:orange;} 和 .odd{background:skyblue;}。然后通过jQuery给表格的奇数行添加一个名为odd的类，给偶数行添加一个名为even的类。这样就可以实现隔行变色效果了。代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常规表格隔行高亮</title>
	<style type="text/css">
		table{
			border: 1px solid #ccc;
			width: 400px;
			margin: 0 auto;
		}
		table thead tr{
			background-color: silver;
		}
		.even{
			background-color: orange;
		}
		.odd{
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<th>姓名</th>
			<th>性别</th>
			<th>暂住地</th>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>浙江宁波</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>女</td>
				<td>山东济南</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>湖南长沙</td>
			</tr>
			<tr>
				<td>赵六</td>
				<td>女</td>
				<td>浙江温州</td>
			</tr>
			<tr>
				<td>Rain</td>
				<td>男</td>
				<td>韩国首尔</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$('tbody>tr:odd').addClass('odd');
			$('tbody>tr:even').addClass('even');
		});
	</script>
</body>
</html>

运行效果：

常规隔行高亮

6.2 单选框控制表格行高亮（单行高亮）

单选框控制表格行高亮，主要思路是：

  1. 在每个行第一个td前增加一个单选框；
  2. 新建一个行的样式（例如：selected{…}），用于区分选中和未选中状态；
  3. 给表格每行增加单击事件，单击时给对应行增加样式addClass("selected")，并移除其他行的样式removeClass("selected")；
  4. 找到当前行的单选按钮，设置按钮为选中状态prop('checked',true)。
    具体请看下方代码（注意：请将radio的name设置为一致的，否则无法实现单选功能）：
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单选框单选高亮行</title>
	<style type="text/css">
		table{
			border: 1px solid #ccc;
			width: 400px;
			margin: 0 auto;
		}
		table thead tr{
			background-color: silver;
		}
		.even{
			background-color: orange;
		}
		.odd{
			background-color: skyblue;
		}
		.selected{
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<th>姓名</th>
			<th>性别</th>
			<th>暂住地</th>
		</thead>
		<tbody>
			<tr>
				<!-- radio如果要单选，请将它们的name设置为一样的 -->
				<td><input checked="" type="radio" name="haha">张三</td> 
				<td>男</td>
				<td>浙江宁波</td>
			</tr>
			<tr>
				<td><input type="radio" name="haha">李四</td>
				<td>女</td>
				<td>山东济南</td>
			</tr>
			<tr>
				<td><input type="radio" name="haha">王五</td>
				<td>男</td>
				<td>湖南长沙</td>
			</tr>
			<tr>
				<td><input type="radio" name="haha">赵六</td>
				<td>女</td>
				<td>浙江温州</td>
			</tr>
			<tr>
				<td><input type="radio" name="haha">Rain</td>
				<td>男</td>
				<td>韩国首尔</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			//判断当前行（的radio）是否被选中，如果选中则加上selected类使其变色
			$('tbody>tr:has(:checked)').addClass('selected');
			$('tbody>tr').click(function(){
				$(this)
				.addClass('selected')
				.siblings().removeClass('selected')
				.end()
				.find(':radio').prop('checked',true); //如果要能反复切换选中状态，请使用prop()代替attr()。
			  });
			 
		});
	</script>
</body>
</html>

运行效果：

单选框选中时列表行高亮

6.3 复选框控制表格行高亮（多行高亮）

复选框可以让选中的表格行高亮，支持多选。思路和单行选择差不多，这里不做过多赘述，代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>复选框选择行并高亮</title>
	<style type="text/css">
		table{
			border: 1px solid #ccc;
			width: 400px;
			margin: 0 auto;
		}
		table thead tr{
			background-color: silver;
		}
		.even{
			background-color: orange;
		}
		.odd{
			background-color: skyblue;
		}
		.selected{
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<th>姓名</th>
			<th>性别</th>
			<th>暂住地</th>
		</thead>
		<tbody>
			<tr>
				<!-- checkbox如果要单选，请将它们的name设置为一样的 -->
				<td><input checked type="checkbox" name="haha">张三</td> 
				<td>男</td>
				<td>浙江宁波</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="haha">李四</td>
				<td>女</td>
				<td>山东济南</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="haha">王五</td>
				<td>男</td>
				<td>湖南长沙</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="haha">赵六</td>
				<td>女</td>
				<td>浙江温州</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="haha">Rain</td>
				<td>男</td>
				<td>韩国首尔</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			//判断当前行（的checkbox）是否被选中，如果选中则加上selected类使其变色
			$('tbody>tr:has(:checked)').addClass('selected');
			$('tbody>tr').click(function(){
				//判断当前行(tr)是否含有selected类
				var hasSelected = $(this).hasClass('selected');
				//如果选中，则移除selected类,否则就加上selected类
				$(this)[hasSelected?"removeClass":"addClass"]('selected')
				// .find(':checkbox').attr('checked',!hasSelected); //使用attr()设置checked属性，会导致取消选中后无法再次选中，建议使用prop()
				.find(':checkbox').prop('checked',!hasSelected); //查找内部checkedbox，设置对应的属性
			  });
		});
	</script>
</body>
</html>

复选框，多行高亮

6.4 表格展开关闭

表格的展开和关闭，主要是对行进行编组，单击组名对应的行，可以展开/折叠对应的子行。主要思路是：

  1. 新建对应组，组名对应的行，id设置为row_x,x代表第x组；
  2. 子行的类名可以设置为child_row_x这样方便jQuery代码的编写；
  3. 通过jQuery给每行添加单击事件，使用toggleClass()函数删除/添加高亮；该函数可以增加或删除控制高亮的类，存在就删除，不存在就添加；
  4. 通过siblings()和toggle()隐藏/显示行。siblings()用于选择同组内的子行，然后通过toggle()控制显示和隐藏（隐藏的就设置为显示，显示的就设置为隐藏）。
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格打开/关闭</title>
	<style type="text/css">
		table{
			border: 1px solid #ccc;
			width: 400px;
			margin: 0 auto;
		}
		table thead tr{
			background-color: silver;
		}
		table tbody>tr{
			background-color: #f0f0f0;
		}
		.even{
			background-color: orange;
		}
		.odd{
			background-color: skyblue;
		}
		.selected{
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<th>姓名</th>
			<th>性别</th>
			<th>暂住地</th>
		</thead>
		<tbody>
			<tr class="parent" id="row_01"><td colspan="3">设计组</td></tr>
			<tr class="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr>
			<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
			<tr class="parent" id="row_02"><td colspan="3">技术组</td></tr>
			<tr class="child_row_02"><td>王五</td><td>男</td><td>浙江宁波</td></tr>
			<tr class="child_row_02"><td>赵六</td><td>女</td><td>浙江杭州</td></tr>
			<tr class="parent" id="row_03"><td colspan="3">产品组</td></tr>
			<tr class="child_row_03"><td>田七</td><td>男</td><td>浙江宁波</td></tr>
			<tr class="child_row_03"><td>林峰</td><td>女</td><td>浙江杭州</td></tr>
		</tbody>
	</table>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$('tr.parent').click(function(){
				$(this)
				.toggleClass('selected')//添加/删除高亮
				.siblings('.child_'+this.id).toggle();//隐藏/显示行
			});
		});
	</script>
</body>
</html>

运行效果：

表格行的展开与关闭

6.5 表格内容筛选

表格内容的筛选，主要通过contains()和filter()来实现。主要步骤如下：

  1. 首先给输入框绑定keyup事件，隐藏表格的所有“行(tr)”；
  2. 通过contains()筛选出用户输入的内容，然后通过filter()筛选出包含对应字符的“行(tr)”；
  3. 将第2步筛选出的“行(tr)”显示出来。
    代码如下：
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格内容筛选</title>
	<style type="text/css">
		table{
			width: 400px;
			border: 1px solid #ccc;
			text-align: center;
		}
		.comWidth{
			width: 400px;
			margin: 0 auto;
			/*border: 1px solid #ccc;*/
			padding: 5px;
			font-size: 14px;
		}
		#search{
			/*display: inline-block;*/
			margin: 5px;
		}
		table thead tr{
			background-color: silver;
		}
		.selected{
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="comWidth">
	<label for="search">筛选：</label>
	<input id="search" type="text" name="search">
	<table>
		<thead>
			<th>姓名</th>
			<th>性别</th>
			<th>暂住地</th>
		</thead>
		<tbody>
			<tr>
				<!-- checkbox如果要单选，请将它们的name设置为一样的 -->
				<td>张三</td> 
				<td>男</td>
				<td>浙江宁波</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>女</td>
				<td>山东济南</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>湖南长沙</td>
			</tr>
			<tr>
				<td>赵六</td>
				<td>女</td>
				<td>浙江温州</td>
			</tr>
			<tr>
				<td>Rain</td>
				<td>男</td>
				<td>韩国首尔</td>
			</tr>
		</tbody>
	</table>
	</div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#search').keyup(function(){ //给输入框绑定keyup事件
				$('table tbody tr').hide() //隐藏所有的tr
				.filter(":contains('"+($(this).val())+"')").show(); //显示值与输入框中一致的tr
			}).keyup();//绑定事件后立即触发一次，防止表格更新了而表单元素的值还存在
		});
	</script>
</body>
</html>

运行效果：

表格内容筛选

7、其他应用

7.1 网页字体大小

控制网页的字体，思路已经体现在代码的注释中，值得注意的是单位的获取以及数值的转换。
代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页字体大小缩放</title>
	<style type="text/css">
		.msg_caption>span{
			display: inline-block;
			font-size: 14px;
			width: 100px;
			height: 25px;
			line-height: 25px; 
			background-color: #ccc;
			text-align: center;
			cursor: pointer;
		}
		.msg_caption>span:hover{
			background-color: orange;
			color: white;
		}
		.comWidth{
			width: 400px;
			margin: 0 auto;
			border: 1px solid #ccc;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div class="comWidth">
		<h3>放大/缩小网页字体(12px-30px)：</h3>
		<div class="msg_caption">
			<span class="bigger">放大字体</span>
			<span class="smaller">缩小字体</span>
		</div>
		<div>
			<p id="para">
				This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.
			</p>
		</div>
	</div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.msg_caption>span').click(function(){
				var fontSize = $('#para').css("font-size");//获取段落文字的大小
				var textFontSize = parseInt(fontSize,10);//十进制取整
				var unit = fontSize.slice(-2);//获取单位“px”字符串
				var cName = $(this).attr("class");// 获取当前点击元素的类名
				if(cName == "bigger"){ //如果点击的是bigger，则将字体的数值+2
					if (textFontSize < 30) {
						textFontSize += 2;
					}
				}else if(cName == "smaller"){ //如果点击的是smaller，则将字体的数值-2
					if (textFontSize > 12) {
						textFontSize -= 2;
					}
				}
				$("#para").css("font-size",textFontSize + unit); //设置段落字体的大小，unit表示单位，即px
			});
		});
	</script>
</body>
</html>

运行效果：

改变网页字体大小

7.2 网页选项卡

网页选项卡的实现思路：

  1. 使用li创建选项，并为每个选择创建单独的内容div，除了第一个div外都设置为隐藏（display：none;）；
  2. 为每个选项li绑定单击事件，单击时给对应元素$(this)添加选中的样式；
  3. 获取当前li的索引值（index），并设置与当前li索引值一致的内容div为显示（display：block;）；
  4. 使用siblings（）选择其他的内容div，设置为隐藏（display：none;）。
    代码如下：
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页选项卡</title>
	<style type="text/css">
		.tab{
			font-size: 14px;
			width: 300px;
			margin: 0 auto;
			padding: 10px;
			border: 1px solid #ccc;
		}
		.tab_menu{
			/*float: left;*/
			width: 300px;
			/*border: 1px solid #ccc;*/
			/*height: 30px;*/
		}
		.tab_menu ul{
			float: left;
			padding: 0;
			margin: 0;
			height: 22px;
			/*margin-left: -1px;*/
			margin-bottom: -1px;
		}
		.tab_menu ul li{
			list-style: none;
			float: left;
			display: inline-block;
			width: 50px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			margin-right: 5px;
			border: 1px solid #ccc;
			border-bottom: none;
			background-color: #f6f6f6;
		}
		.tab_box{
			clear: both;
			width: 300px;
			height: 100px;
			border: 1px solid #ccc;
		}
		.hide{
			display: none;
		}
		
		.tab_menu ul .selected,.tab_menu ul li:hover{
			background-color: silver;
			color: white;
			border-color: silver;
		}
	</style>
</head>
<body>
	<div class="tab">
		<div class="tab_menu">
			<ul>
				<li class="selected">时事</li>
				<li>体育</li>
				<li>娱乐</li>
			</ul>
		</div>
		<div class="tab_box">
			<div>时事新闻</div>
			<div class="hide">体育</div>
			<div class="hide">娱乐</div>
		</div>
	</div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			var $div_li = $('div.tab_menu ul li');
			$div_li.click(function(){
				$(this).addClass('selected') //为点击的元素添加样式
				.siblings().removeClass('selected');//移除没有点击的元素样式
				var index = $div_li.index(this);//获取当前li的索引值
				$('div.tab_box > div')//选择tab_box的所有子div，注意：这里只需要选择子div即可。
				.eq(index).show() //显示与li对应的div
				.siblings().hide();//隐藏其他的div
			});
		});
	</script>
</body>
</html>

运行效果：

网页选项卡

7.3 网页换肤（Cookie的使用）