温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用jQuery.cookie.js插件实现换肤功能

发布时间:2022-03-05 10:51:38 来源:亿速云 阅读:149 作者:iii 栏目:web开发

本篇内容主要讲解“怎么用jQuery.cookie.js插件实现换肤功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用jQuery.cookie.js插件实现换肤功能”吧!

  先来了解下cookie.js如何使用。

  先导入:

  <scripttype="text/javascript"src="js/jquery-1.8.3.js"></script><!--jQuery版本最好是1.3.1以上-->

  <scripttype="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

  附上代码:

  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <htmlxmlns="http://www.w3.org/1999/xhtml">

  <head>

  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

  <title>cookie的使用</title>

  <scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>

  <scripttype="text/javascript"src="js/jquery.cookie.js"></script>

  <style>

  .huanFu{

  float:right;

  }

  .huanFuulli{

  width:30px;height:30px;

  list-style:none;

  margin:05px;

  float:left;

  cursor:pointer;

  border:1pxsolid#000;

  }

  .fu1{background-color:#F00;}

  .fu2{background-color:#0F0;}

  .fu3{background-color:#00F;}

  .fu4{background-color:#FF0;}

  .huanFuulli.select{border:3pxsolid#000;margin-top:-3px;}

  </style>

  <script>

  $(function(){

  $(".huanFuulli").on("click",function(){

  varpiFu=$(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中

  });

  varcookieSkin=$.cookie("MySkin");//取出本地cookie中的保存的值

  if(cookieSkin){

  $(".huanFuulli[fuName='"+cookieSkin+"']").addClass("select").siblings().removeClass("select");//选择中的li才有大黑框选中,其余去除大黑框选中效果

  $("body").attr("class",cookieSkin);//给body有class加上fuName值,也就是添加对应的背景色

  }else{

  $("body").attr("class","fu1");//如果本地cookie无记录,就默认用红色做背景

  }

  });

  </script>

  </head>

  <bodyclass="fu1">

  <pclass="huanFu">

  <ul>

  <liclass="fu1"fuName="fu1"></li>

  <liclass="fu2"fuName="fu2"></li>

  <liclass="fu3"fuName="fu3"></li>

  <liclass="fu4"fuName="fu4"></li>

  </ul>

  </p>

  </body>

  </html>

到此,相信大家对“怎么用jQuery.cookie.js插件实现换肤功能”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI