《JQuery cookie》插件

cookie是保存在浏览器上的内容，用户在这次浏览页面的时候向
cookie中保存文本内容。下次再访问页面的时侯就可以取出来上
次保存的内容。这样可以得到上次“记忆”的内容，cookie不是jquery
特有的概念，只不过jquery cookie把他简化的更好用而已
cookie 需要浏览器的支持，浏览器的cookie是可以禁用的，如果禁用了
cookie就不能使用了。不过一般不用考虑禁用cookie的情况。
cookie 的几个特征：
cookie是与域名相关的，所以163.com不能读取baidu.com记录的cookie
正因为如此读取，设置cookie的时候不用担心不同域名cookie的冲突：
一个域名能写入的cookie总尺寸是有限制的，一般是几千个字节，能写入
的Cookie总条数一般是几十条，超过以后浏览器自己会根据自己的策略
移除一些Cookie;Cookie不是写入以后一定下次能读出来。浏览器可能会定期
会清除，用户也可能会手动清除
$.cookie("键值")取值
$.cookie("键名","键值")设值
$.cookie("用户名", "tom", {expires:7,domain:'itcast.cn',secure:true});
{expires:8}表示能够保存几天，属于给浏览器的建议

 <!DOCTYPE html>

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

 <head>

     <script src="js/jquery-1.11.1.min.js"></script>

     <script src="js/jquery-ui.min.js"></script>

     <script src="js/jquery.cookie.js"></script>

     <link href="js/jquery-ui.min.css" rel="stylesheet" />

     <script type="text/javascript">

         $(function () {

             $("#dialog").dialog();

             $("#dialog1").accordion();

             $("#dialog2").tabs();

         })

     </script>

 </head>

 <body>

   <div id="dialog">你好，我是一个对话框！黑河，我爱你</div>

   <div id="dialog1">你好，我是一个对话框！黑河，我爱你</div>

     <div id="dialog2">

         <ul>

             <li><a href="#tbbase">基本设置</a></li>

             <li><a href="#tbadv">高级设置</a></li>

         </ul>

         <ul id="tbbase">

             <li><a href="#">用户名</a></li>

             <li><a href="#">刷新频率</a></li>

         </ul>

         <div id="tbadv">

             <label for="username">用户名：</label><input type="text" id="username"/><br/>

             <label for="password">登陆密码：</label><input type="text" id="password"/>

         </div>

     </div>

 </body>

 </html>
 <!DOCTYPE html>

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

 <head>

     <title>preventDefault()案例</title>

     <style type="text/css">

         .qqhead{

             font-size:30px;

             color:deepskyblue;

             background-color:red;

             cursor:pointer;

             width:30%;

         }

         .content {

             font-size: 20px;

             color: blue;

             border-style: solid;

             width: 30%;

         }

         ul{list-style-type:none;}

     </style>

     <!--加载文件-->

     <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>

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

     <script src="js/jquery-ui.min.js"></script>

     <script type="text/javascript">

         $(function () {

             $("#ul1 li:even").addClass("qqhead").click(function () { $(this).next("li.content").toggle().siblings("li.content").hide()});

             $("#ul1 li:odd").addClass("content").click();

             $("#ul1 > li:first").click();

         })

         $(function () {

            // alert($.cookie("用户名"));//重启不能够取出相应的键值

             //$.cookie("用户名", "tom");

             //$.cookie("用户名", "tom", {expires:7,domain:'itcast.cn',secure:true});

             $("qq").accordion();

         })

     </script>

 </head>

 <body>

     <div id="qq">

         <ul id="ul1">

             <li>我的好友</li>

             <li>张三<br />小王<br />小刘</li>

             <li>亲人栏</li>

             <li>张三<br />小王<br />小刘</li>

             <li>大学同学</li>

             <li>张三<br />小王<br />小刘</li>

             <li>小学同学</li>

             <li>张三<br />小王<br />小刘</li>

             <li>高中同学</li>

             <li>张三<br />小王<br />小刘</li>

             <li>陌生人</li>

             <li>张三<br />小王<br />小刘</li>

         </ul>

     </div>

     <table id="tablecolor">

         <tr><td style="background-color:red">红色</td>

         <td style="background-color:blue">蓝色</td>

         <td style="background-color:yellow">黄色</td></tr>

     </table>

     <script type="text/javascript">

         $(function () {

             $("#tablecolor td").click(function () {

                 var bgcolor = $(this).css("background-color");

                 $("body").css("background-color", bgcolor);

                 $.cookie("bgcolor",bgcolor,{expires:7});

             });

         })

         $(document).ready(function () {//记忆窗口的颜色

             if ($.cookie("bgcolor"))

                 $("body").css("background-color", $.cookie("bgcolor"));

         });

     </script>

 </body>

 </html>

JQuery学习六的更多相关文章

  1. jQuery学习(六)——使用JQ完成省市二级联动

    1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...

  2. jquery 学习(六) - 事件绑定

    HTML <!--绑定事件--> <div class="a1"> <button class="bt">按钮</bu ...

  3. 初步学习jquery学习笔记（六）

    jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...

  4. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  5. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  6. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  7. ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  8. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

  9. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

随机推荐

  1. 莱布尼兹三角形(C++)

    [问题描述] 如下图所示的三角形,请编程输出图中排在第 n 行从左边数第 m 个位置上的数. [代码展示] # include<iostream># include<cstdio&g ...

  2. 论文笔记：Deep Attentive Tracking via Reciprocative Learning

    Deep Attentive Tracking via Reciprocative Learning NIPS18_tracking Type:Tracking-By-Detection 本篇论文地主 ...

  3. The Activation Function in Deep Learning 浅谈深度学习中的激活函数

    原文地址:http://www.cnblogs.com/rgvb178/p/6055213.html 版权声明:本文为博主原创文章,未经博主允许不得转载. 激活函数的作用 首先,激活函数不是真的要去激 ...

  4. 2018java开发一些面经

    算法系列:https://www.cnblogs.com/yanmk/p/9232908.html 2018Java开发面经(持续更新) 不要给自己挖坑!!!不要给自己挖坑!!!不要给自己挖坑!!!如 ...

  5. 二 Capacity Scheduler 计算能力调度器

    官网的写的太难懂,参考:http://www.360doc.com/content/14/0603/14/14935022_383254798.shtml Capacity Scheduler 一种可 ...

  6. Keil ARM-CM3 printf输出调试信息到Debug (printf) Viewer

    参考资料:http://www.keil.com/support/man/docs/jlink/jlink_trace_itm_viewer.htm 1.Target Options -> De ...

  7. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  8. Python中如何Getting Help

    在Python中Gettting Help有如下两种方法: 1 使用dir函数,dir的参数可以是一个真正的对象实例,也可以是一个数据类型,无论哪种情形,dir函数都返回与这个对象或者数据类型相关联的 ...

  9. Unity3d学习日记（二）

      跟着教程做让背景可以滚动起来并添加了背景的粒子特效,加入了敌机.   ctrl攻击,↑↓←→移动,Game Over后按R重新开始游戏.   Space Shooter游戏地址:http://ya ...

  10. python循环解码base64

    第一次写博客,都不知道该如何下手,写的不是很好,还望各位大佬不要喷我. 先来介绍一下base64: Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打 ...