jquery.cookie.js的插件,插件的源代码如下:

/*** Cookie plugin** Copyright (c) 2006 Klaus Hartl (stilbuero.de)* Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php* http://www.gnu.org/licenses/gpl.html**//*** Create a cookie with the given name and value and other optional parameters.** @example $.cookie('the_cookie', 'the_value');* @desc Set the value of a cookie.* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });* @desc Create a cookie with all available options.* @example $.cookie('the_cookie', 'the_value');* @desc Create a session cookie.* @example $.cookie('the_cookie', null);* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain*       used when the cookie was set.** @param String name The name of the cookie.* @param String value The value of the cookie.* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.*                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.*                             If set to null or omitted, the cookie will be a session cookie and will not be retained*                             when the the browser exits.* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will*                        require a secure protocol (like HTTPS).* @type undefined** @name $.cookie* @cat Plugins/Cookie* @author Klaus Hartl/klaus.hartl@stilbuero.de*//*** Get the value of a cookie with the given name.** @example $.cookie('the_cookie');* @desc Get the value of a cookie.** @param String name The name of the cookie.* @return The value of the cookie.* @type String** @name $.cookie* @cat Plugins/Cookie* @author Klaus Hartl/klaus.hartl@stilbuero.de*/jQuery.cookie = function(name, value, options) {if (typeof value != 'undefined') { // name and value given, set cookieoptions = options || {};if (value === null) {value = '';options.expires = -1;}var expires = '';if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {var date;if (typeof options.expires == 'number') {date = new Date();date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));} else {date = options.expires;}expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }// CAUTION: Needed to parenthesize options.path and options.domain// in the following expressions, otherwise they evaluate to undefined// in the packed version for some reason...var path = options.path ? '; path=' + (options.path) : '';var domain = options.domain ? '; domain=' + (options.domain) : '';var secure = options.secure ? '; secure' : '';document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');} else { // only name given, get cookievar cookieValue = null;if (document.cookie && document.cookie != '') {var cookies = document.cookie.split(';');for (var i = 0; i < cookies.length; i++) {var cookie = jQuery.trim(cookies[i]);// Does this cookie string begin with the name we want?if (cookie.substring(0, name.length + 1) == (name + '=')) {cookieValue = decodeURIComponent(cookie.substring(name.length + 1));break;}}}return cookieValue;}
};

Cookie插件的操作

创建一个会话cookie:

$.cookie(‘cookieName’,'cookieValue’);

注:当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie。

创建一个持久cookie:

$.cookie(‘cookieName’,'cookieValue’,{expires:7});

注:当指明时间时,故称为持久cookie,并且有效时间为天。

创建一个持久并带有效路径的cookie:

$.cookie(‘cookieName’,'cookieValue’,{expires:7,path:’/'});

注:如果不设置有效路径,在默认情况下,只能在cookie设置当前页面读取该cookie,cookie的路径用于设置能够读取cookie的顶级目录。

创建一个持久并带有效路径和域名的cookie:

$.cookie(‘cookieName’,'cookieValue’,{expires:7,path:’/',domain: ‘chuhoo.com’,secure: false,raw:false});

注:domain:创建cookie所在网页所拥有的域名;secure:默认是false,如果为true,cookie的传输协议需为https;raw:默认为false,读取和写入时候自动进行编码和解码(使用encodeURIComponent编码,使用decodeURIComponent解码),关闭这个功能,请设置为true。

获取cookie:

$.cookie(‘cookieName’);   //如果存在则返回cookieValue,否则返回null。

删除cookie:

$.cookie(‘cookieName’,null);

或者这样也能删除: $.cookie('cookieName', '', { expires: -1, path: '/' }); // 删除 cookie

注:如果想删除一个带有效路径的cookie,如下:$.cookie(‘cookieName’,null,{path:’/'});

来演示一个换肤的粟子:

代码之div+css

<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />

<!--头部开始-->
<div id="header"><a id="logo" href="#">Jane Shopping</a><ul id="skin"><li id="skin_0" title="蓝色" class="selected">蓝色</li><li id="skin_1" title="紫色">紫色</li><li id="skin_2" title="红色">红色</li><li id="skin_3" title="天蓝色">天蓝色</li><li id="skin_4" title="橙色">橙色</li><li id="skin_5" title="淡绿色">淡绿色</li></ul></div>
<!--头部结束-->

/*切换皮肤样式*/
#skin { float:right; margin:10px; padding:4px; width:120px; list-style:none; border: 1px solid #CCCCCC; background:#FFF;
}
#skin li { float:left; margin-right:4px; width:15px; height:15px; text-indent:-9999px; overflow:hidden; display:block; cursor:pointer; background-image:url(../images/theme.gif);
}
#skin_0 { background-position:0px 0px; }
#skin_1 { background-position:15px 0px; }
#skin_2 { background-position:35px 0px; }
#skin_3 { background-position:55px 0px; }
#skin_4 { background-position:75px 0px; }
#skin_5 { background-position:95px 0px; }
#skin_0.selected { background-position:0px 15px; }
#skin_1.selected { background-position:15px 15px; }
#skin_2.selected { background-position:35px 15px; }
#skin_3.selected { background-position:55px 15px; }
#skin_4.selected { background-position:75px 15px; }
#skin_5.selected { background-position:95px 15px; }

不同皮肤的css文件都放在styles/skins 文件夹下,命名如下:

代码之jQuery代码

版本一:

        $(function(){var $li =$("#skin li");$li.click(function(){$("#"+this.id).addClass("selected")                //当前<li>元素选中.siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中$("#cssfile").attr("href","styles/skin/"+ (this.id) +".css"); //设置不同皮肤$.cookie( "MyCssSkin" ,  this.id , { path: '/', expires: 10 });});var cookie_skin = $.cookie( "MyCssSkin");//将MyCssSkin这个cookie值this.id赋给变量cookie_skinif (cookie_skin) {$("#"+cookie_skin).addClass("selected")                //当前<li>元素选中.siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中$("#cssfile").attr("href","styles/skin/"+ cookie_skin +".css"); //设置不同皮肤$.cookie( "MyCssSkin" ,  cookie_skin  , { path: '/', expires: 10 });}})

版本一不好的地方,就是有大量的重复代码,可以模块化,函数化,来看版本二:

//网站换肤
$(function(){var $li =$("#skin li");$li.click(function(){switchSkin( this.id );});var cookie_skin = $.cookie("MyCssSkin");if (cookie_skin) {switchSkin( cookie_skin );}
});function switchSkin(skinName){$("#"+skinName).addClass("selected")                //当前<li>元素选中.siblings().removeClass("selected");  //去掉其他同辈<li>元素的选中$("#cssfile").attr("href","styles/skin/"+ skinName +".css"); //设置不同皮肤$.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
}

下面代码也是换肤的例子

html:

    <script>//加载皮肤文件loadCss(_skinId,'Main.css'); </script><div style="right:10px; top: 5px; position: absolute; height: 21px; text-align:right"><a>皮肤:</a><a href="#" οnclick="loadSkin('1')">藤蔓绿</a>&nbsp;<a href="#" οnclick="loadSkin('2')">经典蓝</a>&nbsp;<a href="#" οnclick="loadSkin('3')">甜蜜橙</a>&nbsp;<a href="#" οnclick="loadSkin('4')">淡雅灰</a></div>

皮肤路径 :

js代码:

var _skinId = getCookie("_skinId") ? getCookie("_skinId"):"1";function loadSkin(skinId)
{writeCookie("_skinId",skinId);top.window.location.reload();
}function $(id)
{return document.getElementById(id);
}function loadCss(skinId,cssName)
{var head = document.getElementsByTagName('head').item(0);css = document.createElement('link');css.href = "Skin/Skin" + skinId + "/"+cssName;css.rel = 'stylesheet';css.type = 'text/css';css.id = 'loadCss';head.appendChild(css);
}function loadJs(file)
{var scriptTag = document.getElementById('loadScript');var head = document.getElementsByTagName('head').item(0);if(scriptTag) head.removeChild(scriptTag);script = document.createElement('script');script.src = "../js/mi_"+file+".js";script.type = 'text/javascript';script.id = 'loadScript';head.appendChild(script);
}function setCookie(sKey, sValue, sDomain, sPath, sExpires, blSecure)
{var sCookieStr = sKey + "=" + sValue + ";";if (sDomain)    sCookieStr += " DOMAIN=" + sDomain + ";";if (sPath)        sCookieStr += " PATH=" + sPath + ";";if (sExpires)    sCookieStr += " EXPIRES=" + sExpires + ";";if (blSecure)    sCookieStr += " SECURE";document.cookie = sCookieStr;
}function writeCookie(key,value)
{var sExpires=new Date();sExpires.setTime(sExpires.getTime()+24*60*60*1000*365);setCookie(key,value,"","",sExpires.toGMTString(),""); if(getCookie(key) == null){alert("您的浏览器安全设置过高,不支持Cookie,请重新设置浏览器的。");}
}function getCookie(sKey)
{var sCookie = document.cookie;if( !sCookie ) return null;var sTag = sKey + "=";var iBegin = sCookie.indexOf(sTag);if (iBegin < 0)    return null;iBegin += sTag.length;var iEnd = sCookie.indexOf(";", iBegin);if (iEnd < 0)    iEnd = sCookie.length;return sCookie.substring(iBegin, iEnd);
}function delCookie(sKey)
{var tNow = new Date();setCookie(sKey, "", null, null, tNow.toGMTString(), null);
}

转载于:https://www.cnblogs.com/shy1766IT/p/5189604.html

jquery.cookie中的操作之与换肤相关推荐

  1. jquery.cookie中的操作

    jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件. 创建一个会话cookie: $.cookie('cookieName','cookieValue' ...

  2. vue中利用scss实现整体换肤和字体大小设置

    一.前言 利用Sass预处理实现换肤和字体大小调整. 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制.页面初始化是的字体适配可以根据de ...

  3. scss提取 vue_vue 中使用sass实现主体换肤

    有如下代码要实现换肤功能 {{ msg }} Red Green Blue name:'app', data() {return{ msg:'Dynamic Themes', theme:'red'} ...

  4. Web API 排他操作案例 —— 百度换肤

    学习来源:https://www.bilibili.com/video/BV1HJ41147DG     思路 给一组元素注册事件 给4个小图片利用循环注册点击事件 当我们点击了这个图片,让我们页面背 ...

  5. jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  6. Android换肤逻辑

    换肤逻辑 来归纳一下换肤的相关原理吧!有这么一种说法,对于一个成熟的控件,其实核心逻辑代码仅仅占总代码的10%,并且处理了90%的需求,然后剩下的90%的代码,是用于解决剩下的10%的需求的.本文当然 ...

  7. opengl源码 实现无缝切换图片过场_手把手讲解 Android hook技术实现一键换肤

    前言 产品大佬又提需求啦,要求app里面的图表要实现白天黑夜模式的切换,以满足不同光线下都能保证足够的图表清晰度. 怎么办?可能解决的办法很多,你可以给图表view增加一个toggle方法,参数Str ...

  8. android 换肤(1)——插件式无缝换肤(解析鸿洋大神的换肤流程)

    对于app换肤,这是一个常见而又常用的功能.虽然我做的项目中还没涉及到换肤,但是还是想研究下. 于是,下载了鸿洋大神的换肤demo来研究. 先看效果图:(尊重鸿洋大神的代码,效果图上原创) 鸿洋大神的 ...

  9. python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

最新文章

  1. 算法证明:女生遇到心动的男人一定要追!
  2. java 并发编程 aqs_Java并发编程之AQS
  3. python序列类型唯一的映射类型_python2.x学习笔记(8)-映射和集合类型
  4. lee最短路算法_Lee算法的解释:迷宫运行并找到最短路径
  5. [js] 写一个格式化时间的方法
  6. LeetCode MySQL 1495. Friendly Movies Streamed Last Month
  7. 计算机中汉字用什么表示什么,在计算机中汉字是用几个字节表示
  8. matlab 轴gui,MatlabüGUI学习笔记(4)——公共对象属性的轴,MatlabGUI,四,常用,之,Axes...
  9. 拓端tecdat|R语言使用灰色关联分析(Grey Relation Analysis,GRA)中国经济社会发展指标
  10. 文章三 国家助学贷款-还款
  11. Aliyun平台Nginx+Mysql+Redis部署easyboot
  12. 【Linux修炼】开篇
  13. MOOS-ivp 实验十四(1)编写行为使命
  14. matlab产生均匀白噪声,各种分布白噪声的产生matlab.pdf
  15. Type-C保温杯取电方案
  16. 勾股定理计算机语言,勾股定理
  17. 组织能力建设的三部曲
  18. 旧电脑 存储服务器 系统,爷爷级PC,用白菜价内存搭建内存硬盘操作系统,老系统飞起来。...
  19. android MediaPlayer架构
  20. Hadoop 安装(详细步骤)

热门文章

  1. 3G与4G到底有何区别?
  2. 前端面试---Vue部分考点梳理
  3. PHP + NGINX 控制视频文件播放,并防止文件下载
  4. DS汽车通过采用沉浸式虚拟现实技术实现展厅转型
  5. python爬虫-异常处理
  6. 杭电1262--寻找素数对(打表)
  7. Wireshark抓包介绍和TCP三次握手分析
  8. Linux包管理速查表
  9. [独库骑行之我们路过沙漠]塔克拉玛干的边缘
  10. 通过日志恢复SQL Server的历史数据