表单插件：
序号 | 规则 | 描述 |
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(10, {
items_per_page:3,//每页显示的条目数 可选参数，默认是10 10/3=4 所以页号是1，2，3，4（总条数/每页显示的条目数=页码数）
num_display_entries:4,//连续分页主体部分显示的分页条目数 可选参数，默认是10
current_page:0, //默认选中
num_edge_entries:1,//两侧显示的首尾分页的条目数 可选参数，默认是0
prev_text:"上一页",
next_text:"下一页",
prev_show_always:false,
next_show_always:false,
callback:function (index) {
console.log(index)
$.ajax({
url:"http://localhost/fenye/ajax-page/page.json",
success:function (res) {
var str=""
for(var i=5*index;i<5*(index+1);i++){
if(i<res.length){
str += `<li>${res[i].title}
<br>
<img src="${res[i].images.large}" alt="">
<span>豆瓣评分：${res[i].rating.average}分</span>
</li>`
}
}
$('#list').html(str)
}
})
}
})</script> </html>
长风破浪会有时，直挂云帆济沧海
