• 08.01《jQuery》——cookie插件的简单应用和自己写的简单更换颜色插件


    1.Cookie是网站设计者放置在客户端的小文本文件。实现:存储用户曾经浏览过的产品列表,记住用户喜欢浏览哪类新闻等。

      在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息。

    首先上代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
            <script src="jquery.cookie.js"></script>
            <script src="color_byself.js"></script>
            <script type="text/javascript">
                $(function(){
                    $("#btn1").click(function(){
                        $("#aaa").color("red");
                    });
                    
                    var COOKIE_NAME = 'username';
                    if($.cookie(COOKIE_NAME)){
                        $("#username").val($.cookie(COOKIE_NAME));
                    }
                    $("#remember").bind("click",function(){
                        if(this.checked){
                            $.cookie(COOKIE_NAME,$("#usernam").val(),{path:'/',expires:10});
                        }else{
                            $.cookie(COOKIE_NAME,null,{path:'/'});
                        }
                    });
        //第一行是定义一个
    COOKIE_NAME属性,之后判断$.cookie(COOKIE_NAME)是否为真,当cookie中有记录是就为真,
        //判定生效后,若是真则将获取的cookie记录中的用户名赋值给文本框中,若为假,则什么都不操作
       
        //之后写CheckBox的勾选触发事件,首先判断是否勾选,若是为真则执行。cookie的方法,方法有三个参数,第一个是属性名,在这里就是COOKIE_NAME
        //第二个是属性的值,在这里就是$("#usernam").val() , 第三个就是存放的地址和存放的时间了,在这里是 path:'/' 和 expires:10 。ps:这里的时间是以天作为单位的

             });
    </script> </head> <body> <div > 用户名:<input type="text" name="username" id="username" value="请输入用户名" /> <input type="checkbox" name="remember" id="remember" value="" />记住用户名<br /> <div id="aaa"> 我是一个测试用的小文字 <input type="button" name="btn1" id="btn1" value="变色" /> </div> </div> </body> </html>

    还有一段CSS的代码:

    ;(function($){
        $.fn.extend({
            "color":function(value){
                if(value == undefined){
                    return this.css("color");
                }else{
                    return this.css("color",value);
                }
            }
        })
    })(jQuery);

    在这里,第一段代码是写了HTML的代码,同时写了jQuery的代码,实现了一个单击更换文本颜色的代码,还有一个根据cookie使text文本框可以记住用户名的时间代码。

    其中更换颜色的代码主要是为了能够练习一下怎么在单独的js文件中写一个小的插件,以便了解插件的应用和链接

    cookie的代码是学习cookie插件的使用。

  • 相关阅读:
    Silverlight实例教程
    c#.net大文件上传(切片)
    ASP.NET大文件上传(切片)
    jsp大文件上传(切片)
    php大文件上传(切片)
    本地图文直接复制到博客编辑器中
    本地图文直接复制到CMS编辑器中
    本地图文直接复制到SiteFactory编辑器中
    本地图文直接复制到动易CMS编辑器中
    本地图文直接复制到帝国CMS编辑器中
  • 原文地址:https://www.cnblogs.com/justlive-tears/p/9404401.html
Copyright © 2020-2023  润新知