<title></title>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* jQuery第五次课☞插件 */
/*
* 区分java的类方法以及对象方法
* --类(静态)方法：例如DBHelper.getCon()
* --对象方法：StuDao sd = new StuDao(); sd.addStu();
*/
$(function() {
/* 一、自定义插件 */
//1.1 $.extend()实现对象继承
//案例1：两个对象的继承
// var s1={};
// var s2={"name":"大炮","age":38};
// //开始继承
// $.extend(s1,s2);
// console.info(s1.name,s1.age);
//1.2 $.extend()扩展jQuery类方法
//案例2：求最大值(最小值)
// $.extend({
// abcd:function(){
// alert(1234);
// },
// getMax:function(a,b){
// return a>b?a:b;
// },
// getMin:function(a,b){
// return a<b?a:b;
// }
// })
// $.abcd();
// console.info($.getMax(10,40)) ;
//1.3 $.fn.extend()扩展jQuery对象方法
//案例3：实现全选效果
// $.fn.extend({
// xx: function() {
// $(this).each(function(i, ck) {
// ck.checked=true;
// })
// },
// yy: function() {
// $(this).each(function(i, ck) {
// ck.checked=false;
// })
// }
// })
// $("#ok").click(function() {
// $(".aaa").xx();
// })
// $("#nook").click(function() {
// $(".aaa").yy();
// })
//
// // 复选方式
// $("#qx").click(function(){
// 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=false;
// }
// })
// $("#qx").prop("checked",f);
// })
/* 二、第三方插件:表单验证插件 */
//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
$("#myForm").validate({
rules:{
uname:{
required:true,
rangelength:[6,10]
},
upwd1:"required",
upwd2:{
required:true,
equalTo"#upwd1"
},
uemail:{
required:true,
email:true
},
uage:{
required:true,
}
},
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" />
<input type="checkbox" class="aaa" />
<input type="checkbox" class="aaa" />
<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" name="" id="" value="提交" />
</form>
</body>
</html>
