大家好，今天还是小刘为大家带来jQuery的教程，今天是jQuery的最后一章——插件，下一章我们将进入javaWeb的讲解，下面我们进入学习时间：
jQuery插件
同往常一样，我们先看思维导图，小刘再为大家剖析
从思维导图来看，内容还是比较少的吧，你以为？hb,确实是你以为的那样
首先，插件分为自定义插件和第三方插件(就是使用他人已完成的插件，插件资源是可以在网上找的，有很多资源)
案例1：两个对象的继承（体现作用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);以上代码先定义了一个空对象与一个非空对象，分别打印出继承前与继承后的两个对象，可以得到第一遍的s1会是空对象（undefined），而继承后就与s2相同
F12键查看结果：
案例二：求最大值(最小值)（体现作用二）
$.extend({//扩展jQuery类方法
abcd:function(){
alert(1234);
},
getMax:function(a,b){//求最大值
return a>b?a:b;
},
getMin:function(a,b){//求最小值
return a<b?a:b;
}
});
//调用类方法
var max=$.getMax(39,5);
console.info(max);
console.info($.getMin(22,34));
// $.absc();先写一个扩展的类方法，求最大值与最小值（39为最大值，22为最小值）注意多个方法之间用逗号隔开
案例3：扩展jQuery对象方法 全选功能
$.fn.extend({
xx:function(){
//遍历
$(this).each(function(i,ck){//ck指每一个复选框
ck.checked=true;//让其选中
})
},
yy:function(){
//遍历
$(this).each(function(i,ck){//ck指每一个复选框
ck.checked=false;//让其选中
})
}
})
//案例3：实现全选效果
$("#ok").click(function(){
$(".aaa").xx();
})
$("#nook").click(function(){
$(".aaa").yy();
})
//复选框实现全选
$("#qx").on("click",function(){
//让其复选框的状态跟全选框保持一致
// console.info($("#qx").porp("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);
})
})这个是验证以及错误信息的模板，以及错误样式
$("表单元素").validate({
rules:{
字段验证规则
}，
messages:{
字段错误信息
}
})
//错误样式
表格元素 label.error{
样式
}案例4：案例4：演示表单验证（用户名、密码、确认密码、年龄、邮箱、网址）
创建表单的代码：
表单样式：
验证的约束代码：
//头部样式
<style type="text/css">
#myForm label.error{
color:#FF0000;
font-size: 14px;
}
</style>
$("#myForm").validate({
rules:{
//字段的规则部分
uname:{
required:true,
rengelength:[6,10]
},
upwd1:"required",
upwd2:{
required:true,
equalTo:"#upwd1"
},
uemail:{
required:true,
email:true
},
uage:{
required:true,
range:[1,150]
},
uurl:{
required:true,
url:true
}
},
messages:{
//错误信息提示部分
uname:{
required:"用户名必填",
rengelength:"长度要在6-10之间"
},
upwd1:"密码必填",
upwd2:{
required:"确定密码必填",
equalTo:"两次密码不一致"
},
uemail:{
required:"邮件必填",
email:"邮箱格式错误"
},
uage:{
required:"年龄必填",
range:"年龄在1-150岁之间"
},
uurl:{
required:"网址必填",
url:"网址输入错误"
}
}
})此时我们的插件就使用完成了，接下来我们看看效果吧，当我们不填写任何内容点击提交时
他会在文本框右侧给予我们一系列的提示，正确输入时即消失，这就说明我们的效果达到了，这样相比我们一个一个做限制是不是方便快捷了很多呢。
好了，今天我们的学习分享就到，此结束了，关注小刘，每天学点新知识，每天进步一点点。
