锋利的jQuery第5章 jQuery对表单、表格的操作及更过应用
第一部分 jQuery对表单的操作
1,button和checkbox的例子：
form表单
<form 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="羽毛球" />羽毛球 <input type="checkbox" name="items" value="皮球" />皮球 <input type="checkbox" name="items" value="排球" />排球 <br /> <input type="button" id = "CheckAll" value = "全选" /> <input type="button" id="CheckNo" value="全不选" /> <input type="button" id="CheckRev" value="反选" /> <input type="button" id="Send" value="提交" /> </form>
jQuery代码
$("#CheckAll").click(function () { $("[name=items]:checkbox").attr("checked", true); //设置属性 }); $("#CheckNo").click(function () { $("[name=items]:checkbox").attr("checked", false); //false不加引号 }); $("#CheckRev").click(function () { $("[name=items]:checkbox").each(function () { this.checked = !this.checked; //this就是checkbox }); //each }); $("#Send").click(function () { var str = "你喜欢的运动有:\r\n"; $('[name=items]:checkbox:checked').each(function () { str += $(this).val() + "\r\n"; //获取值 }); alert(str); });
2,checkbox全选
form
<form action=""> 你爱的远动有？ <input type="checkbox" id="CheckAll" />全选/全不选 <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="羽毛球" />羽毛球 <input type="checkbox" name="items" value="排球" />排球 <br /> <input type="button" id="Send" value="提交" /> </form>
View Code
$("#CheckAll").click(function () { //单击全选时，所有复选框值与本框相同 $("[name=items]:checkbox").attr("checked", this.checked); }); //如果有一个没有选中，取消全选 $("[name=items]:checkbox").click(function () { //选择其中一个要判断全选框是否有效 var flag = true; $("name=items]:checkbox").each(function () { if (this.checked == false) { flag = false; }; //if }); $("#CheckAll").attr("checked", flag); });
对于input的disabled属性，可以使用方法prop()获取，仅仅会返回true或false如：$("#checkbox").prop("disabled");
不会返回disabled或“”，只会返回true/false. 这个时候不适合用attr();
3，表单验证源代码：
View Code
<!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-1.3.1.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>'); } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); });//end blur //提交，最终验证。 $('#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>
不知道为什么，有时候看着输入和书本上一样，但是不出效果。最后就直接把源码粘贴上去了。
第二部分
现在我发现，如果我把html和css直接复制过来，然后专注与jQuery代码，心里舒服很多，因此我打算这样练习，专门练习jQuery.
1,隔行变色的例子：
(1)
CSS
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;}
html
<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>
$("tbody > tr:even").addClass("odd"); $("tbody > tr:odd").addClass("even");
我默认的都是在 $(function(){})中写的代码。
(2)单选框的隔行变色
html
<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>
$("tbody>tr:even").addClass("even"); $("tbody>tr:odd").addClass("odd"); $("tbody>tr").click(function () { $(this).addClass("selected") .siblings().removeClass("selected") .end() //end()方法将对象从siblings返回到this .find(":radio").attr("checked", true); }); //如果有默认选中的，加载时显示parents()返回祖先，参数是某个祖先 $("table :radio:checked").parents("tr").addClass("selected");
end()方法将对象返回到this
(3)复选框选中变色
html
<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>
$("tbody>tr").click(function () { if ($(this).hasClass("selected")) { //单击前被选中 $(this).removeClass("selected") //移除选中 .find(":checkbox").attr("checked", false); } else { $(this).addClass("selected").find(":checkbox").attr("checked", true); } });
2,表格展开伸缩
css
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;width:100px;}
.parent { background:#FFF38F;cursor:pointer;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
(1)
html
<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>
$("tr.parent").click(function () {
$(this).toggleClass("selected") //在类之间切换
.siblings(".child_" + this.id).toggle(); //显示与隐藏
}).click();//加载时就触发，隐藏
3,表格内容过滤
View Code
table { border:0;border-collapse:collapse;}
div{font:normal 12px/17px Arial;}
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;width:100px;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
html
<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>
//过滤filter,包含contains $("#filterName").keyup(function () { $("tbody>tr").hide().filter(":contains('" + $(this).val() + "')") .show(); }).keyup();
4,控制字体大小
css
* { margin:0; padding:0; }
.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;font-size:12px;color:white; }
.msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}
html
<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").click(function () { var font = $("#para").css("font-size"); //字体大小是样式，不是attr var fontSize = parseFloat(font, 10); //按照10进制转为数字 var unit = font.slice(-2); //从倒数第二个字符截取单位px var className = $(this).attr("class"); //获取clsss属性 if (className == "bigger") { if (fontSize < 30) { fontSize += 4; //增加 } } else if (className == "smaller") { if (fontSize > 20) { fontSize -= 4; } }; $("#para").css("font-size", fontSize + unit);//重新设置字体大小 });
注意字体大小是样式，slice(-2); //从倒数第二个字符截取单位px
parseFloat(font, 10); //按照10进制转为数字
5 选项卡
css
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:240px;margin:50px;}
.tab_menu { clear:both;}
.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
html
<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>
var $div_li = $(".tab_menu > ul li"); $div_li.click(function () { $(this).addClass("selected").siblings().removeClass("selected"); var index = $div_li.index(this); //获取索引 $(".tab_box >div").eq(index).show() .siblings().hide(); }).hover(function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); });
总结：好了，网页换肤就不写了，主要就是改变css连接来完成。
感觉这样子挺好的，专注jQuery,把css,html复制过来。
