jQuery05----插件

一、自定义插件

1.对象继承() $.extend(对象1，对象2)

		var p1={};
			var p2={"name":"张三","age":18};
			console.info("继承前: "+p1.name,p1.age);//继承前:undefined undefined
			console.info("继承前: "+p2.name,p2.age);//继承前:张三  18
			//开始继承
			$.extend(p1,p2);//让p1继承自p2
			console.info("继承后: "+p1.name,p1.age);//继承后:张三 18
			console.info("继承后: "+p2.name,p2.age);//继承后:张三 18

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

		// 2.2.扩展jQuery类方法：$.extend({方法名:function(){方法体}})
			//扩展类方法(求最大值\最小值)
			$.extend({
				abcd:function(){},
				getMax:function(a,b){
					return a>b?a:b;
				},
				getMin:function(a,b){
					return a<b?a:b;
				}
			})
			
			//调用方法
			var m = $.getMax(12,45);
			console.info(m);//45
			var m1 = $.getMin(12,45);
			console.info(m1);//12

---

body里面内容

<h2>案例三:自定义插件实现全选功能</h2>
		<button type="button" id="all">全选</button>
		<button type="button" id="notAll">取消全选</button>
		<input type="checkbox" id="qx" value="" />全选
		<input type="checkbox" id="qx" class="aa" value="吃饭" />吃饭
		<input type="checkbox" id="qx" class="aa" value="睡觉" />睡觉
		<input type="checkbox" id="qx" class="aa" value="打篮球" />打篮球

3. 扩展对象方法$.fn.extend({方法名:function(){方法体}})

//案例三:自定义插件实现全选功能
				$.fn.extend({
					check:function(){//全选
						$(this).each(function(i,ck){//下标,元素
							ck.checked=true;//选中
						})
					},
					uncheck:function(){//取消全选
						$(this).each(function(i,ck){//下标,元素
							ck.checked=false;//不选中
						})
					}
				})
				
				//调用全选方法
				$("#all").click(function(){
					$(".aa").check();//调用全选的方法
				})
				//调用取消全选方法
				$("#notAll").click(function(){
					$(".aa").uncheck();//调用全选的方法
				})

---

二 、表单验证

使用步骤

1. 【下载jQuery插件验证库】---jQuery.validate.js
2. 将类库引入页面

   <!-- 引入jQuery.validate.js -->
   <script src="js/jQuery.validate.js" type="text/javascript"></script>

3. 【两种方式使用验证】

 第一种:HTML标签属性方式

第二种:JS方式【推荐】

验证错误信息

$(“表单元素”).validate({
    rules;{
     字段验证规则
    },
    messages:{
    字段错误信息
    }
})

错误样式

表格元素  label.error{
    样式
}

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

	<!-- 第三方插件（表单验证） -->
		<script type="text/javascript">
			$(document).ready(function(){
				// 获取表单标签调用设置插件的方法
				$("#myForm").validate({
					// 规则rules
					rules:{
						// 账号username
						username:{
							required:true
						},
						// 验证邮箱规则
						myeamil:{
							required:true,
							email:true
						}
					},
					// 自定义错误信息messages
					messages:{
						// 账户的错误信息提示
						username:{
							required:"用户名不能为空"
						},
						myeamil:{
							required:"邮箱不能为空",
							email:"邮箱的格式不满足要求"
						}
					}
				});
			})
		</script>

插件规则: