jQuery_05(插件)

最新推荐文章于 2024-11-10 22:45:39 发布

阿菜酱

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量1.1k

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_65208075/article/details/123491726

版权

本文详细介绍了jQuery的extend方法，包括对象继承和扩展jQuery类方法的使用，展示了如何实现对象间的属性继承以及自定义jQuery插件，如全选效果。此外，还提及了第三方验证插件jQuery Validation的使用步骤，包括通过HTML属性和JavaScript方式设置验证规则和错误信息。

摘要由CSDN通过智能技术生成

一.自定义插件

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：{
字段错误信息
}
})