一、自定义插件
案例1：两个对象的继承
1.1 $.extend()实现对象继承
var s1={};
// var s2={"name":"小小","age":20};
// console.info(s1.name,s1.age);
// console.info(s2.name,s2.age);
// //开始继承
// $.extend(s1,s2);//s1（子类）继承自s2(父类)
// console.info(s1.name,s1.age);
// console.info(s2.name,s2.age);
案例2：求最大值(最小值)
1.2 $.extend()扩展jQuery类方法
方法：
$.extend({
// abcd:function(){
// alert(2);
// },
// getMax:function(a,b){
// return a>b?a:b;
// },
// getMin:function(){
// return a<b?a:b;
// }
// });
最后调用类方法(必须接收或者大打印)
var max=$.getMax(12,34);
console.info(max);
// $.abcd();
1.3 $.fn.extend()扩展jQuery对象方法
定义方法：
$.fn.extend({
xx:function(){//方法名
//遍历
$(this).each(function(i,ck){//ck每一个复选框 ,this指代调用方法的人即三个复选框
ck.checked=true;//让其选中
})
},
yy:function(){
//遍历
$(this).each(function(i,ck){//ck每一个复选框
ck.checked=false;//让其选中
})
}
})案例3：实现全选效果
1.按钮实现全选：
1.按钮实现全选
调用方法
$("#ok").click(function(){
$(".aaa").xx();
}),
$("#not").click(function(){
$(".aaa").yy();
})2.复选框实现全选
2.复选框实现全选
$("#qx").click(function(){
//让其他复选框和全选框状态保持一致
// console.info($("#qx").prop("checked"));
// if($(this).prop("checked")){//说明全选选中
if($(this).is(":checked")){
$(".aaa").xx();//让其他复选框选中
}
else{
$(".aaa").yy();
}
})完善全选----
给所有复选框增加点击事件
$(".aaa").click(function(){
var f=true;
$(".aaa").each(function(i,ck){ck是每一个复选框
if(ck.checked==false){
f=false;
}
})
给全选框重新赋值改变其状态
$("#qx").prop("checked",f);
})
二、第三方插件:使用jQuery validation插件完成表单
案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
required：必填
$("#myForm").validate({
rules:{
//规则部分
uname:{
required:true,
rangelength:[6,10]//长度6-10之间
},
upwd1:"required",
upwd2:{
required:true,
equalTo:"#upwd1"
},
uemail:{
required:true,
email:true
},
uage:{
required:true,
range:[1,150]//1-150
},
uurl:{
required:true,
url:true
}
},
messages:{
//信息提示部分
uname:{
required:"用户名必填",
rangelength:"用户名长度必须在6-10之间"
},
upwd1:"密码必填",
upwd2:{
required:"新密码必填",
equalTo:"#upwd1"
},
uemail:{
required:"邮箱必填",
email:"邮箱格式不正确"
},
uage:{
required:"年龄必填",
range:"年龄要在1-150之间"//1-150
},
uurl:{
required:"网址必填",
url:"网址格式不正确"
}
}
})
