首页 > 代码库 > JQuery学习六
JQuery学习六
《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="http://www.mamicode.com/js/jquery-1.11.1.min.js"></script> 5 <script src="http://www.mamicode.com/js/jquery-ui.min.js"></script> 6 <script src="http://www.mamicode.com/js/jquery.cookie.js"></script> 7 <link href="http://www.mamicode.com/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="http://www.mamicode.com/#tbbase">基本设置</a></li>23 <li><a href="http://www.mamicode.com/#tbadv">高级设置</a></li>24 </ul>25 <ul id="tbbase">26 <li><a href="http://www.mamicode.com/#">用户名</a></li>27 <li><a href="http://www.mamicode.com/#">刷新频率</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="http://www.mamicode.com/js/jquery-1.11.1.min.js" type="text/javascript"></script>23 <script src="http://www.mamicode.com/js/jquery.cookie.js"type="text/javascript"></script>24 <script src="http://www.mamicode.com/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>
JQuery学习六
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。