《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 30%; 12 } 13 .content { 14 font-size: 20px; 15 color: blue; 16 border-style: solid; 17 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>