知问前端——cookie插件
Cookie是网站用来在客户端保存识别用户的一种小文件。一般可以保存用户登录信息、购物数据信息等一系列微小信息。
一、使用cookie插件
官方网站：http://plugins.jquery.com/cookie/
从官网下载cookie插件——jquery.cookie.js插件。
1.生成一个cookie，名称为user，内容为liayun：
$.cookie("user","liayun");
2.cookie的参数设置：
$.cookie("user","liayun", {
expires:7, //过期时间，7天后过期
path:"/", //根目录，path的作用就是设置路径，根目录到底所谓何???
});
$.cookie("aaa","bbb", {
//domain:"www.ycku.com" //设置域名，可以发现名为aaa的cookie并没有建立，为何???
secure:true //发送条件：仅限加密连接 默认为false，需要使用安全协议https
});
综上所述，除了expires这个参数有用，其他根本就没什么鸟用！！！
3.读取cookie数据：
alert($.cookie("user")); //liayun
alert($.cookie("aaa")); //undefined，名为aaa的cookie的参数secure为true，因为需要使用安全协议https，而我们一般使用http协议，所以返回undefined
$.cookie("ccc","李阿昀"); //自动编码为：%E6%9D%8E%E9%98%BF%E6%98%80
alert($.cookie("ccc")); //自动解码为：李阿昀
4.关闭编码/解码，默认为false：
$.cookie.raw = true;
$.cookie("ddd","李阿昀"); //没有自动编码，李阿昀
alert($.cookie("ddd")); //李阿昀
5.读取所有cookie数据：
alert($.cookie());
注意：读取所有的cookie是以对象键值对存放的，所以也可以$.cookie().user获取cookie数据。
6.删除cookie：
$.removeCookie("user"); //删除的一般为当前目录
7.删除指定路径cookie：
$.removeCookie("user", {
path:"/" //删除根目录下的cookie
});
二、注册直接登录
把cookie引入到知问前端中去。
html改动后部分：
<div class="header_member">
<a href="javascript:void(0)" id="reg_a">注册</a>
<a href="javascript:void(0)" id="member">用户</a>
|
<a href="javascript:void(0)" id="login_a">登录</a>
<a href="javascript:void(0)" id="logout">退出</a>
</div>
javascript:void(0)的作用，就是用户点击链接之后，地址栏中地址后面没有一些###等奇怪的东东。
所以，index.html为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知问前端</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<div class="header_main">
<h1>知问</h1>
<div class="header_search">
<input type="text" name="search" class="search" />
</div>
<div class="header_button">
<button id="search_button">查询</button>
</div>
<div class="header_member">
<a href="javascript:void(0)" id="reg_a">注册</a>
<a href="javascript:void(0)" id="member">用户</a>
|
<a href="javascript:void(0)" id="login_a">登录</a>
<a href="javascript:void(0)" id="logout">退出</a>
</div>
</div>
</div> <form id="reg" action="123.html" title="会员注册">
<ol class="reg_error"></ol>
<p>
<label for="user">账号：</label>
<input type="text" name="user" class="text" id="user"></input>
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="pass" class="text" id="pass"></input>
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email"></input>
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="birthday" readonly="readonly" class="text" id="date"></input>
</p>
</form>
<div id="loading">数据交互中...</div>
</body>
</html>
jQuery改动后部分：
$("#member, #logout").hide();
if ($.cookie("user")) {
$("#member, #logout").show();
$("#reg_a, #login_a").hide();
$("#member").html($.cookie("user"));
} else {
$("#member, #logout").hide();
$("#reg_a, #login_a").show();
}
$("#logout").click(function() {
$.removeCookie("user");
window.location.href = "/jquery/"; //点击退出链接，跳到首页
});
success : function (responseText, statusText) {
if(responseText) {
$("#member, #logout").show();
$("#reg_a, #login_a").hide();
$("#member").html($.cookie("user"));
}
}
故，index.js为：
$(function() {
$("#search_button").button({
icons:{
primary:"ui-icon-search",
},
});
/*
$.cookie("user","liayun");
$.cookie("user","liayun", {
expires:7, //过期时间，7天后过期
path:"/", //根目录，path的作用就是设置路径，根目录到底所谓何???
});
*/
/*
$.cookie("aaa","bbb", {
//domain:"www.ycku.com" //设置域名，可以发现名为aaa的cookie并没有建立，为何???
secure:true //发送条件：仅限加密连接 默认为false，需要使用安全协议https
});
*/
//alert($.cookie("user")); //liayun
//alert($.cookie("aaa")); //undefined，名为aaa的cookie的参数secure为true，因为需要使用安全协议https，而我们一般使用http协议，所以返回undefined
//$.cookie("ccc","李阿昀"); //自动编码为：%E6%9D%8E%E9%98%BF%E6%98%80
//alert($.cookie("ccc")); //自动解码为：李阿昀
//$.cookie.raw = true;
//$.cookie("ddd","李阿昀"); //没有自动编码，李阿昀
//alert($.cookie("ddd")); //李阿昀
//alert($.cookie().ccc); //[object Object]
//$.removeCookie("user"); //删除的一般为当前目录
//$.removeCookie("user", {
// path:"/" //删除根目录下的cookie
//});
$("#member, #logout").hide();
if ($.cookie("user")) {
$("#member, #logout").show();
$("#reg_a, #login_a").hide();
$("#member").html($.cookie("user"));
} else {
$("#member, #logout").hide();
$("#reg_a, #login_a").show();
}
$("#logout").click(function() {
$.removeCookie("user");
window.location.href = "/jquery/"; //点击退出链接，跳到首页
});
$("#loading").dialog({
autoOpen:false,
modal:true,
closeOnEscape:false,
resizable:false,
draggable:false,
width:180,
//height:80
height:50
}).parent().find(".ui-widget-header").hide();
$("#reg_a").click(function() {
$("#reg").dialog("open");
});
//$("#reg").dailog(...)返回的是jQuery对象，即对话框内容的div(id="reg")对象，所以可以连缀使用
$("#reg").dialog({
autoOpen:false,
modal:true,
resizable:false,
width:320,
height:340,
buttons:{
'提交':function() {
$(this).submit();
}
}
}).buttonset().validate({
submitHandler:function(form) {
//alert("验证成功，准备提交中！");
$(form).ajaxSubmit({
url:"add.php",
type:"post",
beforeSubmit:function(formData,jqForm,options) {
//提交之前，将“数据正在交互中...”对话框打开
//打开之后，高度又默认增加了30，所以在初始化dialog时，height应-30，变为50
$("#loading").dialog("open");
//alert($("#reg").dialog("widget").html());
//alert($("#reg").dialog("widget").find("button").eq(0).html()); //<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span>
//alert($("#reg").dialog("widget").find("button").eq(1).html()); //<span class="ui-button-text">提交</span>
$("#reg").dialog("widget").find("button").eq(1).button("disable"); //禁用提交按钮
},
success:function(responseText,statusText) {
//alert(responseText); //新增成功，返回1
if(responseText) {
$("#reg").dialog("widget").find("button").eq(1).button("enable");
$("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("数据新增成功...");
$.cookie("user", $("#user").val());
setTimeout(function() {
$("#loading").dialog("close");
$("#reg").dialog("close");
$("#reg").resetForm(); //重置表单
$("#reg span.star").html("*").removeClass("succ");
$("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中...");
$("#member, #logout").show();
$("#reg_a, #login_a").hide();
$("#member").html($.cookie("user"));
}, 1000);
}
}
});
},
//错误提示出现，对话框高度增加，出现滚动条，所以应去除滚动条
//每次激活错误，都会触发此属性
showErrors:function(errorMap, errorList) {
var errors = this.numberOfInvalids();
if(errors > 0) {
$("#reg").dialog("option","height",errors * 20 + 340);
} else {
$("#reg").dialog("option","height",340);
}
this.defaultShowErrors(); //执行默认错误
},
//高亮显示有错误的元素，变色式
highlight:function(element,errorClass) {
$(element).css("border","1px solid #630");
$(element).parent().find("span").html("*").removeClass("succ");
},
//恢复默认
unhighlight:function(element,errorClass) {
$(element).css("border","1px solid #ccc");
//element即为<input>控件
//$(element).parent().find("span").html("ok");
$(element).parent().find("span").html(" ").addClass("succ");
},
errorLabelContainer:"ol.reg_error",
wrapper:"li",
rules:{
user:{
required:true,
minlength:2
},
pass:{
required:true,
minlength:6
},
email:{
required:true,
email:true
},
date:{
date:true
}
},
messages:{
user:{
required:"账号不得为空！",
minlength:"账号不得小于{0}位！"
},
pass:{
required:"密码不得为空！",
minlength:"密码不得小于{0}位！"
},
email:{
required:"邮箱不得为空！",
email:"请输入正确的邮箱地址！"
}
}
});
$("#date").datepicker({
changeMonth:true,
changeYear:true,
yearSuffix: ' ',
maxDate:0,
yearRange:"1950:2020",
});
$("#email").autocomplete({
delay:0,
autoFocus:true,
source:function(request,response) {
var hosts = ['qq.com','163.com','126.com','sina.com.cn','gmail.com','hotmail.com'],
term = request.term, //获取用户输入的内容
name = term, //邮箱的用户名，如i_beautiful
host = '', //邮箱的域名，如sina.com.cn
ix = term.indexOf('@'), //@的位置
result = []; //最终呈现的邮箱列表
result.push(term);
if(ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if(name) {
var findedHosts = (host ? $.grep(hosts, function(value, index) {
return value.indexOf(host) > -1; }) : hosts),
findedResult = $.map(findedHosts, function(value, index) {
return name + "@" + value;
});
result = result.concat(findedResult);
}
response(result);
}
});
});
知问前端——cookie插件的更多相关文章
- 第一百八十七节，jQuery，知问前端--cookie 插件，注册成功后生成cookie，显示登录状态
jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...
- 第一百八十三节，jQuery-UI，知问前端--验证插件
jQuery-UI,知问前端--验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(va ...
- 知问前端——Ajax表单插件
传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款form.js表单的Ajax提交插件将解决这个问题. 一.核心方法 官方网站:http://malsup.com/jquer ...
- 知问前端——Ajax提交表单
本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库 创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.da ...
- 第一百八十二节，jQuery-UI，知问前端--日历 UI
jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...
- 知问前端——对话框UI(一)
对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...
- 知问前端——创建header区
创建界面 我们首先要设计一个header,这个区域将要设计成永远置顶.也就是,往下拉出滚动条也永远在页面最上层可视区内.在header区,目前先设计LOGO.搜索框.按钮.注册和登录即可. 项目的大致 ...
- 知问前端——日历UI(三)
datepicker日期选择选项 属性 默认值/类型 说明 minDate 无/对象.字符串或数值 日历中可以选择的最小日期 maxDate 无/对象.字符串或数值 日历中可以选择的最大日期 defa ...
- 知问前端——日历UI(二)
datapicker外观选项 属性 默认值/类型 说明 disabled false/布尔值 禁用日历 numberOfMonths 1/数值 日历中同时显示的月份个数.默认为1,如果设置3就同时显示 ...
随机推荐
- 图的遍历——DFS（邻接矩阵）
递归 + 标记 一个连通图只要DFS一次,即可打印所有的点. #include <iostream> #include <cstdio> #include <cstdli ...
- PokeCats开发者日志（九）
现在是PokeCats游戏开发的第十五天的中午,总算过了规范性检查这一关. 但愿能过吧.
- C# 知识回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- Tiny4412 LED 程序
package cn.hyc.led; import android.os.Bundle; import android.app.Activity; import android.view.Menu; ...
- 升级到EFCore2.0
EF Core 2.0上周已经发布了 文章内容基于vs2017,请大家先安装好vs2017(15.3). 本篇文章主要讲下差异点,跟之前一样的就不再重复了. 文章目录(差异点): 一.新建项目, EF ...
- 可视化自编码器训练结果&稀疏自编码器符号一览表
训练完(稀疏)自编码器,我们还想把这自编码器学习到的函数可视化出来,好弄明白它到底学到了什么.我们以在10×10图像(即n=100)上训练自编码器为例.在该自编码器中,每个隐藏单元i对如下关于输入的函 ...
- P1278 单词游戏
题目描述 Io和Ao在玩一个单词游戏. 他们轮流说出一个仅包含元音字母的单词,并且后一个单词的第一个字母必须与前一个单词的最后一个字母一致. 游戏可以从任何一个单词开始. 任何单词禁止说两遍,游戏中只 ...
- 关于Python的 a, b = b, a+b
Python中有一种写法:多个值同时赋给多个变量,如:a, b = b, a+b 1. A写法 a = 0, b = 1 a, b = b, a+b print a, b #结果为:1 1 这种写法, ...
- python中元组与小括号的关系
在学习Python 的时候.说到有两种数据类型,一种叫 列表,一种叫做元组,可以认为,元组是功能精简的列表.因为它少了列表很多功能.但是又有相识.定义他们的时候,主要是用中括号和小括号之分. 例如:定 ...
- ural1297 求最长回文子串 | 后缀数组
#include<cstdio> #include<algorithm> #include<cstring> #define N 20005 using names ...