jQuery(七)插件、Cookie、Accordion 折叠栏、Autocomplete、Growl、Password Validation、Prettydate、Tooltip、Treeview
文章目录
总结:
Cookie
- 在Chrome浏览器中按下F12,打开开发者工具,选择"Console (控制台)"选项卡,输入document.cookie,回车就可以查看当前网站的Cookie了。
- expires
- 定义 cookie 的有效时间,值可以是一个数字(从创建 cookie 时算起,以天为单位)或一个 Date 对象。如果省略,那么创建的 cookie 是会话 cookie,将在用户退出浏览器时被删除。
1. Cookie 插件
jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie。
官方地址:http://plugins.jquery.com/cookie/
Github 地址:https://github.com/carhartl/jquery-cookie
使用 jquery.cookie.js 之前需要先引入 jQuery:
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.cookie.js"></script>
我们可以使用第三方资源库引入这两个文件:
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
使用方法
创建 cookie:
$.cookie('name', 'value');
如果未指定过期时间,则会在关闭浏览器或过期。
创建 cookie,并设置 7 天后过期:
$.cookie('name', 'value', { expires: 7 });
创建 cookie,并设置 cookie 的有效路径,路径为网站的根目录:
$.cookie('name', 'value', { expires: 7, path: '/' });
**注:**在默认情况下,只有设置 cookie 的网页才能读取该 cookie。如果想让一个页面读取另一个页面设 置的cookie,必须设置 cookie 的路径。cookie 的路径用于设置能够读取 cookie 的顶级目录。将这 个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突)。
读取 cookie:
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
读取所有的 cookie 信息:
$.cookie(); // => { "name": "value" }
删除 cookie:
// cookie 删除成功返回 true,否则返回 false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
// 写入使用了 path时,读取也需要使用相同的属性 (path, domain)
$.cookie('name', 'value', { path: '/' });
// 以下代码【删除失败】
$.removeCookie('name'); // => false
// 以下代码【删除成功】
$.removeCookie('name', { path: '/' }); // => true
**注意:**删除 cookie 时,必须传递用于设置 cookie 的完全相同的路径,域及安全选项。
$(document).ready(function(){
$.cookie('name', 'runoob'); // 创建 cookie
name = $.cookie('name'); // 读取 cookie
$("#test").text(name);
$.cookie('name2', 'runoob2', { expires: 7, path: '/' });
name2 = $.cookie('name2');
$("#test2").text(name2);
});
在Chrome浏览器中按下F12,打开开发者工具,选择"Console (控制台)"选项卡,输入document.cookie,回车就可以查看当前网站的Cookie了。
执行完后,我们可以在浏览器中查看 Cookie 信息,如下图所示:
参数说明
raw
默认值:false。
默认情况下,读取和写入 cookie 的时候自动进行编码和解码(使用 encodeURIComponent 编码,decodeURIComponent 解码)。要关闭这个功能设置 raw:true 即可:
$.cookie.raw = true;
json
设置 cookie 的数据使用 json 存储与读取,这时就不需要使用 JSON.stringify 和 JSON.parse 了。
$.cookie.json = true;
expires
expires: 365
定义 cookie 的有效时间,值可以是一个数字(从创建 cookie 时算起,以天为单位)或一个 Date 对象。如果省略,那么创建的 cookie 是会话 cookie,将在用户退出浏览器时被删除。
path
path: '/'
默认情况:只有设置 cookie 的网页才能读取该 cookie。
定义 cookie 的有效路径。默认情况下, 该参数的值为创建 cookie 的网页所在路径(标准浏览器的行为)。
如果你想在整个网站中访问这个 cookie 需要这样设置有效路径:path: ‘/’。如果你想删除一个定义了有效路径的 cookie,你需要在调用函数时包含这个路径:
$.cookie('the_cookie', null,{ path: '/' });
domain
domain: 'example.com'
默认值:创建 cookie 的网页所拥有的域名。
secure
secure: true
默认值:false。如果为 true,cookie 的传输需要使用安全协议(HTTPS)。
2. jQuery Accordion 折叠栏
jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。
该插件现在是 jQuery UI 的一部分,独立的版本不会再更新了。目前版本是 1.6。
jQuery Accordion 官网,jQuery Accordion 插件下载:http://www.runoob.com/try/download/jquery-accordion.zip。
如需了解更多有关 Accordion 的细节,请查看 API 文档 折叠面板部件(Accordion Widget)。
标准
标准代码如下:
jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
autoheight: false
});
导航
带有锚和嵌套列表的无序列表
jQuery('#navigation').accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'
});
带选项
容器是一个定义列表,标题是 dt,内容是 dd。
jQuery('#list2').accordion({
event: 'mouseover',
active: '.selected',
selectedClass: 'active',
animated: "bounceslide",
header: "dt"
}).bind("change.ui-accordion", function(event, ui) {
jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
});
效果演示网址:jQuery UI Accordion 演示 (runoob.com)
3. jQuery Autocomplete
jQuery Autocomplete 插件根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符,插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符,用户可以过滤列表以获得更好的匹配。
该插件现在是 jQuery UI 的一部分,独立的版本不会再更新了。目前版本是 1.6。
访问 jQuery Autocomplete 官网,下载 jQuery Autocomplete 插件。
如需了解更多有关 Autocomplete 的细节,请查看 API 文档 自动完成部件(Autocomplete Widget)。
实例演示网址:jQuery Autocomplete | 菜鸟教程 (runoob.com)
4. jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失,不需要单击"确定"按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息。
该插件目前版本是 1.0.0。
访问 jQuery Growl 官网,下载 jQuery Growl 插件。
效果如下:![img](https://i-blog.csdnimg.cn/blog_migrate/b880c5b2e71dfc9a8f42d49adad0b53b.jpeg)
使用方式
下载好插件后导入 jQuery 库,jquery.growl.js,jquery.growl.css 三个文件,如:
<script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
<link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
如需使用 Growl 插件,请选择你要设置的显示文本元素,把文本作为参数传递给它:
$.growl({ title: "消息标题", message: "消息内容!" });
$.growl.error({ title: "错误标题", message: "错误消息内容!" });
$.growl.notice({title: "提醒标题", message: "提醒消息内容!" });
$.growl.warning({title: "警告标题", message: "警告消息内容!" });
有几个可用的默认选项。如果您有兴趣,可以查看下面完整的实例演示:菜鸟教程在线编辑器 (runoob.com)
5. jQuery Password Validation(密码验证)
jQuery Password Validation(密码验证)插件扩展了 jQuery Validate 插件,提供了两种组件:
一种评价密码的相关因素的功能:比如大小写字母的混合情况、字符(数字、特殊字符)的混合情况、长度、与用户名的相似度(可选的)。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。
您可以简单地自定义强度显示的外观、本地化消息显示,并集成到已有的表单中。
该插件目前版本是 1.0.0。
使用方式
如需使用 Password Validation(密码验证)插件,请添加一个 class “password” 到 input,同时添加显示强度的基本标记在表单的需要显示的地方:
<form id="register">
<label for="password">Password:</label>
<input class="password" name="password" id="password" />
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</form>
对表单应用 Validate 插件:
$(document).ready(function() {
$("#register").validate();
});
您可以重载 $.validator.passwordRating 实现不同的评价方法。或者重载 $.validator.passwordRating.messages 来提供其他消息,比如本地化。
6. jQuery Prettydate
jQuery Prettydate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
该插件目前版本是 1.1.0。
下载 jQuery Prettydate Validation(密码验证)插件。
使用方式
如需使用 Prettydate 插件,您需要在 title 中带有 ISO8601 日期:
<a title="2008-01-28T20:24:17Z">January 28th, 2008</a>
<a title="2008-01-27T22:24:17Z">January 27th, 2008</a>
<a title="2008-01-26T22:24:17Z">January 26th, 2008</a>
然后对它们应用 prettyDate 方法:
$(function() { $("a").prettyDate(); });
如需本地化该插件,请在 $.prettyDate.messages 中重写属性。在这里,以德国本地化为例:
$.prettyDate.messages = { now: "gerade eben", minute: "vor einer Minute", minutes: $.prettyDate.template("vor {0} Minuten"), hour: "vor einer Stunde", hours: $.prettyDate.template("vor {0} Stunden"), yesterday: "Gestern", days: $.prettyDate.template("vor {0} Tagen"), weeks: $.prettyDate.template("vor {0} Wochen") }
该插件每隔 10 秒中更新一次每个被选中的元素。这样子 “just now” 会变为 “1 minute ago” 再变为 “x minutes ago” 再变为 “1 hour ago” 等等。
您可以通过指定 interval 选项为 “false” 来禁用间隔更新:
$(function() { $("a").prettyDate({ interval: false }); });
或者设置一个不同的时间间隔,例如:interval: 1000,每隔一秒更新一次每个被选中的元素:
$(function() { $("a").prettyDate({ interval: 1000 }); });
value 选项默认读取 title 属性中的 ISO8601 日期字符串。重载该选项来使用其他属性,例如,一个自定义的 “isodate” 属性:
$(function() {
$("a").prettyDate({
function() { // "this" 是 DOM 元素
return $(this).attr("isodate");
}
});
});
7. jQuery Tooltip
jQuery Tooltip 插件取代了原生的工具提示框,让它们可自定义,您只需要调整它们的内容、位置和外观即可。
该插件目前版本是 1.3,已经很长时间没有更新,推荐使用 jQuery UI 工具提示框(Tooltip)。
如需了解更多有关 jQuery UI 工具提示框(Tooltip)的细节,请查看 API 文档 jQuery UI 工具提示框部件(Tooltip Widget)。
8. jQuery 树型菜单插件(Treeview)
jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航,支持基于 cookie 的持久性菜单。
<ul id="browser" class="filetree treeview-famfamfam">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="folder">Item 1.1</span>
<ul>
<li><span class="file">Item 1.1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="folder">Subfolder 2.2</span>
<ul>
<li><span class="file">File 2.2.1</span></li>
<li><span class="file">File 2.2.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
</li>
</ul>