《锋利的jQuery》第5章
Posted 奋斗的蜗牛cn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《锋利的jQuery》第5章相关的知识，希望对你有一定的参考价值。
一、总结第五章写过的小例子：
1、单行文本框应用，为文本框添加获得和失去焦点的应用。
2、多行文本框应用，点击“放大”或“缩小”按钮，让字放大或缩小。
3、复选框应用，“全选”，“全不选”，“反选”，“提交”
<script type="text/javascript"> $(function(){ //全选操作 $("#CheckedAll").click(function(){ $("[name=items]:checkbox").attr("checked" , true); }); //全不选操作 $("#CheckedNo").click(function(){ $("[name=items]:checkbox").attr("checked" , false); }); //反选操作 $("#CheckedRev").click(function(){ $(‘[name=items]:checkbox‘).each(function(){ $(this).attr("checked" , !$(this).attr("checked")); }); }); //提交操作 $("#send").click(function(){ var str = "你选中的是：\r\n"; $("[name=items]:checkbox:checked").each(function(){ str += $(this).val()+"\r\n"; }); alert(str); }); }) </script> </head> <body> <form action="#" method="post"> 你爱好的运动是？<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>
4、下拉框应用，通过点击按钮，将元素移到左边或右边。
<script type="text/javascript">
//实现3个功能
//1 将选中的项添加给对方
//2 将全部选项添加给对方
//3 双击某个选项将其添加给对方
$(function(){
//1 将选中的项添加给对方
$("#add").click(function(){
var options = $("#select1 option:selected"); //获取选中的选项
var remove = options.remove(); //移除选中的选项
remove.appendTo("#select2"); //追加给对方
});
//2 将全部选项添加给对方
$("#add_all").click(function(){
var options = $("#select1 option"); //获取第一个下拉列表中的所有元素
$("#select2").append(options); //追加给对方
});
//3 双击某个选项将其添加给对方
$("#select1").dblclick(function(){ //绑定双击事件
var options = $("option:selected",this); //回去选中的选项
options.appendTo("#select2");
});
//1 将选中的项移除给对方
$("#remove").click(function(){
var options = $("#select2 option:selected");
options.appendTo("#select1");
});
//2 将全部的项移除给对方
$("#remove_all").click(function(){
var options = $("#select2 option");
$("#select1").append(options);
});
//3 双击某个选项移除给对方
$("#select2").dblclick(function(){
var option = $("option:selected"); //不加this，结果相同
option.appendTo("#select1");
})
})
</script>
<style type="text/css">
.content{
display: inline-block;
}
span{
display: block;
background-color: rgba(141, 255, 183, 0.64);
}
span:hover{
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<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="content">
<select multiple id="select2" style="width:100px;height: 160px;">
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
5、表单验证，这是登录和注册界面经常用到的验证。
<script type="text/javascript"> $(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 != "" && !/[email protected]+\.[a-zA-Z]{2,4}$/.test(this.value))){ var emailErrorMsg = "请输入正确的email地址"; parent.append("<span class=‘formtips onError‘>"+ emailErrorMsg +"</span>"); }else{ var emailOkMsg = "输入正确"; parent.append("<span class=‘formtips onSuccess‘>"+ emailOkMsg +"</span>"); } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); }); //提交验证 $("#send").click(function(){ $("form.required:input").trigger(); var numError = $("form .onError").length; if(numError){ return false; } alert("注册成功，密码已发到您的邮箱，请注意查收。"); }) }); </script> <style type="text/css"> .high{ color: red; } .onError{ color:red; } .onSuccess{ color:green; } </style> </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" value="重置" id="res" /> </div> </form> </body>
6、表格变色，隔行变色以及点击实现高亮和按钮或复选框选中。
<script type="text/javascript"> $(function(){ // $("tbody>tr:odd").addClass("odd"); /*给奇数行添加样式*/ // $("tbody>tr:even").addClass("even"); /*给偶数行添加样式*/ // $("tr:contains(‘王五‘)").addClass("selected"); //单击某一行时，此行被选中，高亮显示 $("tbody>tr").click(function(){ $(this).addClass("selected") .siblings().removeClass("selected") .end() .find(":radio").attr("checked" , true); }); // $("table :radio:checked").parent().parent().addClass("selected"); //$("table :radio:checked").parents("tr").addClass("selected"); $("tbody>tr:has(:checked)").addClass("selected") }); </script> <style type="text/css"> .even{ background-color:#fff38f; } .odd{ background-color:#ffffee; } table{ border:1px solid #111111; } thead{ border-bottom:1px solid #111111; } .selected{ background-color: #aaaaaa; } </style> </head> <body> <table> <thead> <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="radio" name="items" /></td><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="radio" name="items" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="radio" name="items" /></td><td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td><input type="radio" name="items" /></td><td>赵六</td><td>男</td><td>浙江温州</td></tr> <tr><td><input type="radio" name="items" /></td><td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="radio" name="items" /></td><td>MaxMan</td><td>男</td><td>浙江杭州</td></tr> </tbody> </table> </body>
7、表格展开关闭，点击某行实现其子元素的隐藏或展示。
//表格展开关闭 $(function(){ $("tr.parent").click(function(){ $(this) .toggleClass("selected") //添加/删除高亮 .siblings(".child_"+this.id).toggle(); //隐藏/显示所谓的子行 })
8、表格内容筛选，通过输入条件进行筛选。
$(function(){ $("#filterName").keyup(function(){ $("table tbody tr").hide() .filter(":contains(‘"+this.value+"‘)").show(); }).keyup(); //DOM加载完成，绑定事件完成之后立即出发
9、网页字体大小，通过点击“放大”或“缩小”按钮，实现昂也字体的放大或缩小。
<script type="text/javascript"> $(function(){ $("span").click(function(){ var thisEle = $("#para").css("font-size"); //返回16px var textFontSize = parseFloat(thisEle , 10); //例如16px,这样会取得16 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 ); }); }) </script> </head> <body> <div id="msg"> <div id="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.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>
10、网页选项卡，通过点击不同 的按钮，下面显示相应的内容。
<script type="text/javascript"> $(function(){ var div_li = $("div.tab_menu ul li"); div_li.click(function(){ $(this).addClass("selected") //单击时加上背景色 .siblings().removeClass("selected"); //去除同胞元素的背景色 var li_order = $(this).index(); //获取当前单击的索引 $(".tab-box > div") .eq(li_order).show() .siblings().hide(); }); }) </script> <style type="text/css"> ul li{ display: inline-block; list-style: none; width: 100px; line-height:30px; border:1px solid darkgray; color: grey; } .selected{ background-color: #AFEEEE; } .hide{ display: none; } .tab-box{ border:1px solid #000000; width: 500px; height: 300px; } </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> </body>
11、网页换肤（暂时没看明白）。
以上是关于《锋利的jQuery》第5章的主要内容，如果未能解决你的问题，请参考以下文章