jQuery05插件

一、需要引入validate插件库（官网下载）

1.区分java的类方法以及对象方法

---类方法（静态方法）；例如：DBHelper.getCon()

--对象方法： StuDao sd=new StuDao(); sd.addStu();

通过以下的两个案例让我们学完今天的内容

<h2>案例3：自定义插件实现全选功能</h2>
        <button type="button" id="ok">全选</button>
        <button type="button" id="nook">取消全选</button>
        <input type="checkbox" id="qx">全选
        <input type="checkbox" class="aa" value="看美女" />看美女
        <input type="checkbox" class="aa" value="看美腿" />看美腿
        <input type="checkbox" class="aa" value="看俊杰" />看俊杰
        <h2>案例4：使用jQuery validation插件完成表单验证</h2>
        <form id="myForm">
            用户名：<input type="text" name="uname"/><br/>
            密码：<input type="text" id="upwd1" name="upwd1"/><br/>
            确认密码:<input type="text" name="upwd2"/><br/>
            邮箱：<input type="text" name="uemail"/><br/>
            年龄：<input type="text" name="uage"/><br/>
            网址：<input type="text" name="uurl"/><br/>
            <input type="submit" value="提交">
        </form>

一、自定义插件

1.1 $.extend() 实现对象继承

例如：

两个对象的继承

var s1={};//空的对象

var s2={"name":"小明","age":38}

输出为：s1为空

s2为 小明 38

准备继承

$.extend(s1,s1);//让s1继承s2

输出为：s1 小明 38

s2 小明 38

1.2 $.extend()扩展jQuery类方法

例如：求最大值

$.extend({
    abc:function(){
    alert(1)//弹出1
}，
Max:function(a,b){//最大值
    return a>b?a:b;//三元运算符（前大返前 前小返后）
}，
Min:function(a,b){//最小值
return a<b?a:b
}
})

直接调用输出就行

var max=$.Max();

console.info($.Max(45,12));//传入两个number参数

1.3$.fn.extend() 扩展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;//让其取消选中
						})
					},
				})
				

按钮

               $("#qx").click(function(){
					//判断全选框是否选中
					if($(this).is(":checked")){
						$(".aa").xx();
					}else{
						$(".aa").yy();
					}
				})

复选框

            $("#qx").click(function(){
					//判断全选框是否选中
					if($(this).is(":checked")){
						$(".aa").xx();
					}else{
						$(".aa").yy();
					}
				})

完善全选

思路：-------1.给所有复选框添加点击事件
                 --2.遍历所有其他复选框，判断如果有任何一个没有选中，那么全选框就不能选中
                 --3.假设法

                $(".aa").click(function(){
					var f=true;//假设选中
					$(".aa").each(function(i,ck){
						//ck指的是其他的每一个复选框
						//判断如果有任何一个没有选中
						if(ck.checked==false){
							f=false;
						}
					})
					//改变全选框的状态
					$("#qx").prop("checked",f);
				})

二、第三方插件：表单验证插件

表单验证（验证用户名，密码等等）

$("#myForm").validate({
					rules:{
						//规则部分
						uname:{
							required:true,//必须填入内容
							rangelength:[6,10]
						},
						upwd1:"required",
						upwd2:{
							required:true,
							equalTo:"#upwd1"
						},
						uemail:{
							required:true,
							email:true
						},
						uage:{
							required:true,
							range:[1,150]
						}
					},
					messages:{
						//错误信息提示部分
						uname:{
							required:"必填",
							rangelength:"必须在6-10为之间"
							}
					}
				})

jQuery也就讲完了 感兴趣的关注一下