《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}表示能够保存几天，属于给浏览器的建议
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <script src="js/jquery-1.11.1.min.js"></script>
5 <script src="js/jquery-ui.min.js"></script>
6 <script src="js/jquery.cookie.js"></script>
7 <link href="js/jquery-ui.min.css" rel="stylesheet" />
8 <script type="text/javascript">
9 $(function () {
10 $("#dialog").dialog();
11 $("#dialog1").accordion();
12 $("#dialog2").tabs();
13 })
14
15 </script>
16 </head>
17 <body>
18 <div id="dialog">你好，我是一个对话框！黑河，我爱你</div>
19 <div id="dialog1">你好，我是一个对话框！黑河，我爱你</div>
20 <div id="dialog2">
21 <ul>
22 <li><a href="#tbbase">基本设置</a></li>
23 <li><a href="#tbadv">高级设置</a></li>
24 </ul>
25 <ul id="tbbase">
26 <li><a href="#">用户名</a></li>
27 <li><a href="#">刷新频率</a></li>
28 </ul>
29 <div id="tbadv">
30 <label for="username">用户名：</label><input type="text" id="username"/><br/>
31 <label for="password">登陆密码：</label><input type="text" id="password"/>
32 </div>
33 </div>
34
35 </body>
36 </html>
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>preventDefault()案例</title>
5 <style type="text/css">
6 .qqhead{
7 font-size:30px;
8 color:deepskyblue;
9 background-color:red;
10 cursor:pointer;
11 width:30%;
12 }
13 .content {
14 font-size: 20px;
15 color: blue;
16 border-style: solid;
17 width: 30%;
18 }
19 ul{list-style-type:none;}
20 </style>
21 <!--加载文件-->
22 <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
23 <script src="js/jquery.cookie.js"type="text/javascript"></script>
24 <script src="js/jquery-ui.min.js"></script>
25
26 <script type="text/javascript">
27 $(function () {
28 $("#ul1 li:even").addClass("qqhead").click(function () { $(this).next("li.content").toggle().siblings("li.content").hide()});
29 $("#ul1 li:odd").addClass("content").click();
30 $("#ul1 > li:first").click();
31 })
32 $(function () {
33 // alert($.cookie("用户名"));//重启不能够取出相应的键值
34 //$.cookie("用户名", "tom");
35 //$.cookie("用户名", "tom", {expires:7,domain:‘itcast.cn‘,secure:true});
36
37 $("qq").accordion();
38 })
39
40 </script>
41 </head>
42 <body>
43 <div id="qq">
44 <ul id="ul1">
45 <li>我的好友</li>
46 <li>张三<br />小王<br />小刘</li>
47 <li>亲人栏</li>
48 <li>张三<br />小王<br />小刘</li>
49 <li>大学同学</li>
50 <li>张三<br />小王<br />小刘</li>
51 <li>小学同学</li>
52 <li>张三<br />小王<br />小刘</li>
53 <li>高中同学</li>
54 <li>张三<br />小王<br />小刘</li>
55 <li>陌生人</li>
56 <li>张三<br />小王<br />小刘</li>
57 </ul>
58 </div>
59 <table id="tablecolor">
60 <tr><td style="background-color:red">红色</td>
61 <td style="background-color:blue">蓝色</td>
62 <td style="background-color:yellow">黄色</td></tr>
63 </table>
64 <script type="text/javascript">
65 $(function () {
66 $("#tablecolor td").click(function () {
67 var bgcolor = $(this).css("background-color");
68 $("body").css("background-color", bgcolor);
69 $.cookie("bgcolor",bgcolor,{expires:7});
70 });
71 })
72 $(document).ready(function () {//记忆窗口的颜色
73 if ($.cookie("bgcolor"))
74 $("body").css("background-color", $.cookie("bgcolor"));
75 });
76
77 </script>
78 </body>
79 </html>
时间： 2024-10-26 02:20:29