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

一个月来，公司的项目近于结尾，很多问题暴露了出来。比如，jquery的遍历和异步ajax的内容发生了冲突，jquery已经执

行后，新增加的ajax内容无法执行事件，这时候的解决办法就是使用传统的onclick()等事件来即时调用传统js函数，在事
件中传入this对象，如onclick(this)，再使用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);
}
});

转载于:https://www.cnblogs.com/bienfantaisie/archive/2010/11/21/1882985.html