上一次和大家分享了如何實現換膚功能，但是script代碼好像有點長，所以這次打算使用cookie.js插件來實現換膚功能，好啦，我們開始吧。

jQuery.cookie.js下載:https://github.com/carhartl/html' target='_blank'>jquery-cookie/

先來了解下cookie.js如何使用。

先導入：

 script type= text/javascript src= js/jquery-1.8.3.js /script !--jQuery版本最好是1.3.1以上--  script type= text/javascript src= js/jquery.cookie.js /script 

然后就可以使用了。

$.cookie( the_cookie //讀取Cookie值$.cookie( the_cookie , the_value //設置cookie的值$.cookie( the_cookie , the_value , {expires: 7, path: / , domain: example.com , secure: true});//新建一個cookie, expires 是有效天數, path 是保存路徑, domain 是創建 cookie的網頁所擁有的域名, secure 是cookie的傳輸是否使用安全協議（HTTPS）$.cookie( the_cookie , the_value //新建cookie$.cookie( the_cookie , null); //刪除一個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  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title cookie的使用 /title  script type= text/javascript src= js/jquery-1.8.3.js /script  script type= text/javascript src= js/jquery.cookie.js /script  style .huanFu{ float:right;.huanFu ul li{ width:30px;height:30px; list-style:none; margin:0 5px; float:left; cursor:pointer; border:1px solid #000;.fu1{background-color:#F00;}.fu2{background-color:#0F0;}.fu3{background-color:#00F;}.fu4{background-color:#FF0;}.huanFu ul li.select{border:3px solid #000;margin-top:-3px;} /style  script $(function(){ $( .huanFu ul li ).on( click ,function(){ var piFu=$(this).attr( fuName //取得選擇皮膚的fuName值 $( body ).attr( class ,piFu);//給body有class加上fuName值，也就是添加對應的背景色 $(this).addClass( select ).siblings().removeClass( select //選擇中的li才有大黑框選中，其余去除大黑框選中效果 $.cookie( MySkin ,piFu,{path: / ,expires:10});//創建cookie,并保存到本地cookie中 var cookieSkin=$.cookie( MySkin //取出本地cookie中的保存的值 if(cookieSkin){ $( .huanFu ul li[fuName= +cookieSkin+ ] ).addClass( select ).siblings().removeClass( select //選擇中的li才有大黑框選中，其余去除大黑框選中效果 $( body ).attr( class ,cookieSkin);//給body有class加上fuName值，也就是添加對應的背景色 }else{ $( body ).attr( class , fu1 //如果本地cookie無記錄，就默認用紅色做背景 /script  /head  body >
實現的效果和上一篇文章的功能一樣，而且使用了cookie.js之后，代碼少了，而且更容易理解了。
相關推薦：
vue換膚功能實例教程
jQuery基于cookie實現換膚功能實例
Javascript結合css實現網頁換膚功能_javascript技巧
以上就是jQuery.cookie.js插件實現換膚功能的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。