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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jquery简易手风琴插件的封装
Oct 13 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
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
浅谈Python中函数的参数传递
2016/06/21 Python
python处理xml文件的方法小结
2017/05/02 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
教师考察材料范文
2014/06/03 职场文书
毕业生工作求职信
2014/06/30 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
工作证明英文模板
2014/10/21 职场文书
2014年服务员工作总结
2014/11/18 职场文书
创业计划书之服装
2019/10/07 职场文书
Promise静态四兄弟实现示例详解
2022/07/07 Javascript