知问前端——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("&nbsp;").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);
        }
    });

});

时间: 2024-10-16 00:46:58

知问前端——cookie插件的相关文章

知问前端——验证插件

验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验. 使用validate.js插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation 最重要的文件是jquery.validate.js,还有两个可选的辅助文件:additional-methods.js(控件class方式)和message_zh.js(提示汉

知问前端——Ajax表单插件

传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款form.js表单的Ajax提交插件将解决这个问题. 一.核心方法 官方网站:http://malsup.com/jquery/form/ form.js插件有两个核心方法:ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能. 若没有结合其他插件.js.jQuery里的submit()方法时,就用ajaxForm()提交表单. 若用js.jQuery里的submit()方

知问前端——Ajax提交表单

本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库 创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.date. 本人是使用的Navicat for MySQL创建的user表, user表的结构如下: 所需的PHP文件:config.php.add.php.(本人没学过php,所以不过多解释) config.php: <?php header('Content-Type:text/html; char

知问前端——创建header区

创建界面 我们首先要设计一个header,这个区域将要设计成永远置顶.也就是,往下拉出滚动条也永远在页面最上层可视区内.在header区,目前先设计LOGO.搜索框.按钮.注册和登录即可. 项目的大致骨架如下: index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type=&q

第一百七十七节,jQuery,知问前端--概述及 jQuery UI

jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一.项目介绍 我们重点仿照"知乎"的架构模式来搭建界面和布局,以及大部分前端功能.而"百度 知道"作为辅助功能来确定我们这个项目需要的前端功能. 从以上知名问答站点中,我们可以确认最主要的前端功能:1.弹出对话框:2.前端按钮: 3.折叠菜单:4.选项卡切换:5.滑动块:6.日历:7.自动补全:8 拖放:等一系列前端模块. 二.jQuery UI

知问前端——邮箱自动补全

本节课,我们通过自动补全source属性的function回调函数,来动态的设置我们的数据源,以达到可以实现邮箱补全功能. 数据源function 自动补全UI的source不但可以是数组,也可以是function回调函数,提供了自带的两个参数设置动态的数据源. $('#email').autocomplete({ source : function (request, response) { //获取用户输入的内容 alert(request.term); //可以获取你输入的值 //绑定数据

知问前端——日历UI(一)

日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); 修改datepicker()样式 日历UI的header背景和对话框UI的背景采用的是同一个class,所以在此之前已经被修改,所以,这里无须再修改了. /* 日历UI的今天单元格样式 */ .ui-datepicker-today .ui-state-highlight { border:1px

第一百七十九节,jQuery-UI,知问前端--按钮 UI

jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) 5.单选.复选按钮 按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单 可以设置按钮或文本,还可以设置单选按钮和多选按钮. 一.使用 button 按钮 使用 button 按钮 UI 的时候,不一定必须是 input 按钮形式,普通的文本也可以设置成 button

知问前端——自动补全UI

自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host }); 修改autocomplete()样式 由于autocomplete()方法是弹窗,然后鼠标悬停的样式,我们通过Firebug想获取到