这里写目录标题
思维导图
1.自定义插件
1.$.extend
1.作用1:对象继承：
$.extend(对象1，对象2)---->对象1继承对象2。可以理解成：对象2中的数据给了对象1，后面的对象数据给了前面对象
作用2：扩展jQuery对象方法：$.extend({方法名：function(){ 方法体 }})。注意多个方法之间用逗号隔开
扩展多选框的全选和全不选功能【升级之前的版本】
1.1 案例
$.fn.extend({
selectAll:function(){
var cs = $(this);
cs.each(function(){
$(this).attr("checked",true)
})
},
unselectAll:function(){
var cs = $(this);
cs.each(function(){
$(this).attr("checked",false)
})
}
})
//调用
$('.selectAll').click(function(){$('.checkbox').selectAll()})
$(".unselectAll").click(function(){$(".checkbox").unselectAll()})
2.表单插件
1.查看API官方文档
2.插件名：jQuery Validation
3.使用步骤
【1】.下载jQuery插件验证库jquery.validate.js
【2】.引入页面
【3】.两种方式使用验证
2.2 表单验证案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bdyz/dist/jquery.validate.js"></script>
</head>
<body>
<!-- <table border="1px" width="400px" align="center" style="text-align: center;">
<tr>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
</tr>
<tr>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
</tr>
<tr>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
<td><input type="checkbox" class="qwe" /></td>
</tr>
</table>
<center>
<button type="button" id="aa">全选</button>
<button type="button"id="aaa">取消全选</button>-->
<!-- </center> -->
<form id="my">
账号:<input type="text" name="uname" /><br />
密码:<input type="text" name="pwd" /><br />
二次密码:<input type="text" name="upwd" /><br />
年龄:<input type="text" name="uage" /><br />
</form>
</body>
<script type="text/javascript">
// $(function(){
// var a = {"name":"nb巨蜥"}
// var b = {"name":"666"}
// $.extend(a,b);
// console.info(a.name)
// $.extend({aas:function(){
// console.info("asd")
// },aass:function(){
// console.info("ok")
// }})
// $.aas()
// $.aass()
// $("#aa").click(function(){
// $(".qwe").qx();
// })
// $("#aaa").click(function(){
// $(".qwe").qxqx();
// })
// })
$(function(){
$("#my").validate({
//编写规则
ruels:{
//账号
uname: {
//非空判断
required:true,
//最小长度
minlength:5
},
//密码
pwd:{
//非空判断
required:true,
//长度在5-10
rangelength:[5,10]
},
//二次密码
upwd:{
//非空判断
required:true,
//和第一次输入的密码一致
equalTo:"#pwd"
},
//年龄
uage:{
//非空判断
required:true,
//必须是整数
digits:true,
//18到100岁之间
range:[18,100]
}
},
messages:{
//账号
uname:{
//非空判断
required:"账号不能为空",
//最小长度
minlength:"账号长度不能小于5"
},
//密码
pwd:{
//非空判断
required:"密码不能为空",
//长度在5-10
rangelength:"密码长度在5-10之间"
},
//二次密码
upwd:{
//非空判断
required:"二次密码不能为空",
//和第一次输入的密码一致
equalTo:"二次密码不一致"
},
//年龄
uage:{
//非空判断
required:"年龄不能为空",
//必须是整数
digits:"年龄必须是整数",
//18到100岁之间
range:"年龄必须18到100岁之间"
}
}
})
})
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
