jQuery——插件

目录

插件

一.自定义插件             $.extend() 能够实现继承，能够扩展类方法（类似java的静态方法  直接可通过$工具调用）

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

$.fn.extend()扩展一个对象方法（作用：实现全选）

第三方插件:表单验证插件

插件规则：

 思维总结：

---

插件

一.自定义插件 
            $.extend() 能够实现继承，能够扩展类方法（类似java的静态方法  直接可通过$工具调用）

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

案例2 ：(三个参数)

               	// var person = {
				// 	"name":"zhangsan",
				// 	"sex":"男",
				// 	"age":18
				// };

				// console.log($.type(person));
				// var stu = {
				// 	"hobby":"打游戏"
				// };
                 //var tqq = {
				// 	"love":100
				// }
				// console.log(tqq);
				// $.extend(tqq,stu,person);
				// console.log(person);
				// console.log(stu);
				// console.log(tqq);

---

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

                $.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());

				//1.3 $.fn.extend()扩展jQuery对象方法
				$.fn.extend({
					"demo1":function(){
						console.log("拓展的某个对象的方法");
					}
				});
				
				$("#obtn1").click(function(){
					// $(this).demo1();
					$.fn.demo1();
				});

---

$.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();
				});

---

第三方插件:表单验证插件

案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)

---

插件规则：

 思维总结：