jQuery对表单、表格的操作及更多应用（下：其他应用）

内容摘录自锋利的JQuery一书

三、其他应用

 
1 网页字体大小控制（P164）

<span class="bigger">放大</span>
<span class="smaller">缩小</span>
<p id="para"></p>

$(function(){
$("span").click(function(){
var thisEle = $("#para").css("font-size");//获取当前字号，带单位
var textFontSize = parseFloat(thisEle,10);//解析字符串并返回数字,参数10代表10进制
var unit = thisEle.slice(-2);//slice()方法返回字符串中从指定的字符开始的一个子字符串，

//用以截取单位
var cName = $(this).attr("class");//此处和下面的判断很有意思，可以免得再写一遍代码
if(cName == "bigger"){
if(textFontSize <= 22){//限制无限放大
textFontSize += 2;//加大字号
}
}else if(cName == "smaller"){
if(textFontSize >= 12){//限制无限缩小
textFontSize -= 2;
}
}
$(#para).css("font-size",textFontSize + unit);//记得拼上单位
});
});

 

2 网页选项卡（P167）

<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">选项1</li>
<li class="selected">选项2</li>
<li class="selected">选项3</li>
</ul>
</div>
<div class="tab_box">
<div>选项1对应内容</div>
<div class="hide">选项2对应内容</div>
<div class="hide">选项3对应内容</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);//获取当前单击的li元素在全部li元素中的索引，这个很有意思
$(".tab_box > div").eq(index).show().siblings().hide();//根据选项的索引

//设置选项对应内容的显示或隐藏状态
}).hover(function(){
$(this).addClass("hover");//设置鼠标经过状态
},function(){
$(this).removeClass("hover");//移除鼠标经过状态
});

 

3 网页换肤（P169）
通过更换css并且记录进cookie实现换肤功能

<!--引入带id的css-->
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<!--引入cookie插件，本插件下载地址：http://plugins.jquery.com/project/cookie，

//介绍见本书P237-->
<script src="js/jquery.cookie.js" type="text/javascript"></script>

<!--换肤按钮-->
<ul id="skin">
<li id="skin_0" title="皮肤0" class="selected">皮肤0</li>
<li id="skin_1" title="皮肤1">皮肤1</li>
<li id="skin_2" title="皮肤2">皮肤2</li>
</ul>

var $li = $("#skin li");
$li.click(function(){
$("#" + this.id).addClass("selected").siblings().removeClass("selected");

 //以id为选择器，当前设置选中，其他移除选中
$("#cssfile").attr("href","css/" + this.id + ".css");//把id赋给href作为css名称，

//达到换肤目的
$.cookie("MyCssSkin",this.id,{path: '/', expires:10});//把当前id记入cookie并命名
});

var cookie_skin = $.cookie("MyCssSkin");
if(cookie_skin){//判断cookie存在
$("#"+cookie_skin).addClass("selected").siblings().removeClass("selected");

 //以cookie记录的id为选择器，当前设置选中，其他移除选中
$("#cssfile").attr("href","css/" + cookie_skin + ".css");

 //cookie记录的id赋给href作为css名称，达到换肤目的
$.cookie("MyCssSkin",cookie_skin,{path: '/', expires:10});

 //把cookie记录的id重新记入cookie
}

因click事件中的函数内容与if(cookie_skin){}内的判断内容相似，只有一个变量不同，因此可以通过给函数传递不同的参
数，达到多次调用（抽象化）的目的。

function switchSkin(skinName){
$("#"+skinName).addClass("selected").siblings().removeClass("selected");
$("#cssfile").attr("href","css/" + skinName + ".css");
$.cookie("MyCssSkin",skinName,{path: '/', expires:10});
}
$(function(){
var $li = $("#skin li");
$li.click(function(){
switchSkin(this.id);
});
var cookie_skin = $.cookie(MyCssSkin");
if(cookie_skin){
switchSkin(cookie_skin);
}
});