jQuery插件
Posted hy96
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery插件相关的知识，希望对你有一定的参考价值。
表单插件：
|
序号
|
规则
|
描述
|
|
1
|
required=true
|
必须输入的字段。
|
|
2
|
remote="check.php"
|
使用 ajax 方法调用 check.php 验证输入值。
|
|
3
|
email=true
|
必须输入正确格式的电子邮件。
|
|
4
|
url=true
|
必须输入正确格式的网址。
|
|
5
|
date=true
|
必须输入正确格式的日期。日期校验 ie6 出错，慎用。
|
|
6
|
dateISO=true
|
必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
|
|
7
|
number=true
|
必须输入合法的数字（负数，小数）。
|
|
8
|
digits=true
|
必须输入整数。
|
|
9
|
creditcard:
|
必须输入合法的信用卡号。
|
|
10
|
equalTo="#field"
|
输入值必须和 #field 相同。
|
|
11
|
accept:
|
输入拥有合法后缀名的字符串（上传文件的后缀）。
|
|
12
|
maxlength="5"
|
输入长度最多是 5 的字符串（汉字算一个字符）。
|
|
13
|
minlength="10"
|
输入长度最小是 10 的字符串（汉字算一个字符）。
|
|
14
|
rangelength=[5,10]
|
输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
|
|
15
|
range=[5,10]
|
输入值必须介于 5 和 10 之间。
|
|
16
|
max=5
|
输入值不能大于 5。
|
|
17
|
min=10
|
输入值不能小于 10。
|
demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery验证插件</title> <style> </style> </head> <body> <form action=""> 用户名： <input type="text" name="username" required=true/> <br /> 密码：<input type="password" name="password" required=true/> <br /> 邮箱: <input type="email" name="email" email=true required=true/> <br /> 网址: <input type="url" name="url" url=true required=true/> <br /> 手机号： <input type="tel" name="tel" digits=true maxlength="11" minlength="11" required=true><br /> <input type="submit" value="提交" /> </form> </body> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.js"></script> <script src="jquery.validate.js"></script> <script src="jquery.validate.messages_zh.js"></script> <script> $(‘form‘).validate() </script> </html>
cookie插件：
创建一个会话cookie： $.cookie(‘cookieName’,‘cookieValue’); 注：关闭了浏览器就没有了，就是回话cookie。 创建一个持久cookie： $.cookie(‘cookieName’,‘cookieValue’，｛expires：7｝); 注：当指明时间时，就是持久cookie，expires后面传入的参数是天。 创建一个持久并带有效路径的cookie： $.cookie(‘cookieName’,‘cookieValue’，｛expires：7，path：’/‘｝); 注：如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，"/"的设置能够读取cookie的顶级目录。 获取cookie： $.cookie(‘cookieName’); //如果存在则返回cookieValue，否则返回null。 删除cookie： $.cookie(‘cookieName’,null); 注：如果想删除一个带有效路径的cookie，如下： $.cookie(‘cookieName‘,null,path:‘/‘)；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jquery cookie</title> </head> <body> </body> <script src="../jquery.min.js"></script> <script src="jquery.cookie.js"></script> <script> // $(‘form‘).va....() ------ $(‘div‘).show() --- DOM // $.cookie() ------ $.ajax() --- 全局 // 增、删、改、查 // 设置cookie $.cookie(key, value[, options]) // options代表是可选参数 // 1、设置cookie // $.cookie(‘username‘, ‘wudaxun‘) // 临时设置 cookie，关闭浏览器cookie消失 // 2、设置有效市场为7天的cookie // $.cookie(‘password‘, ‘123456‘, expires: 7 ) // 设置cookie有效时长为7天 // 3、删除cookie // $.cookie(‘password‘, null) // 4、修改cookie // $.cookie(‘username‘, ‘wuxunxun‘) console.log($.cookie(‘username‘)) </script> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery cookie 应用场景</title>
</head>
<body>
<div>
<button id="login">登陆</button>
<button id="logout">退出</button>
</div>
</body>
<script src="../jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script>
/**
* 初次进入页面，判断用户是否登陆（依据cookie），如果登录，跳转到相应的页面（打印index），如果未登录，跳转到登陆页面（打印login）
*
* 如果在登陆页面，点击登陆，成功之后设置 cookie
*
* 应用场景：
* 产品详情 点击加入购物车 要判断是否登陆
* 提交订单 需要判断登陆
* 付款 需要判断登陆
* ....
*
* 本周作业：
* 1、封装 是否登陆 的函数
* */
// 1、页面判断是否登陆
if ($.cookie(‘isLogin‘) === ‘ok‘)
console.log(‘index‘)
// window.location.href = "/index"
else
console.log(‘login‘)
// window.location.href = "/login"
// 2、login页面
$(‘#login‘).on(‘click‘, function ()
// $.cookie(‘isLogin‘, ‘ok‘, expires: 7 )
// 拓展知识点： 设定 cookie 的有效路径
$.cookie(‘isLogin‘, ‘ok‘, expires: 7, path: ‘/week7‘ )
)
// 退出
$(‘#logout‘).on(‘click‘, function ()
// $.cookie(‘isLogin‘, null)
// 拓展： 如果设置cookie带了路径，那么删除一定也要带路径
$.cookie(‘isLogin‘, null, path: ‘/week7‘ )
)
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script>
$(function()
$(‘input[type=button]‘).click(function()
$.cookie(‘name‘,$(‘input[type=text]‘).val());
window.location.href=‘index2.html‘
)
)
</script>
</head>
<body>
<input type="text">
<input type="button" value=‘储存cookie‘>
</body>
</html>
分页插件
| 参数名 | 描述 | 参数值 |
| maxentries | 总条目数 | 必选参数，整数 |
| items_per_page | 每页显示的条目数 | 可选参数，默认是10 |
| num_display_entries | 连续分页主体部分显示的分页条目数 | 可选参数，默认是10 |
| current_page | 当前选中的页面 | 可选参数，默认是0，表示第1页 |
| num_edge_entries | 两侧显示的首尾分页的条目数 | 可选参数，默认是0 |
| link_to | 分页的链接 | 字符串，可选参数，默认是"#" |
| prev_text | “前一页”分页按钮上显示的文字 | 字符串参数，可选，默认是"Prev" |
| next_text | “下一页”分页按钮上显示的文字 | 字符串参数，可选，默认是"Next" |
| ellipse_text | 省略的页数用什么文字表示 | 可选字符串参数，默认是"..." |
| prev_show_always | 是否显示“前一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“前一页”按钮 |
| next_show_always | 是否显示“下一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“下一页”按钮 |
| callback | 回调函数 | 默认无执行效果 |
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="referrer" content="no-referrer"/>
<meta charset="UTF-8">
<title>分页</title>
<style>
*
padding: 0;
margin: 0;
#pagination a
display: inline-block;
width: 30px;
height: 30px;
margin: 10px;
text-align: center;
line-height: 30px;
text-decoration: none;
#pagination .current
background-color: #00aa00;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
line-height: 30px;
#pagination .next
background-color: white;
width: 100px;
#pagination .prev
background-color: white;
width: 100px;
#list
width: 1500px;
margin: 0 auto;
text-align: center;
#list li
float: left;
list-style: none;
border: 1px solid #000;
width: 270px;
height: 400px;
margin-left: 20px;
margin-top: 30px;
#list li img
width: 100%;
height: 350px;
#pagination
position: absolute;
left: 600px;
bottom: 20px;
</style>
</head>
<body>
<ul id="list"></ul>
<div id="pagination"></div>
<script src="../jquery.js"></script>
<script src="../jquery.pagination.js"></script>
<script>
/**
* 接口url: https://www.daxunxun.com/douban
* 提交类型： GET
* 参数： start 默认为0，表示从第几条数据开始查询
* count 默认为20， 表示每页显示的个数
* */
$(‘#pagination‘).pagination(200,
items_per_page:10,
num_display_entries:4,
current_page:3,
num_edge_entries:2,
prev_text:"上一页",
next_text:"下一页",
prev_show_always:false,
next_show_always:false,
callback:function (index)
console.log(index)
$.ajax(
url:"https://www.daxunxun.com/douban",
data:
count:10,
start:10*index
,
success: function (data)
console.log(data)
var str = ""
data.map(item => //相当于用for遍历
console.log(item.images.large)
str += `<li>$item.title
<br>
<img src="$item.images.large" >
<span>豆瓣评分：$item.rating.average分</span>
</li>
`
)
$(‘#list‘).html(str)
)
)
</script>
</html>
以上是关于jQuery插件的主要内容，如果未能解决你的问题，请参考以下文章