jQuery05插件

一、自定义插件

1.$.extend

①对象继承：$.extend(对象1，对象2)-->对象1继承对象2

②扩展jQuery类方法:$.extend({方法名:function(){方法体}})

案例：求最大值(最小值)

代码展示:

$.extend({
    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(10,56);
console.info(max); 

效果展示:

注意：多个方法之间用逗号隔开

2.$.fn.extend

①扩展jQuery对象方法:$.fn.extend({方法名:function(){方法体}})

案例：实现全选并完善效果

代码展示:

$("#qx").on("click",function(){
	让其他复选框的状态跟全选框保持一致
	console.info($("#qx").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);
}) 

效果展示：

二、第三方插件

1.插件名：

jQuery Validation

2.使用步骤：

2.1下载jQuery插件验证库:jquery.validate.js

2.2将类库引入页面

2.3两种方式使用验证：

①HTML标签属性方式

②JS方式:

验证及错误信息

$("表单元素").validate({
    rules:{
        字段验证规则
    },
    messages:{
        字段错误信息
    }
})

错误样式

表格元素 label.error{
    样式
}

3.验证规则说明

案例：演示表单验证：

$("#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]
						},
						uurl:{
							required:true,
							url:true
						}
					},
					messages:{
						//错误信息提示部分
						uname:{
							required:"用户名必填",
							rangelength:"长度要在6-10位之间"
						}
					}
				})

效果展示: