Jquery 中的扩展方法$.extend() 和$.fn.extend()

落日映苍穹つ 2023-10-05 09:47 109阅读 0赞

## [jQuery][]为开发插件提拱了两个方法分别是：[·][Link 1] ##

#### 1、[jQuery][jQuery 1].extend() or $.extend()函数用于将一个或多个对象的内容合并到目标对象； ####

语法：.extend( \[deep \], target, object1 \[, objectN \] )

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

#### 案例1：属性 ####

<body>
    		 <div id="box"></div>
    	</body>
    </html>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(function(){
    		
    		//第一个对象
    		var obj1={
    			name:"张旭",
    			health:{height:180,weight:77},
    			age:18
    		}
    		 
    		 //第二个对象
    		var obj2={
    			health:{weight:80},
    			sex:"男"
    		}
    		
    		//合并对象到jquery中
    		
    		//将obj2合并到obj1中，
    		//deep:默认是false，浅拷贝:如果有重复的属性，后面会覆盖前面，但不会把height继承下来；
    //		$.extend(obj1,obj2);
    		
    		//deep:true，深拷贝:如果有重复的属性，后面会覆盖前面，会把height继承下来；
    		//显示输出合并的数据
    		$.extend(true,obj1,obj2);
    		
    		//显示
    		$("#box").append(JSON.stringify(obj1));
    		
    		
    	});
    </script>

#### 效果： ####

![20200908172538879.png][] false

![20200908172507639.png][]true

#### 案例2：方法 ####

#### 案例3: 封装一个方法类 ####

(1) 封装方法：

//对象
    var units={
    	adds:function(a,b){  //两数求和
    				return a+b;
    	},
    	each2:function(arr,fn){ //遍历数据
           	  	 for(var index in arr){
    		 		fn(index,arr[index]);
    		 	 }
        },
        addzero:function(zero){ //不满足2位补0
        	return zero<10?'0'+zero:zero;
        }
    }
    
    //合并
    $.extend(units);

（2）调用：

#### 2、[jQuery][jQuery 1].fn.extend() or $.fn.extend() 函数为jQuery扩展一个或多个实例属性和方法 ####

![20200908172720596.png][]注意：jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用

#### 案例1：全选 or 全部选 ####

<body>
    		 <button>全选</button>
    		 <button>反选</button><br />
    		 <input type="checkbox" name="" id="" value="" />玩游戏<br />
    		 <input type="checkbox" name="" id="" value="" />唱歌<br />
    		 <input type="checkbox" name="" id="" value="" />看电影<br />
    	</body>
    </html>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(function(){
    		//循环遍历button
    		$("button").each(function(index,ele){
    			//判断是哪一个按钮
    			if(index==0){
    				//单击事件
    				$(this).click(function(){
    					//全选
    					$("input[type='checkbox']").check();
    				});
    			}else{
    				//单击事件
    				$(this).click(function(){
    					//全选
                      	$("input[type='checkbox']").discheck();
    				});
    			}
    			
    		});
    		
    		
    		//能否写成这样
    //		 	$("input[type='checkbox']").check();
    //		 	$("input[type='checkbox']").discheck();
    		
    		//原生对象
    		$.fn.extend({
    			check:function(){
    				$(this).each(function(){
    					this.checked=true; //this:DOM对象 
    				});
    			},
    			discheck:function(){
    				$(this).each(function(){
    					this.checked=false; //this:DOM对象 
    				});
    			}
    		});
    		
    	
    		
    	});
    </script>

![2020090817323010.png][]

[jQuery]: http://caibaojian.com/jquery/
[Link 1]: http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html
[jQuery 1]: http://caibaojian.com/t/jquery
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200908172402769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20200908172538879.png]: https://img-blog.csdnimg.cn/20200908172538879.png
[20200908172507639.png]: https://img-blog.csdnimg.cn/20200908172507639.png
[20200908172720596.png]: https://img-blog.csdnimg.cn/20200908172720596.png
[2020090817323010.png]: https://img-blog.csdnimg.cn/2020090817323010.png