效果体验：http://runjs.cn/detail/hijgcghe

<!DOCTYPE html>

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>RunJS</title>

    <link href="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/skin_0.css" rel='stylesheet' type='text/css' id="cssfile">

    <script id="jquery_180" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.0.min.js"></script>

    <script src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/cookie.js"></script>

    <style>

    .head{width:400px;}

    a{

        display:inline-block;

        width:20px;

        height:20px;

        cursor:pointer;

    }

    a.skin_0{

        background:red;

    }

    a.skin_1{

        background:green;

    }

    a.skin_2{

        background:orange;

    }

    a.skin_3{

        background:#;

    }

    .content{

        width:500px;

        height:500px;

        margin-top:20px;

    }

    </style>

</head>

    <body>

        <div style="margin-bottom:20px;">

                    选择颜色，改变下面div的颜色，刷新依旧存在——————cookie的强大

          </div>

         <div class="head">

                    <a class="skin_0" id="skin_0" class="selected"></a>

                    <a class="skin_1" id="skin_1"></a>

                    <a class="skin_2" id="skin_2"></a>

                    <a class="skin_3" id="skin_3"></a>

            </div>

            <div class="content">

          </div>

    </body>

    <script type="text/javascript">

        function changeColor(skinName){

            $("#"+skinName).addClass('selected').siblings().removeClass('selected');

            $("#cssfile").attr('href','http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/'+skinName+'.css');

            $.cookie('mySkin',skinName,{path:'/',expires:});

        }

        $(function(){

            var $a = $(".head a");

            $a.click(function(){

                    var skinName= this.id;

                    changeColor(skinName);

            })

            var cookieSkin = $.cookie('mySkin');

            if(cookieSkin){

                changeColor(cookieSkin);

            }

        })

    </script>

</html>

这儿技术点就是应用jquery插件cookie.js， $.cookie('mySkin',skinName,{path:'/',expires:10});这句话中，第一个参数是：cookie的名称，第二个参数是：cookie的值，第三个就是路径和保存时间。

而后面$.cookie('mySkin')是取将名称为mySkin的cookie值取出来。

而这个cookie.js的应用：

  • $.cookie('the_cookie'); // 获得cookie
  • $.cookie('the_cookie', 'the_value'); // 设置cookie
  • $.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
  • $.cookie('the_cookie', '', { expires: -1 }); // 删除
  • $.cookie('the_cookie', null); // 删除 cookie
  • $.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等

不过虽说插件好用，但是不免有时候也应该去研究研究原生的js的cookie代码。（一般来说，cookie是用来保存值用的。故而有时候需要统计页面访问次数，或者说“在一段时间里（比如5分钟），同一个人无论刷新了这个页面多少次都好，都只能算一次”）。

jquery页面无刷新切换皮肤并保存的更多相关文章

  1. jQuery实现无刷新切换主题皮肤功能

    主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 查看演示DEMO:https:// ...

  2. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  3. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  4. Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...

  5. 页面无刷新Upload File

    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...

  6. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  7. HTTP与AJAX深入揭秘，不使用AJAX实现页面无刷新

    AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...

  8. Asp.net页面无刷新请求实现

    Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  9. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

随机推荐

  1. MySQL存储引擎 InnoDB/ MyISAM/ MERGE/ BDB 的区别

    MyISAM:默认的MySQL插件式存储引擎,它是在Web.数据仓储和其他应用环境下最常使用的存储引擎之一.注意,通过更改 STORAGE_ENGINE 配置变量,能够方便地更改MySQL服务器的默认 ...

  2. pdf增加水印

    /// <summary> /// 为PDF添加水印或背景图片 /// </summary> /// <param name="strSourceFilePat ...

  3. c# DirectoryInfo类 详解

    DirectoryInfo类和Directory类之间的关系与FileInfo类和File类之间的关系十分类似.下面介绍一下DirectoryInfo类的常用属性. DirectoryInfo类的常用 ...

  4. python学习笔记15（面向对象编程）

    虽然Python是解释性语言,但是它是面向对象的,能够进行对象编程. 一.如何定义一个类 在进行python面向对象编程之前,先来了解几个术语:类,类对象,实例对象,属性,函数和方法. 类是对现实世界 ...

  5. DataGrid表格控件

    代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--& ...

  6. 解决win8 64位提示MSVCP71.DLL等组件缺失

    把压缩包里面的DLL解压,只需要把其实缺失DLL复制到C:\Windows\SysWOW64即可.压缩包包含MSVCP70.DLL.MSVCP71.DLL.MSVCR70.DLL.MSVCR71.DL ...

  7. asp防注入安全问题

    一.古老的绕验证漏洞虽然古老,依然存在于很多小程序之中,比如一些企业网站的后台,简单谈谈.这个漏洞出现在没有对接受的变量进行过滤,带入数据库判断查询时,造成SQL语句的逻辑问题.例如以下代码存在问题: ...

  8. sql删除wordpress没用的postmeta记录

    支持多作者的wordpress博客,有时需要审核他们的文章内容,虽然UGC(User-generated content)整体是好的,但是也要控制一下质量,实在不相关或spam的文章就要毫不手软的删除 ...

  9. TaskTracker获取并执行map或reduce任务的过程（一）

    我们知道TaskTracker在默认情况下,每个3秒就行JobTracker发送一个心跳包,也就是在这个心跳包中包含对任务的请求.JobTracker返回给TaskTracker的心跳包中包含有各种a ...

  10. SQLite入门与分析(二)---设计与概念

    写在前面:谢谢各位的关注,没想到会有这么多人关注.高兴的同时,也感到压力,因为我接触SQLite也就几天,也没在实际开发中用过,只是最近项目的需求才来研究它,所以我很担心自己的文章是否会有错误,误导别 ...