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,Angular实现登录界面验证码详解
Apr 27 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery实时统计输入框字数及限制
Jun 24 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
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Python assert语句的简单使用示例
2019/07/28 Python
YUV转为jpg图像的实现
2019/12/09 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python 写一个性能测试工具(一)
2020/10/24 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
文明学生事迹材料
2014/01/29 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
导游词开场白
2015/01/31 职场文书
四年级数学教学反思
2016/02/16 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python