jQuery0插件

Hilo Everybody wellcome to my channel！

今天Lion带大家来学习jQuery的插件（jQuery05）

---

什么是插件呢？相比新手的代码工人还不晓得，其实插件就是函数我们直接下载过来用的意思。

所以现在我们来看看今日的思维导图吧：

---

今天分为两个部分：

一、自定义插件

我们需知道：什么是类方法什么是对象方法呢？

        类方法就是可以直接用jQuery或者$去点击的函数方法称之为类方法；而对象方法就是指需要一个对象去点击的方法eg：按钮.click()就是一个典型的对象方法它需要一个按钮对象去点击；

1.1 $.extend(类方法)

        1.1.1自定义类方法作用1：对象继承

代码展示：

                // 1.1 $.extend()实现对象继承
				// 案例1：两个对象的继承
				var s1={};
				var s2 ={"name":"欧阳翔","sex":"女"};
				
				// 继承前：
				console.info(s1.name,s2.name);
				console.info(s1.sex,s2.sex);
				// 继承后
				$.extend(s1,s2);
				console.info(s1.name,s2.name);
				console.info(s1.sex,s2.sex);

        1.1.2自定义类方法作用2：扩展类方法（自己写方法）

比如我们想写一个求最大值或者最小值的类方法

代码展示：

                // 1.2 $.extend()扩展jQuery类方法
				// 案例2：求最大值(最小值)
				
				// $.extend({
				// 	abcd:function(){},
				// 	getMax:function(a,b){
				// 		return a>b?a:b;
				// 	},
				// 	getMin:function(a,b){
				// 		return a<b?a:b;
				// 	}
				// })
				// var a=$.getMax(12,32);
				// console.info(a);

1.2 $.fn.extend(对象方法)

对象方法的定义和类方法相似作用的话也就是可以通过对象去点击这个自己定义的方法

比如：案例1实现全选功能

代码展示：

                //1.3 $.fn.extend()扩展jQuery对象方法
				//案例：实现全选效果
				// $.fn.extend({
				// 	xz:function(){//全部选中
				// 		$(this).each(function(i,ck){
				// 			ck.checked=true;
				// 		})
				// 	},
				// 	bxz:function(){//全部不选中
				// 		$(this).each(function(i,ck){
				// 			ck.checked=false;
				// 		})
				// 	}
				// })
				//调用方法
				// $("#qx").click(function(){
				// 	$(".aa").xz();//所有的复选框调用选中的方法
				// })
				// $("#qxqx").click(function(){
				// 	$(".aa").bxz();//所有的复选框调用选中的方法
				// })
				
				//复选框全选
				// $("#qd").on("click",function(){
				// // 	console.info($("#qd").prop("checked"));
				// // 	if($(this).prop("checked")){
				// 	if($(this).is(":checked")){
				// 		$(".aa").xz();
				// 	}
				// 	else{
				// 			$(".aa").bxz();
				// 	}
				// })
				
				// //完善全选
				// $(".aa").click(function(){
				// 	var f=true;
				// 	//遍历aa
				// 	$(".aa").each(function(i,ck){
				// 		if(ck.checked==false){
				// 			f=false;
				// 		}
				// 	})
				// 	$("#qd").prop("checked",f);
				// })

---

二、第三方插件

第三方插件的意思就是别人写好的我们从网站上下载下来（要看懂别人的东西）

1. 推荐的插件库有：www.jQuery.com官方网址（在这里我们是用表单验证的插件库：网址：www.jQueryValidation.org）
2. 下载好后就将你要使用的类库引入页面（和引入jQuery类库一样）
3. 可以开始使用了

案例2：表单验证的插件使用

首先我们先来一个表单

		<form id="bd">
			用户名：<input type="text" name="yhm"/></br>
			密码：<input type="text" name="mm" id="mm"/></br>
			确认密码：<input type="text" name="qrmm"/></br>
			邮箱：<input type="text" name="yx"/></br>
			年龄：<input type="text" name="nl"/></br>
			网址：<input type="text" name="wz"/></br>
			<input type="submit"value="提交" />
		</form>

然后再JavaScript里面写：

                    $("#bd").validate({
					rules:{
						//字段部分
						yhm:{
							required:true,
							rangelength:[6,10]
						},
						mm:"required",
						qrmm:{
							required:true,
							equalTo:"#mm"
						},
						yx:"required",
					},
					messages:{
						yhm:{
							required:"用户名不能为空",
							rangelength:"长度太长"
						}
					}
				})

rules：的意思是规则也就是别人帮我们定义好的我们直接使用就OK所以在这里复分享给大家怎么是用这个表单验证插件的规则：

这些就是这个表单验证功能的规则表比如：必须填写内容 required

messages:既提示信息的显示，我们可以在这个里面将其提示信息改写为中文的方式

---

以上就是今天的内容啦，我们今天分享了jQuery的插件。希望对大家有所帮助!

到这里这次的分享就结束了，欢迎各位继续关注Lion，我们下次再见！

欢迎各位大能多多指导，Lion必将继续努力