jQuery结合jQuery.cookie.js插件实现换肤功能示例


Posted in jQuery onOctober 14, 2017

本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能。分享给大家供大家参考,具体如下:

上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧。

jQuery.cookie.js下载:https://github.com/carhartl/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 class="fu1">
  <div class="huanFu">
    <ul>
      <li class="fu1" fuName="fu1"></li>
      <li class="fu2" fuName="fu2"></li>
      <li class="fu3" fuName="fu3"></li>
      <li class="fu4" fuName="fu4"></li>
    </ul>
  </div>
</body>
</html>

实现的效果和上一篇文章的功能一样,而且使用了cookie.js之后,代码少了,而且更容易理解了。

如果文章中有什么问题,还希望各位大神能说出来,让我能及时改正。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 #jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
jQuery中 DOM节点操作方法大全
Oct 12 #jQuery
jQuery自动或手动图片切换效果
Oct 11 #jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
jQuery中过滤器的基本用法示例
Oct 11 #jQuery
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
小偷PHP+Html+缓存
2006/11/25 PHP
php学习 函数 课件
2008/06/15 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
python Scrapy框架原理解析
2021/01/04 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
C#面试常见问题
2013/02/25 面试题
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
毕业典礼邀请函
2015/01/31 职场文书
同意转租证明
2015/06/24 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
浅谈Redis的事件驱动模型
2022/05/30 Redis