第五章 jQuery对表单，表格的操作以及更多应用
这章主要以一些具体案例讲解了jQuery对表单，表格的常用操作，以及一些常见的jQuery应用，用到的都是上几章说的东西。下面就以具体的案例来展开。
5.1 表单应用
案例1：文本框获取和失去焦点时改变其样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> //引入css样式 body{ font:normal 12px/17px Arial; } div{ padding:2px; } input, textarea { width: 12em; border: 1px solid #888; } .focus { border: 1px solid #f00; background: #fcc; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); }) </script> </head> <body> <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" rows="2" cols="20"></textarea> </div> </fieldset> </form> </body> </html>
说明：<fieldset> 标签对表单中的相关元素进行分组，会在相关表单元素周围绘制边框。 <legend> 元素为 <fieldset>元素定义标题。表单选择器 ":input" ，选取所有的<input>,<textarea>,<select>和<button>.
运行结果：
案例2：多行文本框的应用，控制评论框的高度以及滚动条高度变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin:0; padding:0;font:normal 12px/17px Arial; } .msg {width:300px; margin:100px; } .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;} .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; } .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;} </style> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var $comment = $('#comment'); //获取评论框 $('.bigger').click(function(){ //放大按钮绑定单击事件 if(!$comment.is(":animated")){ //判断是否处于动画 if( $comment.height() < 500 ){ $comment.animate({ height : "+=50" },400); //重新设置高度，在原有的基础上加50，此处用动画实现变化的缓冲效果 } } }) $('.smaller').click(function(){//缩小按钮绑定单击事件 if(!$comment.is(":animated")){//判断是否处于动画 if( $comment.height() > 50 ){ $comment.animate({ height : "-=50" },400); //重新设置高度，在原有的基础上减50 } } }); }); </script> </head> <body> <form action="" method="post"> <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> </body> </html>
运行结果：
滚动条高度变化：主要是控制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); } }); });
案例3：复选框的应用
对复选框进行全选，反选和全不选等操作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr('checked', true); }); //全不选 $("#CheckedNo").click(function(){ $('[type=checkbox]:checkbox').attr('checked', false); }); //反选 $("#CheckedRev").click(function(){ $('[name=items]:checkbox').each(function(){ //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。 //$(this).attr("checked", !$(this).attr("checked")); //$(this).prop("checked", !$(this).prop("checked")); //直接使用JS原生代码，简单实用 this.checked=!this.checked; }); }); //输出值 $("#send").click(function(){ var str="你选中的是：\r\n"; $('[name=items]:checkbox:checked').each(function(){ str+=$(this).val()+"\r\n"; //注意这里的val()方法取的是checkbox的value属性值，如果不设value属性值的话，取到的结果是"on" }) alert(str); }); }) </script> </head> <body> <form method="post" action=""> 你爱好的运动是？ <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="反 选"/> <input type="button" id="send" value="提 交"/> </form> </body> </html>
用另一个复选框来控制而不用按钮：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ //所有checkbox跟着全选的checkbox走。 $('[name=items]:checkbox').attr("checked", this.checked ); }); $('[name=items]:checkbox').click(function(){ //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。 var $tmp=$('[name=items]:checkbox'); //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。 $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length); /* //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。 $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length); */ }); //输出值 $("#send").click(function(){ var str="你选中的是：\r\n"; $('[name=items]:checkbox:checked').each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }); </script> </head> <body> <form method="post" action=""> 你爱好的运动是？<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> </body> </html>
案例4：下拉框应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin:0; padding:0; } div.centent { float:left; text-align: center; margin: 10px; } span { display:block; margin:2px 2px; padding:4px 10px; background:#898989; cursor:pointer; font-size:12px; color:white; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //移到右边 $('#add').click(function() { //获取选中的选项，删除并追加给对方 $('#select1 option:selected').appendTo('#select2'); }); //移到左边 $('#remove').click(function() { $('#select2 option:selected').appendTo('#select1'); }); //全部移到右边 $('#add_all').click(function() { //获取全部的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'); }); //全部移到左边 $('#remove_all').click(function() { $('#select2 option').appendTo('#select1'); }); //双击选项 $('#select1').dblclick(function(){ //绑定双击事件 $("option:selected",this).appendTo('#select2'); //追加给对方 }); //双击选项 $('#select2').dblclick(function(){ $("option:selected",this).appendTo('#select1'); }); }); </script> </head> <body> <div class="centent"> <select multiple="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> </select> <div> <span id="add" >选中添加到右边>></span> <span id="add_all" >全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px;height:160px;"> <option value="8">选项8</option> </select> <div> <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span> </div> </div> </body> </html>
需要注意的是 1. 绑定双击事件：$(element).dbclick(function(){}) 2.appendTo()方法可以将每个元素从原来的地方搬走 3. $("option:selected",this)
案例5：表单验证
具体来说就是实现一般网页上常见的验证功能：在必填字段后有红星，输入后立即立即判断格式是否正确等等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //如果是必填的，则加红星标识. $("form :input.required").each(function(){ var $required = $("<strong class='high'> *</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 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>'); } } }); //提交，最终验证。 $('#send').click(function(){ $("form :input.required").trigger('blur'); var numError = $('form .onError').length; if(numError){ return false; } alert("注册成功,密码已发到你的邮箱,请查收."); }); //重置 $('#res').click(function(){ $(".formtips").remove(); }); }) //]]> </script> </head> <body> <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> </body> </html>
说明：1. 在最终验证时根据class为onError元素的个数来判断是否可以提交
如果在输入时及时提醒的话，可以给元素绑定keyup和focu事件，代码如下：
5.2 表格应用
案例1:表格变色，单选控制表格行高亮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式 $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式 $('tbody>tr').click(function() { $(this) .addClass('selected') .siblings().removeClass('selected') .end() //end()方法，重新返回到$(this)对象 .find(':radio').attr('checked',true); }); // 如果单选框默认情况下是选择的，则高色. // $('table :radio:checked').parent().parent().addClass('selected'); //简化，注意parent()方法和parents()方法的区别: $('table :radio:checked').parents("tr").addClass('selected'); //再简化，:checked过滤选择器的作用是选取所有被选中的元素(单选框，复选框): //$('tbody>tr:has(:checked)').addClass('selected'); }) </script> </head> <body> <table> <thead> <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="radio" name="choice" value=""/></td> <td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="radio" name="choice" value="" /></td> <td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td><input type="radio" name="choice" value="" checked='checked' /></td> <td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td><input type="radio" name="choice" value="" /></td> <td>找六</td><td>男</td><td>浙江温州</td></tr> <tr><td><input type="radio" name="choice" value="" /></td> <td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="radio" name="choice" value="" /></td> <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table> </body> </html>
案例2：复选框控制表格高亮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); $('tbody>tr').click(function() { //判断当前是否选中 var hasSelected=$(this).hasClass('selected'); //如果选中，则移出selected类，否则就加上selected类 $(this)[hasSelected?"removeClass":"addClass"]('selected') //查找内部的checkbox,设置对应的属性。 .find(':checkbox').attr('checked',!hasSelected); }); // 如果复选框默认情况下是选择的，则高色. $('tbody>tr:has(:checked)').addClass('selected'); }) </script> </head> <body> <table> <thead> <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="checkbox" name="choice" value=""/></td> <td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td> <td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>找六</td><td>男</td><td>浙江温州</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" name="choice" value="" /></td> <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table> </body> </html>
上面值得注意的是那个如何判断当前复选框有没有被选中，还有就是那个三元运算。
案例3：表格展开关闭
实现单击分类，可以展示和关闭相应内容的功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('tr.parent').click(function(){ // 获取所谓的父行 $(this) .toggleClass("selected") // 添加/删除高亮，toggleClass()方法 .siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行 }).click(); }) </script> </head> <body> <table> <thead> <tr><th>姓名</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> </body> </html>
toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换,这里用来控制单击父行时高亮/取消高亮的效果。
案例3：复选框控制表格高亮
可以使用 $("table tbody tr").hide().filter(":contains('李')").show() 来筛选出含有文本李的表格行。其中hide() 方法隐藏被选元素,与 CSS 属性 display:none 类似. filter() 方法返回符合一定条件的元素.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#filterName").keyup(function(){ $("table tbody tr") .hide() .filter(":contains('"+( $(this).val() )+"')") .show(); }).keyup(); //DOM加载完毕时，绑定事件完成之后立即触发 }) </script> </head> <body> <div> <br/> 筛选： <input id="filterName" /> <br/> </div> <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> <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr> <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr> <tr><td>李四</td><td>男</td><td>湖南长沙</td></tr> </tbody> </table> </body> </html>
因为表单元素有个特点是：刷新网页后，其值保持不变，但如果这样的话会出现表单元素的值(就是筛选框里文本)还在，但是表格内容已经被刷新(也就是表格内容全显示出来了，但是筛选框里还有文本)。为了解决这个问题需要在DOM刚加载完毕时为表单元素绑定事件并立即触发该事件即可。
5.3 其他应用
案例1： 网页字体大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("span").click(function(){ var thisEle = $("#para").css("font-size"); //获取id为para的元素的字体大小，获取的值是返回的数字和单位。即16px var textFontSize = parseInt(thisEle , 10); //用parseInt()方法去掉单位，第二个参数表示进制，16px变成了16
var unit = thisEle.slice(-2); //获取单位，slice()方法返回字符串中从指定的字符开始的一个子字符串，这里从倒数第二个开始，因为单位是px var cName = $(this).attr("class"); if(cName == "bigger"){ textFontSize += 2; }else if(cName == "smaller"){ textFontSize -= 2; } $("#para").css("font-size", textFontSize + unit ); }); }); </script> </head> <body> <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> </body> </html>
需注意的是上面是如何获取到字体数值和单位的。
案例2：网页选项卡
通过隐藏和显示来切换不同的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript" > //<![CDATA[ $(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") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div .eq(index).show() //显示 <li>元素对应的<div>元素 .siblings().hide(); //隐藏其它几个同辈的<div>元素 }).hover(function(){ //添加光标滑过效果 $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }) }) //]]> </script> </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> </body> </html>
上面要注意的是$("div.tab_box>div")这个选择器，选择的是子代元素，若用$("div.tab_box div")这个选择器的话，选取的是所有的后代元素，这样当子节点里再包含<div>元素的时候就会引起程序错乱。
案例3：网页换肤
原理是通过调用不同的样式表文件来实现不同的皮肤切换，并需要将换好的皮肤记入Cookie中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <link href="css/default.css" rel="stylesheet" type="text/css" /> <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <!-- 引入jQuery的cookie插件 --> <script src="js/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li =$("#skin li"); $li.click(function(){ switchSkin( this.id ); }); var cookie_skin = $.cookie( "MyCssSkin"); //获取Cookie的值 if (cookie_skin) { switchSkin( cookie_skin ); } }); function switchSkin(skinName){ $("#"+skinName).addClass("selected") //当前<li>元素选中 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中 $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤 $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); //写入Cookie } //]]> </script> </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> </html>
上面的代码中一开始加载了两样式表，第一个是default.css，也就是不是什么皮肤，一些样式是共通的，皮肤只是改变下显示风格而已(在这里只是改变了颜色，其它的样式都是共同的)。第二个就是.....那个啥...到现在我才发现一个页面可以引入多个css样式表....汗。第三个是Cookie的使用，第七章会讲这个，现在暂且知道 $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }) 创建了一个持久并带有效路径的cookie，如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，cookie的路径用于设置能够读取cookie的顶级目录。
第五章学习总结
这章给我的感受就是......好多例子啊！以后各种参考，各种拷贝还不是美滋滋的......。总结下这章的所有案例：单行文本框获得和失去焦点时改变样式、多行文本框改变高度及滚动条高度变化、常见复选框功能的实现、下拉框的实现和应用、表单验证、表格隔行变色和单选表格行高亮、复选框控制表格行高亮、表格展开关闭、内容筛选、改变网页字体大小、网页选项卡功能和换肤功能的实现。
