jQuery中常用网页效果应用
一、常用网页效果应用
1.表单应用
表单由表单标签、表单域和表单按钮组成。
1.1单行文本框应用
例：获取和失去焦点改变样式
首先，在网页中创建一个表单，HTML代码如下
<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>当文本框获取焦点后，它的颜色需要有变化;当它失去焦点后，则要恢复原来的样式。此功能极大地提升用户体验，使用户的操作可以得到及时的反馈。
可以使用CSS中的伪类选择符来实现以上的功能
CSS代码如下
input:focus , textarea:focus{
boreder: 1px solid #f00
background: #fcc;
}但是IE6并不支持除超链接元素之外的:hover伪类选择符，此时可以用jquery来弥补ie6对css支持的不足
首先在CSS中添加一个类名为focus的样式。
.focus {
border: 1px solid #f00;
background: #fcc;
} 然后再添加获取焦点和失去焦点事件
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
})1.2多行文本框应用
首先创建一个表单，其中包含评论框
<form>
<div class = "msg">
<div class="msg_caption">
<span class="bigger">放大span>
<span class="smaller">缩小span>
div>
<div>
<textarea id="comment" rows="8" clos="20">
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
div>
div>
form>
<style type="text/css">
/*定义全局属性*/
* {
margin:0; /*外边距0px*/
padding:0;/*内边距0px*/
font:normal 12px/17px Arial; /*字体颜色，默认，字体大小，字体*/
}
/*定义消息显示区*/
.msg {
width:300px; /*宽度300px*/
margin:100px; /*定义外边距100px*/
}
/*定义消息中的标题*/
.msg_caption {
width:100%; /*宽度100%，此处就是300px*/
overflow:hidden; /*溢出范围就会自动裁剪*/
margin-bottom:1px;/*内底边距1px*/
}
/*定义消息菜单选项*/
.msg_caption span {
display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
float:left; /*浮动在左边*/
margin:0 2px; /*外边距上下为0左右2px*/
padding:4px 10px; /*内边距上下为4px左右10px*/
background:#898989; /*背景颜色*/
cursor:pointer;/*鼠标的形状，手形*/
color:white; /*字体颜色*/
}
/*定义消息文本域*/
.msg textarea{
width:300px; /*宽度300px*/
height:80px;/*高80px*/
border:1px solid #000;/*边框大小1px，边框粗细 solid 边框颜色 黑色*/
}
style>然后，需要思考以下两种情况
(1)当单击放大按钮后，如果评论框的高度小于500px，则在原有高度的基础上增加50px。
(2)当单击”缩小”按钮后，如果评论框的高度大于50px，则在原有高度的基础上减去50px。
$(function(){
var $comment = $("#comment");//获取评论宽
$(".bigger").click(function(){//放大按钮
var height = $comment.height();//当前评论框高度
var number = 50;//增量
if( height < 500){
//重新设置高度
$comment.height(height + number);
}
});
$(".smaller").click(function(){//缩小按钮
var height = $comment.height();//当前评论框高度
var number = 50;//减量
if( height > 50){
//重新设置高度
$comment.height(height - number);
}
});
});但是，此时评论框显得很呆板，缺乏缓冲效果。改用自定义动画animate来实现。
$(function(){
var $comment = $("#comment");//获取评论宽
$(".bigger").click(function(){//放大按钮
var height = $comment.height();//当前评论框高度
var number = 50;//增量
if(!$comment.is(":animated")){//判断是否处于动画
if( height < 500){
//重新设置高度
//$comment.height(height + number);
//清空当前正在执行动画，然后在加入动画
$comment.stop(true).animate({height: height + number},300);
}
}
});
$(".smaller").click(function(){//缩小按钮
var height = $comment.height();//当前评论框高度
var number = 50;//减量
if(!$comment.is(":animated")){//判断是否处于动画
if( height > 50){
//重新设置高度
//$comment.height(height - number);
//清空当前正在执行动画，然后在加入动画
$comment.stop(true).animate({height: height - number},300);
}
}
});
});2.滚动条高度变化
通过控制多行文本框的滚动条的变化，使文本框里的内容滚动。
与控制高度的方法相同，只不过此处需要控制的是另一个属性，scrollTop。
$(".up").click(function(){//向上翻一页
var height = $comment.height();//当前评论框高度
if(!$comment.is(":animated")){//判断是否处于动画
if( height > 50){
//清空当前正在执行动画，然后在加入动画
$comment.stop(true).animate({scrollTop: "-="+height},300);
}
}
});
$(".down1").click(function(){//向下翻一页
var height = $comment.height();//当前评论框高度
if(!$comment.is(":animated")){//判断是否处于动画
//清空当前正在执行动画，然后在加入动画
$comment.stop(true).animate({scrollTop: "+="+height},300);
}
});
1.3复选框应用
对复选框最基本的应用，就是对复选框进行全选、反选和全不选等操作。复杂的操作要与选项挂钩，来达到各种级联反应效果。
首先在空白网页中创建一个表单，其中放入一组复选框，HTML代码如下：
如果需要使复选框处于选中或者不选状态，必须通过控制元素的checked属性来达到目的。
如果属性checked的值为true，说明被选中；如果值为false，说明没被选中。因此可以基于这个属性来完成需求。
<script type="text/javascript">
$(function(){
//全选
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').prop('checked', true);
});
//全不选
$("#CheckedNo").click(function(){
$('[type=checkbox]:checkbox').prop('checked', false);
});
//反选
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
//此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
//$(this).attr("checked", !$(this).prop("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";
})
alert(str);
});
})如果我们要实现，用一个checkbox选项，代替全选和全不选操作。将如何实现呢？
//全选/全不选
$("#CheckedAll").click(function(){
if(this.checked){//如果当前单击的复选框被选中
$('[name=items]:checkbox').prop('checked', true);
}else{
$('[name=items]:checkbox').prop('checked', false);
}
});进一步观察思考后发现，所有复选框的checked属性的值和控制全选的复选框的checked属性的值是相同的，因此可以省略if判断，直接赋值。
//全选/全不选
$("#CheckedAll").click(function(){//
$('[name=items]:checkbox').prop('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，说明复选框组至少有一个未被选中。
根据以上思路，可以写出如下jquery代码：
$(function(){//网页加载时
$("[name=items]:checkbox").click(function(){
var flag = true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag = false;
}
});
$("#CheckedAll").prop("checked",flag);
});
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').prop('checked', this.checked);
});
})此时id为CheckedAll的复选框和复选框组就可以联动起来了。
思路二：
(1)对复选框组绑定单击事件
判断复选框的总数是否与选中的复选框数量相等。
如果相等，则说明全选中了，id为CheckedAll的复选框应当处于选中状态。否则不选中。
$("[name=items]:checkbox").click(function(){
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率
var $tmp = $("[name=items]:checkbox");
//用filter()方法筛选出选中的复选框，并直接给checkedall赋值
$("#CheckedAll").attr("checked",$tmp.length==$tmp.filter(":checked").length);
});1.4下拉框应用
1.5表单验证
以一个简单的用户注册为例。
首先新建一个表单。html代码如下：
在表单内class属性为required的文本框式必填项，因此要与非必填表单元素加以区别。可以用append()来完成
//为必填选项添加红星
$("form :input.required").each(function(){
var $required = $("*");//创建元素
$(this).parent().append($required);//将他追加到文档中
})当用户名文本框中填写完信息后，将光标的焦点从用户名移出时，需要判断用户名是否符合验证规则。当光标的焦点从邮箱文本框移出时，需要即时判断邮箱填写是否正确，因此需要给表单元素添加失去焦点事件，即blur。
//为表单元素添加失去焦点事件
$("form :input").blur(function(){
var $parent = $(this).parent();//选取含有子元素和文本的节点
//验证用户名
if($(this).is("#username")){
if(this.value == "" || this.value.length < 6){
var errorMsg = "请输入至少6位的用户名.";
$parent.append('' + errorMsg + '');
}else{
var okMsg = "输入正确.";
$parent.append('' + okMsg + '');
}
}
//验证邮箱
if($(this).is("#email")){
if(this.value=="" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var errorMsg = "请输入正确的E-mail地址.";
$parent.append('' + errorMsg + '');
}else{
var okMsg = "输入正确.";
$parent.append('' + okMsg + '');
}
}
})由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中，最后出现了多次的提醒信息。因此，需要在创建提醒元素之前，将当前元素以前的提醒元素都删除。可以使用remove()方法来完成。
$parent.find(".formtips").remove();//删除以前的节点当鼠标在表单元素中多次失去焦点时，都可以提醒用户填写是否正确。但是，如果用户无视错误提醒，执意要单击提交按钮时，为了使表单那填写元素进行一次整体的验证。可以使用trigger()方法来触发blur事件，从而达到验证效果。如果填写错误，就会以红色提醒用户；如果用户名和邮箱都不符合规则，那么就有两处错误，即有两个class为onError的元素，因此可以根据class为onError 元素的长度来判断是否可以提交。
如果长度为0，即true，说明可以提交了，如果长度大于0，则false，说明有错误，需要阻止表单提交。
阻止表单提交用return false；
$("#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(){
var $parent = $(this).parent();//选取含有子元素和文本的节点
$parent.find(".formtips").remove();//删除以前的节点
//验证用户名
if($(this).is("#username")){
if(this.value == "" || this.value.length < 6){
var errorMsg = "请输入至少6位的用户名.";
$parent.append('' + errorMsg + '');
}else{
var okMsg = "输入正确.";
$parent.append('' + okMsg + '');
}
}
//验证邮箱
if($(this).is("#email")){
if(this.value=="" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var errorMsg = "请输入正确的E-mail地址.";
$parent.append('' + errorMsg + '');
}else{
var okMsg = "输入正确.";
$parent.append('' + okMsg + '');
}
}
}).keyup(function(){
$(this).triggerHandler("blur");//trigger("blur")不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。而triggerHandler方法只会触发为元素绑定的blur事件，而不触发浏览器默认的blur事件。
}).focus(function(){
$(this).triggerHandler("blur");
})客户端校验只是用户提升用户操作体验，服务器端仍需对用户输入的数据进行合法性验证
2.表格应用
1.表格变色
<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>Raintd><td>男td><td>浙江杭州td>tr>
tbody>
table>首先定义两个CSS样式
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
注意$("tr:odd")和$("tr:even")选择器中索引是从0开始，因此第一行是偶数
然后选择表格奇数行和偶数行分别添加样式，可以使用选择器来完成。
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
如果需要某一行高亮显示状态，可以使用contains选择器来实现
$("tr:contains('王五')").addClass("selected");
2.单选框控制表格行高亮
//为表格行添加单击事件
$("tbody>tr").click(function(){
$(this)
.addClass("selected")
.siblings().removeClass("selected")
.end()
.find(":radio").prop("checked",true);
});这样，就可以通过单击每行来实现表格行高亮，同时此行所在的单选框也被选中。
上面代码中使用了end()方法。当前对象是$(this),当进行addClass(“selected”)操作时，对象并未发生改变，当执行
//初始化表格的时候，如果默认已经有单选框被选中，那么也需要被处理
$("table :radio:checked").parent().parent().addClass("selected");
注意：$("table :radio:checked").parent().parent().addClass("selected");是通过parent方法逐步向父节点获取相应的元素的，也可以通过parents方法直接获取
$("table :radio:checked").parents().addClass("selected");
此外，如果通过has选择器也可以进一步简化，表示含有选中的单选框的tr行将被高亮显示
$("tbody>tr:has(:checked)").addClass("selected");最后代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>title>
<script src="jquery-1.11.3.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()
.find(":radio").prop("checked",true);//这里为什么不用attr来设置属性呢。因为jquery版本升级到1.6以后，对于checked，true和false之类的对象，必须用prop方法来设置和修改。
});
//初始化表格的时候，如果默认已经有单选框被选中，那么也需要被处理
//$("table :radio:checked").parent().parent().addClass("selected");
//简化
//$("table :radio:checked").parents().addClass("selected");
//再简化
$("tbody>tr:has(:checked)").addClass("selected");
})
script>
<style type="text/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;
}
style>
head>
<body>
<table>
<thead>
<tr><th>姓名th><th>性别th><th>暂住地th>tr>
thead>
<tbody>
<tr><td><input type="radio" name="choice" />td><td>张三td><td>男td><td>湖南永州td>tr>
<tr><td><input type="radio" name="choice" />td><td>李四td><td>女td><td>湖南郴州td>tr>
<tr><td><input type="radio" name="choice" checked="checked" />td><td>王五td><td>男td><td>湖南长沙td>tr>
<tr><td><input type="radio" name="choice" />td><td>Raintd><td>男td><td>浙江杭州td>tr>
tbody>
table>
body>
html>那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点！
3.复选框控制表格行高亮
复选框控制表格行与单选框不同，复选框能选择多行变色，并没有限制被选择的个数。当单击某行时，如果已经高亮了，则移除高亮样式并去掉当前行复选框的选中状态；如果还没高亮，则添加高亮样式并将当前行的复选框选中。
判断是否已经高亮，可以使用hasClass()方法来完成。
//为表格行添加单击事件
$("tbody>tr").click(function(){
if($(this).hasClass('selected')){//判断是否含有selected高亮样式
//如果已经高亮，移除高亮样式，并且去掉复选框选中状态
$(this)
.removeClass("selected")
.find(":checkbox").prop("checked",false);
}else{
//没有高亮，添加高亮，并且为当前复选框选中
$(this)
.addClass("selected")
.find(":checkbox").prop("checked",true);
}
});
$("tbody>tr:has(:checked)").addClass("selected");
此外，在不改变设计思路的前提下，上面的代码还可以再简化成如下代码：
$('tbody>tr').click(function(){
//判断当前是否选中
var hasSelected = $(this).hasClass("selected");
// 如果选中，则移除selected类，否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"]('selected')
//查找内部的checkbox，设置对应的属性
.find(':checkbox').prop("checked" , !hasSelected);
})2.2表格展开关闭
在上例的人员表格的基础上，增加人员分类。
<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>Raintd><td>男td><td>浙江杭州td>tr>
<tr class="parent" id="row_03"><td colspan="3">后台开发组td>tr>
<tr class="child_row_03"><td>张三2td><td>男td><td>湖南永州td>tr>
<tr class="child_row_03"><td>李四2td><td>女td><td>湖南郴州td>tr>
<tr class="child_row_03"><td>王五2td><td>男td><td>湖南长沙td>tr>
<tr class="child_row_03"><td>Rain2td><td>男td><td>浙江杭州td>tr>
tbody>
table>现在需要实现的是单击分类行时，可以关闭相应的内容。例如单击前台设计组行，则它对应的张三李四两行收缩
在这个表格中，给每个tr元素设置属性是非常重要的。分类行设置了class=parent属性，同时给他们设置了id属性，而在他们下面的行，只设置了class属性，并且这个class值是在id值的基础上通过加上child_来设置的。基于以上规则，jquery实现代码如下：
//显示/隐藏分类
$("tr.parent").click(function(){//获取父行
$(this)
.toggleClass("selected") //添加和删除
.siblings(".child_" + this.id).toggle();//隐藏/显示所谓的子行
});2.3表格内容筛选
在前面的例子中，如果要高亮显示王五那一行，可以使用contains选择器来完成。
$("tr:contains('王五')").addClass("selected");//选择器contains，能匹配包含指定文本的元素利用该选择器再结合jquery的filter()筛选发那个发，可以实现表格内容的过滤。
例如使用下面的jquery代码就可以筛选出含有文本“李”的表格行
//表格内容筛选:包含文本含有‘李’的行
$("table tbody tr").hide()
.filter(":contains(李)").show();
//时时查询
$("#filterName").keyup(function(){
var name = $(this).val();
$("table tbody tr").hide()
.filter(":contains('" + name + "')").show();
})注意文本框中输入王时，就会筛选出相应的表格行。
如果文本框里面一开始就包含有默认值，它是不会查询的。怎么解决呢？
只要在文档加载完毕时，为表单元素绑定事件并且立即触发该事件即可。
$("#filterName").keyup(function(){
var name = $(this).val();
$("table tbody tr").hide()
.filter(":contains('" + name + "')").show();
}).keyup();//在加载完成触发绑定事件。这是触发事件trigger('keyup')的简写版。3.其他应用
3.1网页字体大小
在某些网站经常有放大和缩小字号的控制按钮，通过单击他们，可以使网页的文字呈现不同的大小。
首先在空白的网页上添加两个字号控制按钮和一些文字，HTML代码如下：
<form>
<div class = "msg">
<div class="msg_caption">
<span class="bigger">放大span>
<span class="smaller">缩小span>
<span class="up">上一页span>
<span class="down1">下一页span>
<span class="bigger2">字体大span>
<span class="smaller2">字体小span>
div>
<div id="para">
<textarea id="comment" rows="8" clos="20">
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
textarea>
div>
div>
form>
//放大字体
$(".bigger2").click(function(){
var thisSize = $(":input").css("font-size");//获取当前字体大小
var textFontSize = parseFloat(thisSize,10);
var unit = thisSize.slice(-2);
$(":input").css("font-size",textFontSize+2+unit);
})parseFloat()方法是去掉单位。slice()方法返回字符串中从指定的字符开始的一个子字符串。因为这里使用的度量单位px是两个字符，所以指定字符串应该从倒数第2个字符开始。
缩小字体，与放大字体类似。
//缩小字体
$(".smaller2").click(function(){
var thisSize = $(":input").css("font-size");//获取当前字体大小
var textFontSize = parseFloat(thisSize,10);
var unit = thisSize.slice(-2);
$(":input").css("font-size",textFontSize-2+unit);
})3.2网页选项卡
制作选项卡的原理比较简单，通过隐藏和显示来切换不同的内容
首先构建一个HTML结构。
<div class="tab">
<div class="tab_menu">
- class="selected">时事
- 体育
- 娱乐
div>
div>
<div class="tab_box">
<div>时时新闻div>
<div class="hide">体育div>
<div class="hide">娱乐div>
div>
*{ 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 { width:400px;clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
首先需要为li元素绑定单击事件，
$div_li.click(function(){
//绑定单击事件
//将当前单击的li元素高亮，然后去掉其他同辈li元素的高亮
$(this).addClass("selected") //当前li元素高亮
.siblings().removeClass("selected");//去掉其他同辈li元素高亮
});按钮切换了，但是选项卡内容没有切换。
从选项卡的基本结构可以知道，每个li元素都分别对应一个div区域。因此可以根据当前单击的li元素在所有li元素中的索引，然后通过索引来显示对应的区域。
$(function(){
var $div_li = $("div.tab_menu ul li");
$div_li.click(function(){
//绑定单击事件
//将当前单击的li元素高亮，然后去掉其他同辈li元素的高亮
$(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元素
});
});
要注意 ("div.tabbox>div")这个子选择器，如果用 (“div.tab_box div”)子选择器，当子节点里再包含div元素时，就会引起程序错乱。因此获取当前选项卡下的子节点，才是这个例子所需要的。
例如光标滑入和滑出效果，可以添加hover事件。
$div_li.click(function(){
//绑定单击事件
//将当前单击的li元素高亮，然后去掉其他同辈li元素的高亮
$(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");
})
3.3网页换肤
自从Web2.0开始流行后，很多网站更加注重用户自定义，例如在网页上用户可以自定义新闻内容，可以任意拖动网页内容，也可以给网页选择一套自己喜欢的颜色等。
网页换肤的原理就是通过调用不同的样式表文件来实现不同皮肤的切换，并且需要将换好的皮肤计入Cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。
首先设置HTML的结构，在网页中添加选择按钮《li》元素和基本内容，代码如下。
<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>在设计HTML代码时，用了一些小技巧，就是将皮肤选择按钮li元素的id与网页皮肤样式文件名称设置的相同。这样就可以使完成换肤操作简化很多。
"css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />为皮肤选择按钮添加单击事件，
当皮肤选择按钮被单击后，当前皮肤就被勾选。
将网页内容换肤
首先完成第一步，它与前面选项卡例子中高亮当前选项的代码相同。
$(function(){
var $li = $("#skin li");
$li.click(function(){
//绑定单击事件
//将当前单击的li元素高亮，然后去掉其他同辈li元素的高亮
$("#" + this.id).addClass("selected") //当前li元素高亮
.siblings().removeClass("selected");//去掉其他同辈li元素高亮
});
});
然后完成第2步，即设置网页内容皮肤。前面为link元素设置id此时可以通过attr()方法为link元素的href属性设置不同的值。
$(function(){
var $li = $("#skin li");
$li.click(function(){
//绑定单击事件
//将当前单击的li元素高亮，然后去掉其他同辈li元素的高亮
$("#" + this.id).addClass("selected") //当前li元素高亮
.siblings().removeClass("selected");//去掉其他同辈li元素高亮
$("#cssfile").attr("href","css/"+this.id+".css");//设置不同皮肤
});
});但是当客户刷新网页或者关闭浏览器后，皮肤又会被初始化，因此需要将当前选则的皮肤进行保存。
jquery中有一款Cookie插件，此处就将其引入，代码如下：
将当前皮肤保存进Coookie后，代码如下：
$.cookie("myCsskin",this.id,{path:'/' , expires:10});//计入cookie
保存进Cookie后，就可以通过Cookie来获取当前的皮肤了。如果Cookie确实存在，则将当前皮肤设置为Cookie的值。
$(function(){
var $li = $("#skin li");
$li.click(function(){
//绑定单击事件
//将当前单击的li元素高亮，然后去掉其他同辈li元素的高亮
$("#" + this.id).addClass("selected") //当前li元素高亮
.siblings().removeClass("selected");//去掉其他同辈li元素高亮
$("#cssfile").attr("href","css/"+this.id+".css");//设置不同皮肤
$.cookie("myCsskin",this.id,{path:'/' , expires:10});//计入cookie
});
var cookie_skin = $.cookie("myCsskin");
if(cookie_skin){
$("#" + cookie_skin).addClass("selected")
.siblings().removeClass("selected");//
$("#cssfile").attr("href","css/"+cookie_skin+".css");//设置不同皮肤
$.cookie("myCsskin",cookie_skin,{path:'/' , expires:10});//计入cookie
}
});此时，网页换肤功能不仅能正常切换，而且也能保存到Cookie中，当用户刷新网页仍然是当前选择的皮肤
观察click事件中的函数内容与if(cookie_skin){}内的判断内容类似，只是有一个变量不同，因此可以通过传递不同的参数。就可以多次调用。
function switchSkin(skinName){
$("#" + skinName).addClass("selected")
.siblings().removeClass("selected");//
$("#cssfile").attr("href","css/"+skinName+".css");//设置不同皮肤
$.cookie("myCsskin",skinName,{path:'/' , expires:10});//计入cookie
}然后再单击事件和if(cookie_skin){}内分别调用对应的参数。
function switchSkin(skinName){
//绑定单击事件
//将当前单击的li元素高亮，然后去掉其他同辈li元素的高亮
$("#" + skinName).addClass("selected") //当前li元素高亮
.siblings().removeClass("selected");//去掉其他同辈li元素高亮
$("#cssfile").attr("href","css/"+skinName+".css");//设置不同皮肤
$.cookie("myCsskin",skinName,{path:'/' , expires:10});//计入cookie
}
$(function(){
var $li = $("#skin li");
$li.click(function(){
switchSkin(this.id);
});
var cookie_skin = $.cookie("myCsskin");
if(cookie_skin){
switchSkin(cookie_skin);
}
});