Home >Web Front-end >JS Tutorial >Sample code for jQuery+jQuery.cookie.js plug-in to implement skin changing function

Sample code for jQuery+jQuery.cookie.js plug-in to implement skin changing function

黄舟Original: 2017-10-14 10:08:361457browse

This article mainly introduces jQuery combined with the jQuery.cookie.js plug-in to implement the skin-changing function. It analyzes the common functions of the jQuery.cookie.js plug-in and the related operating skills to implement the skin-changing function in the form of examples. Friends who need it You can refer to the following

example of this article describing the use of jQuery combined with the jQuery.cookie.js plug-in to implement the skin-changing function. I share it with you for your reference. The details are as follows:

Last time I shared with you how to implement the skin-changing function, but the script code seems a bit long, so this time I plan to use the cookie.js plug-in to implement the skin-changing function. Okay, let's get started.

jQuery.cookie.js download:https://github.com/carhartl/jquery-cookie/

First let’s learn how to use cookie.js.

First import:

<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>

Then you can use it.

$.cookie(&#39;the_cookie&#39;); //读取Cookie值
$.cookie(&#39;the_cookie&#39;, &#39;the_value&#39;); //设置cookie的值
$.cookie(&#39;the_cookie&#39;, &#39;the_value&#39;, {expires: 7, path: &#39;/&#39;, domain: &#39;example.com&#39;, secure: true});//新建一个cookie,"expires"是有效天数,"path"是保存路径,"domain"是创建 cookie的网页所拥有的域名,"secure"是cookie的传输是否使用安全协议（HTTPS）
$.cookie(&#39;the_cookie&#39;, &#39;the_value&#39;); //新建cookie
$.cookie(&#39;the_cookie&#39;, null); //删除一个cookie

Attached code:

<!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:&#39;/&#39;,expires:10});//创建cookie,并保存到本地cookie中
  });
  var cookieSkin=$.cookie("MySkin");//取出本地cookie中的保存的值
  if(cookieSkin){
    $(".huanFu ul li[fuName=&#39;"+cookieSkin+"&#39;]").addClass("select").siblings().removeClass("select");//选择中的li才有大黑框选中，其余去除大黑框选中效果
    $("body").attr("class",cookieSkin);//给body有class加上fuName值，也就是添加对应的背景色
  }else{
    $("body").attr("class","fu1");//如果本地cookie无记录，就默认用红色做背景
  }
});
</script>
</head>
<body class="fu1">
  <p 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>
  </p>
</body>
</html>

The effect achieved is the same as the function of the previous article, and the use After using cookie.js, the code is less and easier to understand.

The above is the detailed content of Sample code for jQuery+jQuery.cookie.js plug-in to implement skin changing function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of JavaScript implementing progress bar based on timerNext article：Example of JavaScript implementing progress bar based on timer

See more

Sample code for jQuery+jQuery.cookie.js plug-in to implement skin changing function

Related articles