jQuery.cookie.js插件实现换肤功能

上一次和大家分享了如何实现换肤功能，但是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教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。