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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现的分页插件完整示例
May 26 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
wxpython实现图书管理系统
2018/03/12 Python
Python对List中的元素排序的方法
2018/04/01 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
医生实习工作总结的自我评价
2013/09/27 职场文书
在职人员函授期间自我评价分享
2013/11/08 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
生日邀请函范文
2014/01/13 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
黄河的主人教学反思
2014/02/07 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android