jQuery_05(插件)

一.自定义插件

1.extend:
1.作用一（对象继承）：$.extend(对象一，对象二)------》对象一继承对象二

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

案例1：两个对象的继承
 var person = {
	"name":"zhangsan",
 	"sex":"男",
	"age":18
 };
 console.log($.type(person));
 var stu = {
        "hobby":"打游戏"
};
          console.log(person);
          console.log(stu);
 使用$.extend()来实现将stu继承person中的属性
	 $.extend(stu,person);
	 console.log(person);
	 console.log(stu);
				
extend(三个参数)
 第一个参数的对象继承后面所有参数的对象
 var tqq = {
	"love":100
 }
          console.log(tqq);
          $.extend(tqq,stu,person);
          console.log(person);
          console.log(stu);
          console.log(tqq);

2.作用二（扩展jQuery类方法）：$.extend({方法名：function(){方法体}})
 

// 类方法===java中的静态方法  可以直接通过$.方法（）
				$.extend({
					"mydemo":function(){
						console.log("这就是我编写的类方法");
					}
				});
				
				// 调用拓展的类方法
				$.mydemo();
				//案例2：求最大值(最小值)
				$.extend({
					// 实现最大值的类方法制作
					// "myMax":function(a,b){
					// 	return a>b?a:b;
					// }
					// arguments 数组容器，可以存储函数中的参数个数
					"myMax":function(){
						var max = arguments[0];
						if(arguments.length>0){
							for(var i = 0;i<arguments.length;i++){
								if(arguments[i]>max){
									max = arguments[i];
								}
							}
						}else{
							return arguments.length;
						}
						return max;
					},
					"myMin":function(){
						var min = arguments[0];
						if(arguments.length>0){
							for(var i = 0;i<arguments.length;i++){
								if(arguments[i]<min){
									min = arguments[i];
								}
							}
						}else{
							return arguments.length;
						}
						return min;
					}
					
				});
				
				
				 console.log($.myMax(10,20));
				 console.log($.myMax(10,20,50));
				 console.log($.myMin(10,20,50));
				 console.log($.myMax());

2.fn.extend（扩展jQuery类方法）：$.extend({方法名：function(){方法体}})

案例3：实现全选效果
 通过$.fn.extend()扩展一个对象方法（作用：实现全选）
				$.fn.extend({
					"mycheck":function(){
						// $(this) 所有的复选框
						// console.log($(this));
						$(this).each(function(){
							// console.log($(this).val());
							// 调用prop属性设置选中
							$(this).prop("checked",true);
						});
					},
					"unmycheck":function(){
						$(this).each(function(){
							// console.log($(this).val());
							// 调用prop属性设置选中
							$(this).prop("checked",false);
						});
					}
				});
				
				//为全选按钮设置一个点击事件并调用对象方法
				$("#qx").click(function(){
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").mycheck();
				});
				// 取消全选
				$("#unqx").click(function(){
					// $("input:checkbox") 得到的是所有的复选框
					$("input:checkbox").unmycheck();
				});

二.第三方插件

1.表单验证
       1.插件名:jQuery  validation
       2.使用步骤：
                ①下载jQuery插件验证库   jQuery.validate.js
                ②将类库引入界面
                ③两种方式引入验证--》1.HTML标签属性
                                                     2.js方式（推荐）：
                                                                               2.1验证及错误信息
                                                                                             $("表单元素").validate({
                                                                                                           rules:{
                                                                                           字段验证规则
                                                                                                   },
                                                                                                    messages：{
                                                                                           字段错误信息
                                                                                                   }
                                                                                               })