<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery换肤+cookie记忆功能</title>
<link rel="stylesheet" href="../css/style.css" media="screen" />
<link rel="stylesheet" href="../css/reset.css" media="screen" />
<link rel="stylesheet" href="../css/green.css" media="screen" name="skin" />
<script src="../jquery-1.10.2.min.js"></script>
<script src="../jquery.cookie.js"></script>
</head>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<div id="stylechange" class="clear">
<ul>
<li><a href="javascript:void(0)" class="green"></a></li>
<li><a href="javascript:void(0)" class="blue"></a></li>
</ul>
</div>
<ul id="nav">
<li><a href="index.html" class="current">测试</a></li>
<li><a href="#">关于</a></li>
</ul>
<div id="content">
<h2>WelCome!</h2>
<p>Hello，everyone.I will share some useful tips of jQuery here.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div id="footer">Powered By Dennis Ji.</div>
</div>
</body>
<script>
$(function(){
var favstyle = readCookie('style');//style是cookie的名字
console.log(favstyle);//../css/green.css上次定义的绿色或蓝色皮肤在这里得到了输出
if(favstyle){
$("link[name='skin']").attr({href:favstyle});
}
//绿色主题
$(".green").click(function(){
$("link[name='skin']").attr({href:"../css/green.css"});
createCookie('style',"../css/green.css",365);
});
//蓝色主题
$(".blue").click(function(){
$("link[name='skin']").attr({href:"../css/blue.css"});
createCookie('style',"../css/blue.css",365);
});
//下面是jQuery版本(注意：要写在$(function(){})里面)的的创建、读取、删除cookie
function createCookie(name,value,days){
var expires;
if (days) {
expires = days;
} else{
expires = "";
}
$.cookie(name,value,{expires:expires,path:'/'});
}
function readCookie(name){
var styles = $.cookie(name);//jQuery的cookie只用这样写就能读出cookie的值了
return styles;
}
function delCookie(name){
$.cookie(name,null)
}
//注：本地cookie的读取要用localhost才能读取，普通的无服务器的文件路径是读取不到的
});
</script>
</html>