jQuery05插件

一.自定义插件

   1. $.extend

        【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2
        案例1：对象间的继承（两个对象）
        【作用2】扩展jQuery类方法：$.extend( {方法名：function(){ 方法体  } } )
  注意多个方法之间用逗号隔开
        案例2：扩展$.max()和$.min()方法

代码案例：

$.extend({
					// arguments参数 类似一个数组，存储参数的个数
					// 扩展求最大值的类方法
					"myMax1":function(a,b){
						return a>b?a:b;
					},
					"myMax2":function(){
						// console.log(arguments.length);
						// 打擂台的思想
						var max = arguments[0];//假设这个arguments数组中的第一个值为最大值
						// console.log(arguments[0]);
						for(var i = 0;i<arguments.length;i++){
							if(max < arguments[i]){
								max = arguments[i];
							}
						}
						return max;
					},
					"myMin":function(){
						// console.log(arguments.length);
						// 打擂台的思想
						var min = arguments[0];//假设这个arguments数组中的第一个值为最大值
						// console.log(arguments[0]);
						for(var i = 0;i<arguments.length;i++){
							if(min > arguments[i]){
								min = arguments[i];
							}
						}
						return min;
					}
				});
				// console.log($.myMax2(12,2,3,56));
				// console.log($.myMax2(1));
				// console.log($.myMax2());
				// console.log($.myMax2(1,2,3,4,5,6,6,7));
				// console.log($.myMin(22,3,2));

   2. $.fn.extend

        【作用】扩展jQuery对象方法：$.fn.extend( {方法名：function(){ 方法体  } } )
  注意多个方法之间用逗号隔开
        案例3：扩展复选框的全选和取消全选功能【升级之前的版本】

代码案例：

$.fn.extend({
					// 全选的对象方法
					"demo1":function(){
						// 在对象方法中，$(this)代表将来谁调用了，就代表谁
						// console.log($(this));
						// $(this).each(function(){
						// 	$(this).prop("checked",true);
						// });
						// jQuery的特性中有一个隐式迭代器
						$(this).prop("checked",true);
					},
					"demo2":function(){
						$(this).prop("checked",false);
					}
				});
			
				
				$("#checkall").click(function(){
					// 通过获取到复选框  然后调用对象方法demo1 设置所有复选框选中
					$("input:checkbox").demo1();
				});
				$("#qxcheckall").click(function(){
					// 通过获取到复选框  然后调用对象方法demo1 设置所有复选框选中
					$("input:checkbox").demo2();
				});

二.第三方插件

    1.表单验证

        查看API官方文档
        插件名：jQuery Validation
        使用步骤
            【1】.下载jQuery插件验证库
                jquery.validate.js
            【2】.将类库引入页面
            【3】.两种方式使用验证
                HTML标签属性方式
                JS方式【推荐】
                    验证及错误信息
                        $("表单元素").validate({
    rules:{
     字段验证规则
    }，
    messages:{
    字段错误信息
   }
})
                    错误样式
                        表格元素  label.error{
   样式
}
        验证规则说明
            见jQueryValidate规则.png
        案例4：演示表单验证（用户名、密码、确认密码、年龄、邮箱、网址）

代码案例：

/* 二、第三方插件:表单验证插件 */
			//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
			$(function(){
				
				// 获取表单标签调用插件激活的方法
				$("#formRegister").validate({
					// 插件的使用：2个模块，规则模块，错误信息模块
					rules:{
						// 账号必须有，不能为空
						username:{
							required:true,
							minlength:10
						},
						email:{
							required:true,
							email:true
						}
					},
					// 编写自定义错误信息
					messages:{
						// 账号必须有，不能为空
						username:{
							required:"账号不能为空",
							minlength:"账号必须10以上"
						},
						email:{
							required:"必填",
							email:"邮箱格式不正确"
						}
					}
				});
			});