<style type="text/css">
#myForm label.error {
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="img/js/jquery.valideta.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
<!-- jQuery第五次课☞插件 -->
区分java的类方法以及对象方法
--类(静态)方法：例如DBHelper.getCon()
--对象方法：StuDao sd = new StuDao(); sd.addStu();
// 一、自定义插件
//1.1 $.extend()实现对象继承
//案例1：两个对象的继承
var s1=();
var s2={"name":"哈哈哈","sex":"女"}
// 继承前
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);
// 开始继承
$.extend(s1,s2);//s1继承自s2
// 继承后
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);
//1.2 $.extend()扩展jQuery类方法
//案例2：求最大值(最小值)
// $.extend({
// abcd:function(){
// alert(123);
// },
// getMax:function(a,b){
// return a>b?a:b;
// },
// getMin:function(a,b){
// return a<b?a:b
// }
// });
// 调用类方法
// var max=$.getMax(10,56);
// console.info(max);
// $.abcd();
// //1.3 $.fn.extend()扩展jQuery对象方法
// $.fn.extend({
// xx:function(){
// //遍历
// $(this).each(function(i,ck){
// ck.checked=true;
// })
// },
// yx:function(){
// //遍历
// $(this).each(function(i,ck){//ck指的是每一个复选框
// cl.checked=true;//让其选中
// })
// }
// })
//案例3：实现全选效果
// 按钮实现全选
// $("#ok").click(function(){
// $(".aaa").xx();
// })
// $("#nook").click(function(){
// $(".aaa").yy();
// })
//复选框实现全选
$("#qx").on("click",function(){
//让其他复选框的状态跟全选框保持一致
//consolo.info($("#qx").prop("checked"));
if($(this).prop("checked")){
$(".aaa").xx();
}
else{
$(".aaa").yy();
}
})
// 完善全选
$(".aaa").click(function(){
var f=true;
$(".aaa").each(function(i,ck){
if(ck.checked==false){
f=true;
}
})
//给全选框重新赋值 改变其状态
$("#qx").prop("checked",)
})
// 二、第三方插件:表单验证插件
//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
$("#myForm").validate({
rules:{
//字段规则部分
uname:{
required:true,
rangelength:[6,10]
},
upwd1:"required",
upwd2:{
required:true,
equalTo:"#upwd1"
}
},
messages:{
//错误提示部分
uname:{
required:"用户名必填",
rangelength:"长度要在6-10位之间"
}
}
})
})
</script>
</head>
<body>
<h2>案例3:自定义插件实现全选功能</h2>
<input type="button" value="全选" id="ok"/>
<input type="button" value="取消全选" id="nook"/>
<input type="checkbox" id="qx"/>全选
<input type="checkbox" class="aaa" value="躺着听网课"/>躺着听网课
<input type="checkbox" class="aaa" value="吃辣条"/>吃辣条
<input type="checkbox" class="aaa" value="玩soul"/>玩soul
<h2>案例4:使用jQuery validation插件完成表单验证</h2>
<form id="myForm">
用户名：<input type="text" name="uname" /><br />
密码：<input type="text" name="upwd1" /><br />
确认密码：<input type="text" name="upwd2" /><br />
邮箱：<input type="text" name="uemali" /><br />
年龄：<input type="text" name="uage" /><br />
网址：<input type="text" name="uurl" /><br />
<input type="submit" value="提交" />
</form>
