5.1表单应用
一个表单有3个基本组成部分。
（1）表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法。
（2）表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
（3）表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。
5.1.1 单行文本框应用
文本框是表单域中最基本的元素，基于文本框的应用有很多。此处只简单介绍其中的一个应用—获取和失去焦点改变样式。
首先，在网页中创建一个表单：
<form action="#" method="POST" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text">
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password">
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg"></textarea>
</div>
</fieldset>
</form>
初始化网页效果如图
当文本框获取焦点后，它的颜色需要有变化；当它失去焦点后，则要恢复为原来的样式。
首先在CSS中添加一个类名为focus的样式。
.focus {
border: 1px solid #f00；
background: #fcc；
}然后为文本框添加获取和失去焦点事件。
$(function(){
$(":input").focus(function(){
$(this).addClass("focus")；
}).blur(function(){
$(this).removeClass("focus")；
})；
})；当文本框获得焦点时，会出现图
5.1.2 多行文本框应用
1．高度变化
例如某网站的评论框，评论框也需要设置最小高度和最大高度，当达到界限后再单击按钮，评论框的高度就不会再有任何变化。
首先创建一个表单，其中包含评论框：
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger" >放大</span>
<span class="smaller" >缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文
本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变
化.多行文本框高度变化.</textarea>
</div>
</div>
</form> 
然后需要思考以下两种情况。
（1）当单击“放大”按钮后，如果评论框的高度小于500px，则在原有高度的基础上增加50px。
（2）当单击“缩小”按钮后，如果评论框的高度大于50px，则在原有高度的基础上减去50px。
$(function(){
var $comment = $('#comment')； //获取评论框
$('.bigger').click(function(){ //“放大”按钮绑定单击事件
if( $comment.height() < 500 ){
//重新设置高度，在原有的基础上加50
$comment.height( $comment.height() + 50 )；
}
})；
$('.smaller').click(function(){ //“缩小”按钮绑定单击事件
if( $comment.height() > 50 ){
//重新设置高度，在原有的基础上减50
$comment.height( $comment.height() - 50 )；
}
})；
})；
当单击“放大”或“缩小”按钮后，评论框就有了相应的变化，但此时评论框的变化效果很呆板，缺乏缓冲效果。此处可以将其中的一段代码：
$comment.height( $comment.height() + 50 )；改为：
$comment.animate({ height : "+=50" },400)；因此，当单击“放大”按钮后，评论框的高度会在0.4秒内将增大50 px。
注意在动画的过程中，需要判断评论框是否正处于动画，如果处于动画过程中，则不追加其他动画，以免造成动画队列不必要的累积，使效果出现问题。
最终的jQuery代码为如下：
$(function(){
var $comment = $('#comment')； //获取评论框
$('.bigger').click(function(){ //“放大”按钮绑定单击事件
if(!$comment.is(":animated")){ //判断是否处于动画
if( $comment.height() < 500 ){
//重新设置高度，在原有的基础上加50
$comment.animate({ height : "+=50" },400)；
}
}
})
$('.smaller').click(function(){ //“缩小”按钮绑定单击事件
if(!$comment.is(":animated")){ //判断是否处于动画
if( $comment.height() > 50 ){
//重新设置高度，在原有的基础上减50
$comment.animate({ height : "-=50" },400)；
}
}
})；
})；2．滚动条高度变化
在多行文本框中，还有另外一个应用，就是通过控制多行文本框的滚动条的变化，使文本框里的内容滚动。
与控制高度的方法相同，只不过此处需要控制的是另一个属性，即scrollTop。将以上代码改成如下：
$(function(){
var $comment = $('#comment')； //获取评论框
$('.up').click(function(){ //“向上”按钮绑定单击事件
if(!$comment.is(":animated")){ //判断是否处于动画
$comment.animate({ scrollTop : "-=50" } , 400)；
}
})
$('.down').click(function(){ //“向下”按钮绑定单击事件
if(!$comment.is(":animated")){
$comment.animate({ scrollTop : "+=50" } , 400)；
}
})；
})；
5.1.3 复选框应用
对复选框最基本的应用，就是对复选框进行全选、反选和全不选等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。
首先在空白网页中创建一个表单，其中放入一组复选框：
<form>
你爱好的运动是？<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/><br/>
<input type="button" id="send" value="提 交"/>
</form>如果需要使复选框处于选中或者不选状态，必须通过控制元素的checked属性来达到目的。如果属性checked的值为true，说明被选中；如果值为false，说明没被选中。。
全选操作需要为“全选”按钮绑定单击事件，然后使用选择符寻找符合要求的复选框，最后通过attr()方法来设置属性checked的值，使之选中：
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked', true)；
})；全不选操作，只需要将复选框的checked属性的值设置为false，就可以实现：
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').attr('checked', false)；
})；反选操作稍微有些复杂，需要循环每一个复选框进行设置，取它们值的反值，即如果是true，就设置为false；如果是false，就设置为true，此种情况下可以使用非运算符“!”：
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
$(this).attr("checked", !$(this).attr("checked") )；
})；
})；此处用jQuery的attr()方法来设置属性checked的有些复杂，如果改用JavaScript原生的DOM方法，将比创建jQuery对象更有效、简洁。
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked=!this.checked；
})；
})；复选框被选中后，用户单击“提交”按钮，需要将选中的项的值输出。可以通过 val()方法获取选中的值：
$("#send").click(function(){
var str="你选中的是：\r\n"；
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+"\r\n"；
})；
alert(str)；
})；单击“提交”按钮后，显示效果如图
此处不用按钮来控制复选框的全选与全不选，而用另一个复选框来控制，将按钮代码用一个复选框来代替，HTML代码如下：
<form>
你爱好的运动是？
<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
<input type="button" id="send" value="提 交"/>
</form>
$("#CheckedAll").click(function(){
if(this.checked){ //如果当前单击的复选框被选中
$('[name=items]:checkbox').attr("checked", true )；
}else{
$('[name=items]:checkbox').attr("checked", false )；
}
})；
进一步观察思考后发现，所有复选框的checked属性的值和控制全选的复选框的checked属性的值是相同的，因此可以省略if判断，直接赋值，代码如下：
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr("checked", this.checked )；
})；当单击id为“CheckedAll”的复选框后，复选框组将被选中。当在复选框组里取消某一个选项的选中状态时，id 为“CheckedAll”的复选框并没有被取消选中状态，而此时需要它和复选框组能够联系起来，即复选框组里如果有一个或者更多没选中时，则取消id为“CheckedAll”的复选框的选中状态；如果复选框组都被选中时，则 id为“CheckedAll”的复选框也自动被选中。
因此需要对复选框组进行操作，以通过它们来控制id为“CheckedAll”的复选框。具体实现思路如下。
（1）对复选框组绑定单击事件。
（2）定义一个flag变量，默认为true。
（3）循环复选框组，当有没被选中的项时，则把变量flag的值设置为false。
（4）根据变量flag的值来设置id为“CheckedAll”的复选框是否选中。
① 如果flag为true，说明复选框组都被选中。
② 如果flag为false，说明复选框组至少有一个未被选中。
$('[name=items]:checkbox').click(function(){
var flag=true；
$('[name=items]:checkbox').each(function(){
if(!this.checked){
flag = false；
}
})；
$('#CheckedAll').attr('checked', flag)；
})；此时id为“CheckedAll”的复选框和复选框组就可以联动起来了
除了上述的思路之外，也可以用下面的思路来实现。
（1）对复选框组绑定单击事件。
（2）判断复选框的总数是否与选中的复选框数量相等。
（3）如果相等，则说明全选中了，id为“CheckedAll”的复选框应当处于选中状态，否则不选中。
$('[name=items]:checkbox').click(function(){
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率
var $tmp=$('[name=items]:checkbox')；
//用filter()方法筛选出选中的复选框，并直接给CheckedAll赋值
$('#CheckedAll').attr('checked' ,
$tmp.length==$tmp.filter(':checked').length )；
})；
注意：在之前的jQuery版本中，都是使用attr()来访问对象的属性，比如取一个图片的alt属性，就可以这样做$('#img').attr('alt')；但是在某些时候，比如访问input的disabled属性的时候，会有些问题。在有些浏览器里，只要写了 disabled 属性就可以，有些则要写：disabled ="disabled"。所以，从1.6版开始，jQuery提供新的方法prop()来获取这些属性。使用prop()的时候，返回值是标准属性：true/false，比如$('#checkbox').prop('disabled')，不会返回“disabled”或者“”，只会返回 true/false。当然赋值的时候也是如此。这样，便统一了所有操作，无论是从语法上还是语义上。那么，哪些属性应该用attr()访问，哪些应该用prop()访问呢？第一个原则：只添加属性名称该属性就会生效应该使用prop()；第二个原则：只存在true/false的属性应该使用prop()。按照官方说明，如果是设置disabled和checked 这些属性，应使用prop()方法，而不是使用attr()方法。所以，在上例中，建议把所有attr()改成prop()。
5.1.4 下拉框应用
首先在网页中增加一左一右两个下拉框，然后在它们下方分别加上几个功能按钮。
style:
.centent{
float:left;
}
<div class="centent">
<select multiple id="select1" style="width:100px；height:160px；">
<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>
<option value="6">选项6</option>
<option value="7">选项7</option>
<option value="8">选项8</option>
</select>
<div>
<span id="add" >选中添加到右边>；>；</span>
<span id="add_all" >全部添加到右边>；>；</span>
</div>
</div>
<div class="centent">
<select multiple id="select2" style="width: 100px；height:160px；">
</select>
<div>
<span id="remove"><；<；选中删除到左边</span>
<span id="remove_all"><；<；全部删除到左边</span>
</div>
</div>
初始化后，网页效果如图
需要实现的功能如下。
（1）将选中的选项添加给对方。
（2）将全部选项添加给对方。
（3）双击某个选项将其添加给对方。
首先实现第1个功能，即将下拉列表中被选中的选项添加给对方。
首先要获取下拉列表中被选中的选项，然后将当前下拉列表中选中的选项删除，最后将删除的选项添加给对方。
$('#add').click(function() {
var $options = $('#select1 option:selected')； //获取选中的选项
var $remove = $options.remove()； //删除下拉列表中选中的选项
$remove.appendTo('#select2')；
/追加给对方
})；
删除和追加这两个步骤可以用appendTo()方法直接完成，因此可以将上面代码简化如下：
$('#add').click(function() {
var $options = $('#select1 option:selected')； //获取选中的选项
$options.appendTo('#select2')； //追加给对方
})；将全部的选项添加给对方和将选中的选项添加给对方之间的惟一区别就是获取的对象不同：
$('#add_all').click(function() {
var $options = $('#select1 option')； //获取全部的选项
$options.appendTo('#select2')； //追加给对方
})；
接下来双击某个选项将其添加给对方，首先给下拉列表绑定双击事件：$('#select1').dblclick(function(){ .......})；
然后可以通过 $("option:selected",this)方法来获取被选中的选项：
$('#select1').dblclick(function(){ //绑定双击事件
var $options = $("option:selected",this)； //获取选中的选项
$options.appendTo('#select2')； //追加给对方
})；
前面3个功能都是将左边的选项添加给右边，如果要将右边的选项添加给左边，代码也完全相同，此处不再赘述。
5.1.5 表单验证
以一个简单的用户注册为例。首先新建一个表单：
<form method="post" action="">
<div class="int">
<label for="username">用户名:</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮箱:</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">个人资料:</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</div>
</form>
在表单内class属性为“required”的文本框是必须填写的，因此需要将它与其他的非必须填写表单元素加以区别，即在文本框后面追加一个小星星标识。可以使用append()方法来完成，代码如下：
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); //创建元素
$(this).parent().append($required); //将它追加到文档中
});
显示效果如图
当用户在“用户名”文本框中填写完信息后，将光标的焦点从“用户名”移出时，需要即时判断用户名是否符合验证规则。当光标的焦点从“邮箱”文本框移出时，需要即时判断“邮箱”填写是否正确，因此需要给表单元素添加失去焦点事件，即blur。
$('form :input').blur(function(){ //为表单元素添加失去焦点事件
// … 省略代码
})
验证表单元素步骤如下。
（1）判断当前失去焦点的元素是“用户名”还是“邮箱”，然后分别处理。
（2）如果是“用户名”，判断元素的值的长度是否小于6，如果小于6，则用红色提醒用户输入不正确，反之，则用绿色提醒用户输入正确。
（3）如果是“邮箱”，判断元素的值是否符合邮箱的格式，如果不符合，则用红色提醒用户输入不正确，反之，则用绿色提醒用户输入正确。
（4）将提醒信息追加到当前元素的父元素的最后。
$('form :input').blur(function(){
//为表单元素添加失去焦点事件
var $parent = $(this).parent();
//验证用户名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = '请输入至少6位的用户名.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
//验证邮箱
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
});当连续几次输入错误的格式后，会出现图
由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中，最后就出现了多次的提醒信息。因此，需要在创建提醒元素之前，将当前元素以前的提醒元素都删除。可以使用remove()方法来完成，代码如下：
$('form :input').blur(function(){ //为表单元素添加失去焦点事件
var $parent = $(this).parent()；
$parent.find(".formtips").remove()； //删除以前的提醒元素
// …省略代码
})；当鼠标在表单元素中多次失去焦点时，都可以提醒用户填写是否正确。但是，如果用户无视错误提醒，执意要单击“提交”按钮时，为了使表单填写准确，在表单提交之前，需要对表单的必须填写元素进行一次整体的验证。可以直接用trigger()方法来触发blur事件，从而达到验证效果。如果填写错误，就会以红色提醒用户；如果用户名和邮箱都不符合规则，那么就有两处错误，即有两个 class 为“onError”的元素，因此可以根据 class 为“onError”元素的长度来判断是否可以提交。如果长度为0，即true，说明已经可以提交了；如果长度大于0，即false，说明有错误，需要阻止表单提交。阻止表单提交可以直接用“return false”语句。
根据上面的分析，可以在提交事件中写出如下jQuery代码：
$('#send').click(function(){
$("form .required:input").trigger('blur')；
var numError = $('form .onError').length；
if(numError){
return false；
}
alert("注册成功,密码已发到你的邮箱,请查收.")；
})；
显示效果如图
即时提醒需要给表单元素绑定keyup事件和focus事件，keyup事件能在用户每次松开按键时触发，实现即时提醒；focus事件能在元素得到焦点的时候触发，也可以实现即时提醒。
$('form :input').blur(function(){
//失去焦点处理函数.
//代码省略 …
}).keyup(function(){
$(this).triggerHandler("blur")；
}).focus(function(){
$(this).triggerHandler("blur")；
})；
trigger("blur")不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。而triggerHandler("blur")只会触发为元素绑定的blur事件，而不触发浏览器默认的blur事件。
注意：客户端的验证仅用于提升用户操作体验，而服务器端仍需对用户输入的数据的合法性进行校验。对于禁用了脚本的用户和用户自制的网页提交操作，必须在服务器端验证。
5.2表格应用
5.2.1 表格变色
例如一张人员资料表，其HTML代码如下：
<table>
<thead >
<<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</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>
<tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>table{
border: 1px solid #000;
text-align:center;
border-spacing:0;
}
th{
border-bottom:1px solid #000;
margin-bottom:30px;
}添加表格内的下划线的时候，可以使用 border-spacing:0;使边框内距为0，或者使用 border-collapse:collapse;合并边框。
1．普通的隔行变色
首先定义两个样式。
CSS代码如下：
.even{ background:#FFF38F;} /* 偶数行样式*/
.odd{background: #39C;} /* 奇数行样式*/ 然后选择表格奇数行和偶数行分别添加样式，可以使用选择器来完成，代码如下：
$(function(){
$("tr:odd").addClass("odd"); /* 给奇数行添加样式*/
$("tr:even").addClass("even"); /* 给偶数行添加样式*/
});
$("tr:odd")和$("tr:even")选择器中索引是从0开始的，因此第1行是偶数。但是这里有个问题，奇数行样式没有添加上，哎。。咱也不知道为什么。
上面的代码会将表头也算进去，如果需要排除表格头部<thead>中的<tr>，将选择符改成如下代码：
$(function(){
$("tbody>tr:odd").addClass("odd")； //给tbody中的奇数行添加样式
$("tbody>tr:even").addClass("even")； //给tbody中的偶数行添加样式
})
如果还需要将某一行变为高亮显示状态，那么可以使用contains选择器来实现。例如“王五”这行，代码如下：
$("tr:contains('李四')").addClass("selected");css代码：
.selected {
background: #C33;
}
2．单选框控制表格行高亮
在以上表格的基础上，在第1列前加上一列单选框：
<td><input type="radio"/></td>
当单击某一行后，此行被选中高亮显示，并且单选框被选中。
（1）为表格行添加单击事件。
（2）给单击的当前行添加高亮样式，然后将它的兄弟行的高亮样式去掉，最后将当前行里的单选框设置为选中。
$('tbody>tr').click(function(){
$(this)
.addClass('selected')
.siblings()
.removeClass('selected')
.end()
.find(':radio').attr('checked',true);
});
上面代码中使用了end()方法，当前对象是$(this)，当进行addClass('selected')操作时，对象并未发生变化，当执行 siblings().removeClass('selected')操作时，对象已经变为$(this).siblings()，因此后面的操作都是针对这个对象的，如果需要重新返回到$(this)对象，就可以使用end()方法，这样后面的
.find(':radio').attr('checked',true)；
操作就是：
$(this).find(':radio').attr('checked',true)；
而不是：
$(this).siblings().find(':radio').attr('checked',true)；
另外，初始化表格的时候，如果默认已经有单选框被选中，那么也需要处理，代码如下：
$('table :radio:checked').parent().parent().addClass('selected')；注意：上行代码是通过parent()方法逐步向父节点获取相应的元素的，也可以使用parents()方法直接获取：
$('table :radio:checked').parents("tr").addClass('selected')；此外，如果通过has选择器也可以进一步简化，表示含有选中的单选框的<tr>行将被高亮显示：
$('tbody>tr:has(:checked)').addClass('selected')；3．复选框控制表格行高亮
复选框控制表格行与单选框不同，复选框能选择多行变色，并没有限制被选择的个数。当单击某行时，如果已经高亮了，则移除高亮样式并去掉当前行复选框的选中状态；如果还没高亮，则添加高亮样式并将当前行的复选框选中。
判断是否已经高亮，可以使用hasClass()方法来完成。jQuery代码如下：
$('tbody>tr').click(function() {
if ($(this).hasClass('selected')) { //判断是否含有selected高亮样式
$(this)
.removeClass('selected')
.find(':checkbox').attr('checked',false)；
}else{
$(this)
.addClass('selected')
.find(':checkbox').attr('checked',true)；
}
})；
此外，在不改变设计思路的前提下，上面的代码还可以再简化成如下代码：
$('tbody>tr').click(function() {
//判断当前是否选中
var hasSelected=$(this).hasClass('selected')；
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected？"removeClass":"addClass"]('selected')；
//查找内部的checkbox，设置对应的属性
.find(':checkbox').attr( 'checked' , !hasSelected )；
})；
注意：在$(this)[hasSelected?"removeClass":"addClass"]('selected'); 中：[hasSelected?"removeClass":"addClass"]这是一个三元运算，结果为："removeClass"或者"addClass"。
它们等价于：
$(this).removeClass('selected')；
或者$(this).addClass('selected')；
当用户刚进入页面时，也要处理已经被选中的表格行。jQuery代码如下：
$('tbody>tr:has(:checked)').addClass('selected')；5.2.2 表格展开关闭
在上例的人员表格的基础上，增加人员分类。
<table width="338" height="319">
<thead>
<tr><th height="50">姓名</th><th>性别</th><th>暂住地</th></tr>
</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>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>$(function(){
$("tr:contains('前台设计组')").addClass("even");
$("tr:contains('前台开发组')").addClass("even");
$("tr:contains('后台开发组')").addClass("even");
});
现在需要实现的是当单击分类行时，可以关闭相应的内容。例如单击“前台设计组”行，则它对应的“张山和李四”两行将收缩。
在这个表格中，给每个<tr>元素设置属性是非常重要的，读者可以在HTML代码中看出一些规则，即给分类行设置了class="parent"属性，同时也分别给它们设置了id值，而在它们下面的行，只设置了class属性，并且这个class的值是在id值的基础上通过加上“child_”来设置的。
$(function(){
$("tr:contains('前台设计组')").addClass("even");
$("tr:contains('前台开发组')").addClass("even");
$("tr:contains('后台开发组')").addClass("even");
$('tr.parent').click(function(){
$(this)
.toggleClass("selected")
.siblings('.child_'+this.id).toggle();
});
});运行代码后，当单击表格的父行后，相应的子行会收缩，如图
在初始图中人员分类默认是展开的，如果当用户刚进入页面时，默认需要收缩起来，也是很简单的。只要触发click()事件即可。
$('tr.parent').click(function(){ // 获取所谓的父行
$(this)
.toggleClass("selected")
// 添加/删除高亮
.siblings('.child_'+this.id).toggle()； // 隐藏/显示所谓的子行
}).click()；
5.2.3 表格内容筛选
在前面的例子中，如果要高亮显示“王五”那一行，可以使用contains选择器来完成，代码如下：
$("tr:contains('王五')").addClass("selected")；
//选择器contains，能匹配包含指定文本的元素
利用该选择器再结合jQuery的filter()筛选方法，可以实现表格内容的过滤。
例如使用下面的jQuery代码就可以筛选出含有文本“李”的表格行。
$(function(){
$("table tbody tr").hide()
filter(":contains('李')").show()；
})；
首先在表格上方添加一个文本框，用于根据用户输入的内容来筛选表格内容，然后为文本框绑定keyup事件，代码如下：
$(function(){
$("#filterName").keyup(function(){
// …
})；
})；最后将.filter(":contains('李')")代码中的“李”用变量值代替，代码如下：
$(function(){
$("#filterName").keyup(function(){
$("table tbody tr").hide()
.filter(":contains('"+( $(this).val() )+"')").show()；
})；
})；当在文本框中输入“王”时，就会筛选出相应的表格行，显示效果如图
注意 表单元素有个特点，就是刷新网页后，其值会保持不变。例如在刚才筛选操作后，刷新网页，则会出现下图
要解决这个问题，只需要在 DOM 刚加载完时，为表单元素绑定事件并且立即触发该事件即可。
$(function(){
$("#filterName").keyup(function(){
$("table tbody tr").hide()
.filter(":contains('"+( $(this).val() )+"')").show()；
}).keyup()； //DOM加载完时，绑定事件完成之后立即触发
})；这样，当页面被刷新后，就会立即执行id为“filterName”的keyup事件，因此表格内容就会保持刚才筛选出来的结果。
5.3其他应用
5.3.1 网页字体大小
在某些网站经常有“放大”和“缩小”字号的控制按钮，通过单击它们，可以使网页的文字呈现不同的大小。
首先在空白的网页上添加两个字号控制按钮和一些文字：
<div class="msg">
<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. 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>span{
background:#999;
font-size:24px;
}
.msg_caption{
height:auto;
width:100%;
}
.msg{
border:1px solid #000;
}
对“放大”按钮和“缩小”按钮进行相应的处理，代码如下：
$(function(){
$("span").click(function(){
var thisEle = $("#para").css("font-size");
var textFontSize = parseInt(thisEle,10);
var unit = thisEle.slice(-2);
var cName = $(this).attr("class");
if(cName == "bigger"){
textFontSize += 2;
}else if(cName == "smaller"){
textFontSize -= 2;
}
$("#para").css("font-size",textFontSize + unit);
});
});
下面详细讲解以上代码所完成的操作。
$(function(){
$("span").click(function(){
//…
})；
})；
当文档加载完毕后，为所有的<span>元素绑定单击事件。
var thisEle = $("#para").css("font-size")；
var textFontSize = parseInt(thisEle , 10)；
获取 id 为“para”的元素的字体大小。获取的值是将返回的数字和单位，即 16px。然后使用parseInt()方法去掉单位，因此16px就变成了16。parseInt()方法的第2个参数表示进制，代码中表示的是十进制。
var unit = thisEle.slice(-2)；
上面这段代码是获取单位，slice()方法返回字符串中从指定的字符开始的一个子字符串。因为这里使用的度量单位px是两个字符，所以指定字符串应该从倒数第2个字符开始。在后面再次设置字体大小时，就可以直接把单位拼接上。
var cName = $(this).attr("class")；
if(cName == "bigger"){
textFontSize += 2；
}else if(cName == "smaller"){
textFontSize -= 2；
}
if语句用于判断当前被单击的<span>元素的class是否为“bigger”。如果是“bigger”，则需要为字体变量（textFontSize）增加 2px。如果单击的是“smaller”，则要为字体变量（textFontSize）减掉2px。
$("#para").css("font-size", textFontSize + unit )；
最后，再次获取“para”元素并为它的font-size 属性赋予新的值（textFontSize），并且一定要拼接上单位。
如果发现无限放大和缩小不太合适，可以判断一下最小字体和最大字体，代码如下：
//…省略代码
if(cName == "bigger"){
if( textFontSize <= 22 ){
textFontSize += 2；
}
}else if(cName == "smaller"){
if( textFontSize >= 12 ){
textFontSize -= 2；
}
}
$("#para").css("font-size", textFontSize + unit )；
5.3.2 网页选项卡
制作选项卡的原理比较简单，通过隐藏和显示来切换不同的内容。
<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>ul{
list-style:none;
}
li{
display:inline;
direction:ltr;
background:#CCC;
border:1px solid #000;
font-size:16px;
padding:5px;
}
.tab{
border:1px solid #000;
padding:20px;
width:300px;
}
.tab_box{
border:1px solid #000;
}
.selected{
background:#369;} 应用样式后，网页呈现效果如图
下面需要为<li>元素绑定单击事件，代码如下：
var $div_li =$("div.tab_menu ul li")；
$div_li.click(function(){ //绑定单击事件
// …
})；
var $div_li =$("div.tab_menu ul li")；
$div_li.click(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected")； //去掉其他同辈<li>元素的高亮
var index = $div_li.index(this)； //获取当前单击的<li>元素在全部<li>元素中的索引
$("div.tab_box > div") //选取子节点
.eq(index).show() //显示<li>元素对应的<div>元素
.siblings().hide()； //隐藏其他几个同辈的<div>元素
})；这样，当单击<li>元素后，选项卡相应的内容也将切换
在上面的代码中，要注意$("div.tab_box > div")这个子选择器，如果用$("div.tab_box div")选择器，当子节点里再包含<div>元素的时候，就会引起程序错乱。因此获取当前选项卡下的子节点，才是这个例子所需要的。
至此制作选项卡的过程就完成了。如果读者还想加强些效果，例如光标滑入滑出效果，可以添加hover事件，代码如下：
var $div_li =$("div.tab_menu ul li")；
$div_li.click(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected")； //去掉其他同辈<li>元素的高亮
var index = $div_li.index(this)；
//获取当前单击的<li>元素在全部<li>元素中的索引
$("div.tab_box > div") //选取子节点
.eq(index).show() //显示<li>元素对应的<div>元素
.siblings().hide()； //隐藏其他几个同辈的<div>元素
}).hover(function(){ //添加光标滑过效果
$(this).addClass("hover")；
},function(){
$(this).removeClass("hover")；
})；
这样当光标滑过其他选项时，选项的样式会发生变化，如图
5.3.3 网页换肤
网页换肤的原理就是通过调用不同的样式表文件来实现不同皮肤的切换，并且需要将换好的皮肤记入Cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。
首先设置HTML的结构，在网页中添加皮肤选择按钮（<li>元素）和基本内容，代码如下：
<head>
<link id="cssfile" href="skin_0.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="skin">
<li id="skin_0" title="灰色" class="selected">灰色</li>
<li id="skin_1" title="紫色">紫色</li>
<li id="skin_2" title="红色">红色</li>
<li id="skin_3" title="天蓝色">天蓝色</li>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡绿色">淡绿色</li>
</ul>
<div id="div_side_0">
<div id="news">
<h1 class="title">时事新闻</h1>
</div>
</div>
<div id="div_side_1">
<div id="game">
<h1 class="title">娱乐新闻</h1>
</div>
</div>
</body>skin_0.css的代码：
ul{
list-style:none;
border:1px solid #666;
width:400px;
}
li{
display:inline;
direction:ltr;
border:1px solid #000;
}
#skin_0{
background:#999;
}
#skin_1{
background:#C09;
}
#skin_2{
background:#C00;
}
#skin_3{
background:#09C;
}
#skin_4{
background:#CC3;
}
#skin_5{
background:#6F3;
}
#div_side_0{
display:center;
float:left;
margin-right:50px;
}
#div_side_1{
float:left;
}
#news,#game{
background:#999;
height:40px;
width:80px;
}
.title{
color:#FFF;
font-size:14px;
display:inline;
text-align:left;
}
然后新建skin_1.css,skin_2.css...........skin_5.css,把对应的颜色改一下就ok.
最后为皮肤选择按钮添加单击事件，有如下两个步骤。
（1）当皮肤选择按钮被单击后，当前皮肤就被勾选。
（2）将网页内容换肤。
var $li =$("#skin li")；
$li.click(function(){
$("#"+this.id).addClass("selected") //当前<li>元素被选中
.siblings().removeClass("selected")； //去掉其他同辈<li>元素的选中
$("#cssfile").attr("href",+this.id+".css")； //设置不同皮肤
})；
在jQuery中有一款Cookie插件，它能简化Cookie的操作，此处就将其引入，下载链接：http://plugins.jquery.com/cookie/1.4.0/
<!-- 引入jQuery的cookie插件 -->
<script src="js/jquery.cookie.js" type="text/javascript"></script>
$(function(){
var $li =$("#skin li")；
$li.click(function(){
$("#"+this.id).addClass("selected") //当前<li>元素被选中
.siblings().removeClass("selected")； //去掉其他同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ (this.id) +".css")； //设置不同皮肤
$.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 })；
})；
var cookie_skin = $.cookie( "MyCssSkin")；
if (cookie_skin) {
$("#"+cookie_skin).addClass("selected") //当前<li>元素被选中
.siblings().removeClass("selected")； //去掉其他同辈<li>元素的选中
$("#cssfile").attr("href","css/"+ cookie_skin +".css")； //设置不同皮肤
$.cookie( "MyCssSkin" , cookie_skin , { path: '/', expires: 10 })；
}
})；此时，网页换肤功能不仅能正常切换，而且也能保存到Cookie中，当用户刷新网页后，仍然是当前选择的皮肤。
在上面代码中，click事件中的函数内容与if (cookie_skin) { } 内的判断内容类似，只是有一个变量不同，因此可以通过给函数传递不同的参数，这样就可以多次调用（抽象化），代码如下：f
unction switchSkin(skinName){
$("#"+skinName).addClass("selected") //当前<li>元素被选中
.siblings().removeClass("selected")； //去掉其他同辈<li>元素的选中
$("#cssfile").attr("href",+ skinName +".css")； //设置不同皮肤
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 })；
}然后在单击事件和if (cookie_skin) { }内分别调用对应的参数：
$(function(){
var $li =$("#skin li")；
$li.click(function(){
switchSkin( this.id )；
})；
var cookie_skin = $.cookie( "MyCssSkin")；
if (cookie_skin) {
switchSkin( cookie_skin )；
}
})；