jQuery 插件

思维导图：

 $.extend 类

$.fn.extend 对象

继承（$.extend）

使用案例：

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);

//案例2:最大值,最小值
 $.extend({
     abcd:function(){//定义方法
			alert(123);
 },
 getMax:function(a,b){
		return a>b?a:b;
  },
  getMin:function(a,b){
		return a<b?a:b;
  }
}); 				
//调用类方法:
 var max = $.getMax(10,15);
console.info(max); 
console.info($.getMin(22,34));
 $.abcd();

对象（$.fn.extend）

使用案例：

            //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;//让其选中
						})
				})

许多都需要功能可能用到全选，一个一个写太麻烦，可以直接封装后用

全选效果的实现

使用案例：

js部分：

                //案例3:实现全选效果

				//复选框选中
				$("#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);
					})
					
					
				}) 

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"  value="aaa" />aaa
		<input type="checkbox" class="aaa"  value="bbb" />bbb
		<input type="checkbox" class="aaa"  value="ccc" />ccc

插件表单验证：

需要另一个类库：jquery.validate.js

使用案例：

js部分：

				//案例4:表单验证(姓名，年龄，密码，确认密码，邮箱，网址)
				$("#myForm").validate({
					rules:{
						//字段规则部分
						// uname:"required";
						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之间"
						},
						upwd1:"密码必填",
						upwd2:{
							required:"确认密码必填",
							equalTo:"两次密码不一致"
						},
						uemail:{
							required:"邮箱必填",
							email:"邮箱格式错误"
						},
						uage:{
							required:"年龄必填",
							range:"年龄在1-150岁之间"
						},
						uurl:{
							required:"网址必填",
							url:"网址输入错误"
						}
					}
				})	

body部分：

<h2>案例4：Query validation 插件表单验证</h2>
		<form id="myFrom">
			用户名：<input type="text" name="uname" /><br />
			密码：<input type="text" name="upwd1" id="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>