本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能。分享给大家供大家参考,具体如下:
上一次和大家分享了如何实现换肤功能,但是脚本代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧。
jQuery.cookie.js下载:
先来了解下cookie.js如何使用。
先导入:
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-1.8.3.js "祝辞& lt;/script> & lt; !——jQuery版本最好是1.3.1以上——比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery.cookie.js "祝辞& lt;/script>
之前
然后就可以使用了。
美元.cookie (“the_cookie”);//读取Cookie值
美元。饼干(“the_cookie”、“the_value”);//设置cookie的值
美元。饼干(‘the_cookie’,‘the_value’,{到期:7,路径:‘/?域:“example.com”,安全:真正});//新建一个cookie,“到期”是有效天数,“路径”是保存路径,“域”是创建饼干的网页所拥有的域名,“安全”是饼干的传输是否使用安全协议(HTTPS)
美元。饼干(“the_cookie”、“the_value”);//新建饼干
美元。饼干(the_cookie, null);//删除一个饼干
之前
附上代码:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>饼干的使用& lt;/title>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-1.8.3.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery.cookie.js "祝辞& lt;/script>
& lt; style>
.huanFu {
浮:正确;
}
李.huanFu ul {
宽度:30 px;高度:30 px;
list-style:没有;
保证金:0 5 px;
浮:左;
光标:指针;
边界:1 px固体# 000;
}
.fu1 {background - color: # F00;}
.fu2 {background - color: # 0 f0;}
.fu3 {background - color: # 00 f;}
.fu4 {background - color: # FF0;}
李.huanFu ul。选择{边界:3 px固体# 000;margin-top: 3 px;}
& lt;/style>
& lt; script>
$(函数(){
$("。huanFu ul李”)。(“点击”,函数(){
var piFu=$(这).attr (fuName ");//取得选择皮肤的fuName值
$(“身体”).attr(“阶级”,piFu);//给身体有班加上fuName值,也就是添加对应的背景色
(美元).addClass(“选择”).siblings () .removeClass("选择");//选择中李的才有大黑框选中,其余去除大黑框选中效果
.cookie美元(“MySkin”、piFu{路径:‘/?到期:10});//创建cookie,并保存到本地cookie中
});
var cookieSkin=$ .cookie (MySkin ");//取出本地cookie中的保存的值
如果(cookieSkin) {
$("。李huanFu ul [fuName=' + cookieSkin + " ']”) .addClass(“选择”).siblings () .removeClass("选择");//选择中李的才有大黑框选中,其余去除大黑框选中效果
$(“身体”).attr(“阶级”,cookieSkin);//给身体有班加上fuName值,也就是添加对应的背景色
其他}{
$(“身体”).attr(“类”、“fu1”);//如果本地饼干无记录,就默认用红色做背景
}
});
& lt;/script>
& lt;/head>
& lt;身体类=癴u1”比;
& lt; div类=癶uanFu”比;
& lt; ul>
& lt;李类=癴u1 fuName”=癴u1”祝辞& lt;/li>
& lt;李类=癴u2 fuName”=癴u2”祝辞& lt;/li>
& lt;李类=癴u3 fuName”=癴u3”祝辞& lt;/li>
& lt;李类=癴u4 fuName”=癴u4”祝辞& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/body>
& lt;/html>
之前
实现的效果和上一篇文章的功能一样,而且使用了cookie.js之后,代码少了,而且更容易理解了。
如果文章中有什么问题,还希望各位大神能说出来,让我能及时改正。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery的饼干操作技巧总结》,《jQuery扩展技巧总结》,《jQuery常用插件及用法总结》,《jQuery表格(表)操作技巧汇总》、《jQuery常见经典特效汇总》及《jQuery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
