正文

08.01《jquery》——cookie插件的简单应用和自己写的简单更换颜色插件(代码片段)

justlive-tears  justlive-tears  2022-12-19  232

关键词：

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插件的使用。

jquery插件之cookie插件使用方法~

一、介绍1-1、jQuery.Cookie.js插件是一个轻量级的Cookie管理插件。下载地址：jQuery-cookie.js 有需要的朋友，右键另存为即可！二、使用方法2-1、引入jQuery及jQuery.Cookie.js插件。<scriptsrc="jQuery.x.x.x.js"type="text/javascript"></script>... 查看详情

jquery.cookie.js插件了解及使用方法

jquery.cookie.js插件实现浏览器的cookie存储，该插件是基于jquery开发，方便cookie使用。jquerycookie.js的下载地址 http://plugins.jquery.com/project/cookie1.准备工作　　1）由于该插件依赖jQuery，所以首先在页面引入jquey插件　　2）在页面引... 查看详情

jq插件—缓存jquery.cookie.js

jquery.cookie.js插件轻量级cookie管理1°下载地址：http://plugins.jquery.com/cookie/2°引入方式：(基于jquery) <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 查看详情

jquery.cookie.js插件删除不掉cookie的问题

在使用cookie插件时基本上不会有问题但就是用插件给的方法删除cookie有时候删除不掉。他的删除方法是： $.cookie(‘the_cookie‘,‘‘,{expires:-1});//删除或 $.cookie(‘the_cookie‘,null);//删除cookie主要原因是设置cookie时候没有设置... 查看详情

用于管理 cookie 的 jquery 插件

】用于管理cookie的jquery插件【英文标题】：jqueryplugintomanagecookies【发布时间】：2016-12-0500:48:21【问题描述】：我必须在我的项目中为不同的产品创建、更新、删除和获取cookie。那么有没有为此的任何jquery插件。现在我正在使用它... 查看详情

为啥 jQuery.cookie 插件返回“[object Object]” [重复]

】为啥jQuery.cookie插件返回“[objectObject]”[重复]【英文标题】：WhyjQuery.cookiepluginreturns“[objectObject]”[duplicate]为什么jQuery.cookie插件返回“[objectObject]”[重复]【发布时间】：2015-03-0121:16:22【问题描述】：我在phonegap构建项目中使用... 查看详情

jQuery Cookie 插件行为：如果 cookie 是会话 cookie，则将域设置为“.com”

】jQueryCookie插件行为：如果cookie是会话cookie，则将域设置为“.com”【英文标题】：jQueryCookiepluginbehavior:issettingdomainto".com"ifcookieissessioncookie【发布时间】：2011-12-1308:08:29【问题描述】：伙计们，如果我设置的cookie是会话coo... 查看详情

jquery之换肤与cookie插件

有时候一个网页可以有多个皮肤进行选择，也就是不同的背景，或是一整套新的css，能使整个页面变成另一种风格。这个功能可以用jQuery来实现。外加cookie插件。有了cookie，就可以长时间的保存选择后的背景样式，而不至于每次... 查看详情

如何让 jquery-cookie 插件与 Rails 5 一起使用？

】如何让jquery-cookie插件与Rails5一起使用？【英文标题】：HowdoIgetthejquery-cookieplugintoworkwithRails5?【发布时间】：2017-05-2006:00:16【问题描述】：我想使用Rails5.0.1，并且我的应用程序中还需要jQuerycookie插件。我已将其包含在我的Gemfile... 查看详情

Twitter Bootstrap 模态和 Jquery Cookie 插件

】TwitterBootstrap模态和JqueryCookie插件【英文标题】：TwitterBootstrapModalandJqueryCookiePlugin【发布时间】：2013-05-2314:32:51【问题描述】：我试图让模态框每周弹出一次。我正在使用Wordpress和Roots主题，并且脚本已正确入队和注册。我的模... 查看详情

jquery.cookie()方法的使用(读取写入删除)

jquery.cookie()方法:一个轻量级的cookie插件，可以读取、写入、删除cookie，下面有个不错的数量，大家可以学习下一个轻量级的cookie插件，可以读取、写入、删除cookie。jquery.cookie.js的配置首先包含jQuery的库文件，在后面包含jquery.coo... 查看详情

jquery.cookie中的操作

jquery.cookie中的操作：jquery.cookie.js是一个基于jquery的插件，点击下载！创建一个会话cookie：$.cookie(‘cookieName’,‘cookieValue’);注：当没有指明cookie时间时，所创建的cookie有效期默认到用户浏览器关闭止，故被称为会话cookie。创建... 查看详情

jquery.cookie中的操作

jquery的cookie使用

为程序设置Cookie，可以在C#内进行，也可以在前端进行。如jQuery的Cookie也是一个很不错的插件。在使用之前，可以先使用NuGet来安装cookie: 在MVC的视图中，引用jQuery和jQuery.Cookie库。为你的cookie设置一个过期时间：获取... 查看详情

cookies插件，记住cookies

今天同事交给了我一个记住cookies插件，首先先去网上下载一个jquery.cookie.js文件文件下载<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="C 查看详情

jquery.cookie用法及其注意点

　　jquery.cookie是一个轻量级的cookie插件，由于已被封装好，可拿来即用。　　基本的创建、读取、删除见另一篇文章浅谈localStorage、sessionStorage与cookie 。　　从名字上就可以看出jquery.cookie是依赖于jquery的，所以在使用jq... 查看详情

jquery.cookie使用方法

一个轻量级的cookie插件，可以读取、写入、删除cookie。jquery.cookie.js的配置首先包含jQuery的库文件，在后面包含jquery.cookie.js的库文件。<scripttype="text/javascript"src="js/jquery-1.6.2.min.js"></script><scripttype="text/javascri 查看详情