《锋利的jQuery》要点归纳——jQuery对表单、表格的操作及更多应用（下：其他应用）

　　一个月来，公司的项目近于结尾，很多问题暴露了出来。比如，jquery的遍历和异步ajax的内容发生了冲突，jquery已经执行后，新增加的ajax内容无法执行事件，这时候的解决办法就是使用传统的onclick()等事件来即时调用传统js函数，在事件中传入this对象，如onclick(this)，再使用jquery在函数中操作。

三、其他应用

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

放大
缩小

$(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）

  
  


   
   


    
    
选项1
选项2
选项3


   
   

   
   


    
    

     
     选项1对应内容
    
    

    
    

     
     选项2对应内容
    
    

    
    

     
     选项3对应内容
    
    

   
   

  
  
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实现换肤功能

  
  
皮肤0
皮肤1
皮肤2


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);
}
});