《锋利的JQuery》读书要点笔记4——表格表单的操作
第五章 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的顶级目录。
第五章学习总结
这章给我的感受就是......好多例子啊！以后各种参考，各种拷贝还不是美滋滋的......。总结下这章的所有案例：单行文本框获得和失去焦点时改变样式、多行文本框改变高度及滚动条高度变化、常见复选框功能的实现、下拉框的实现和应用、表单验证、表格隔行变色和单选表格行高亮、复选框控制表格行高亮、表格展开关闭、内容筛选、改变网页字体大小、网页选项卡功能和换肤功能的实现。
《锋利的JQuery》读书要点笔记4——表格表单的操作的更多相关文章
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- HTML--绝对路径, 表格,表单, 框架
URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...
- HTML表格表单综合——用户注册表
今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器
<锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...
- 《锋利的jQuery》读书要点笔记7——制作商城网页：网站脚本
第8章 用jQuery打造个性网站 上一节将网页的样式设计完了,现在开始用jQuery来编写网站的脚本.首先要确定的是应该完成哪些功能. 首页应该完成的功能是: 详情页: 这个页面要完成的效果是: 接 ...
随机推荐
- JavaWeb 基于Session的用户登陆注销实现
通过Session来存储用户的部分登陆信息来验证用户是否在线,这应该时最容易实现的一种Web端方案,本文以SSM(Spring.SpringMVC.myBatis)框架为载体,来具体实现这套登陆系统. ...
- 解决jQuery load()加载GB2312页面时出现乱码
jquery的字符集是utf-8,load方法加载完GB2312编码静态页面后,出现中文乱码. 这是jQueryAJAX.html <!DOCTYPE html PUBLIC "-// ...
- BZOJ4361 isn（动态规划+树状数组+容斥原理）
首先dp出长度为i的不下降子序列个数,显然这可以树状数组做到O(n2logn). 考虑最后剩下的序列是什么,如果不管是否合法只是将序列删至只剩i个数,那么方案数显然是f[i]*(n-i)!.如果不合法 ...
- 【题解】CQOI2015任务查询系统
主席树,操作上面基本上是一样的.每一个时间节点一棵树,一个树上的每个节点代表一个优先级的节点.把开始和结束时间点离散,在每一棵树上进行修改.注意因为一个时间节点可能会有多个修改,但我们要保证都在同一棵 ...
- JS容易理解错误的地方
在这端代码执行的末尾,你会不会hi变量回事函数中的hi了?你会不会认为这不是按引用传递了? 对值传递和引用传递产生质疑了? 1 var hi = {}; 2 function sayHello(hi) ...
- Android 异步通信：图文详解Handler机制工作原理
前言 在Android开发的多线程应用场景中,Handler机制十分常用 今天,我将图文详解 Handler机制 的工作原理,希望你们会喜欢 目录 1. 定义 一套 Android 消息传递机制 2. ...
- codeforces 1015C
C. Songs Compression time limit per test 1 second memory limit per test 256 megabytes input standard ...
- 编译 openssl 0.9.8zc 出现 error C2220: warning treated as error - no 'object' file generated
remove the /WX option from CFLAG
- postfix导致maillog填满磁盘空间的巨坑！
双休日回家pull在公司修改的代码...于是菜鸟的linux探索之路开始了 1.df -f发现磁盘又占满了(之前是node的error) 2.发现maillog整整10个G,无数条(Jul 7 04: ...
- Spring - IoC(4): p-namespace & c-namespace
p 命名空间 p 命名空间允许你使用 bean 元素的属性而不是 <property/>子元素来描述 Bean 实例的属性值.从 Spring2.0 开始,Spring 支持基于 XML ...