jQuery05&extend继承&自定义插件&表单插件的使用

目录

1.自定义插件

2.第三方插件

---

 

1.自定义插件

自定义插件
    $.extend
        【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2
       
        【作用2】扩展jQuery类方法：$.extend( {方法名：function(){ 方法体  } } )
  注意多个方法之间用逗号隔开
       
    $.fn.extend
        【作用】扩展jQuery对象方法：$.fn.extend( {方法名：function(){ 方法体  } } )
  注意多个方法之间用逗号隔开
     

/* 一、自定义插件 */
				//1.1 $.extend()实现对象继承
				//案例1：两个对象的继承
				//定义一个人类对象，属性：name，sex
				var person={"name":"琉璃","sex":"女"};
				var b1={};
				$.extend(b1,person);//第一个参数的对象继承后面所有的对象的属性
				// console.log(b1)

				//1.2 $.extend()扩展jQuery类方法
				$.extend({
					"sb":function(){
						console.log("extend()扩展类方法")
					},
					"nb":function(){
						console.log("extend()扩展类方法02")
					}
				})
				// $.sb();
				// $.nb();
				//案例2：求最大值(最小值)
				//arguments参数  类似一个数组 存储参数的个数
				$.extend({
					"maxs":function(){
						// console.log(arguments.length)
						var max=arguments[0];
						for(var i=0;i<arguments.length;i++){
							if(max < arguments[i]){
								max = arguments[i];
							}
						}
						return max;
					}
				})
				// console.log($.maxs(1,3,44,33,22,66));
				//1.3 $.fn.extend()扩展jQuery对象方法
				//案例3：实现全选效果
				$.fn.extend({
					"aaa":function(){
						console.log("这是jQuery的对象方法")
					}
				})
				$.fn.extend({
					"quanxuan1":function(){
						$(this).prop('checked',true)
						// console.log(111)
					},
					"quanxuan2":function(){
						$(this).prop('checked',false)
						// console.log(222)
					}
				})
				// ================================
				$("#bb1").click(function(){
					// console.log($("input:checkbox"))
					$("input:checkbox").quanxuan1()
				})
				$("#bb2").click(function(){
					// alert(2222222)
					$("input:checked").quanxuan2()
				})
				// $.fn.aaa();
				// $('button').first().aaa()

2.第三方插件

第三方插件
    表单验证
        查看API官方文档
        插件名：jQuery Validation
        使用步骤
            【1】.下载jQuery插件验证库
                jquery.validate.js
            【2】.将类库引入页面
            【3】.两种方式使用验证
                HTML标签属性方式
                JS方式【推荐】
                    验证及错误信息
                        $("表单元素").validate({
    rules:{
     字段验证规则
    }，
    messages:{
    字段错误信息
   }
})
                    错误样式
                        表格元素  label.error{
   样式
}
 

<script type="text/javascript">
			$('#forms').validate({
				//插件：2哥模块---规则模块，错误信息模块
				// 规则模块
				rules:{
					//账号必须有
					username:{
						required:true
					}
				},
				messages:{
					username:{
						required:"账号不能为空"
					}
				}
			})
		</script>