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

最新推荐文章于 2020-10-20 14:06:02 发布
最新推荐文章于 2020-10-20 14:06:02 发布
阅读量519 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hlx20080808/article/details/108473067
版权

jQuery为开发插件提拱了两个方法分别是：·

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

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

       

 

案例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>

效果： 

  false

 true

案例2：方法

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		
		//对象的方法
		var obj ={
			show:function(msg){
				alert(msg);
			}
		}
		
//		obj.show("hello!");
		
		//将方法合并到jquery中
		$.extend(obj);
		//jquery-3.3.1.js:3827 Uncaught TypeError: $.show is not a function
		//可以写成这样？
//		$.show("mike");
		
		//两数求和
//		function adds(a,b){
//			return a+b;
//		}
//		
//		var sum =adds(10,20);
//		console.log(sum);
		
		
		//
		$.extend({
			adds:function(a,b){
				return a+b;
			}
		});
		
//		console.log($.adds(200,50));
		
		//数组
		var arrs=["张旭","何小杰","王守宝","胡文俊"];
		//1遍历数组
//		$.each(arrs, function(index,ele) {
//			console.log(index,ele);
//		});
		

		//2自定义each2方法(数组名，函数（索引，元素）)
//		 function each2(arr,fn){
//		 	for(var index in arr){
//		 		console.log(index,arr[index]);
//		 	}
//		 }
		
		//调用函数each2
//		each2(arrs,function(){});

       //3.
       $.extend({
       	  each2:function(arr,fn){
       	  	 for(var index in arr){
		 		fn(index,arr[index]);
		 	 }
       	  }
       })
		
		//调用自己写的each2
		$.each2(arrs, function(index,ele) {
			console.log(index,ele);
		});
	});
</script>

案例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）调用：

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!--引入外部脚本-->
<script src="js/unit.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
	   console.log($.adds(10,50));
	   console.log($.addzero(9));
	   var arrs=["张旭","何小杰","王守宝","胡文俊"];
	   $.each2(arrs, function(index,ele) {
			console.log(index,ele);
		});
	});
</script>

 

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

注意：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>

 

凌冰_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解jquery的$.extend()、$.fn和$.fn.extend()
10-19
在jQuery中，`$.extend()`、`.fn`（即`jQuery.fn`）和`.fn.extend()`是开发者用于增强其功能和创建插件的关键部分。下面我们将详细探讨这三个概念。 1. `$.extend()` `$.extend()`方法用于合并一个或多个对象的属性...
Jquery实现$.fn.extend和$.extend函数
11-26
`$.fn.extend` 主要用于创建自定义插件和扩展jQuery的核心功能。 接下来，`$.extend` 是一个静态方法，它用于合并一个或多个对象到目标对象。当你调用 `$.extend(target, source1, source2, ...)`，`target` 对象将...
关于JQuery里的$.fn详解（jquery扩展）
allWords的博客
11-09 2671
pageEncoding="UTF-8"%> Insert title here                           A                  B                      C                  D         E
js报$ is not a function 的问题的解决方法
work hard
03-01 11万+
在html中的程序，跑的好好的，换成jsp在项目中跑，就一直报$ is not a function错，针对此问题，下面有个不错的解决方法，大家可以尝试操作下 今天在做项目时，碰到了一个超奇怪的问题。我在html中的程序，跑的好好的，换成jsp在项目中跑，就一直报$ is not a function错。找了很久，试了很多，都没解决。后来，突然想到，将我引入的js文件的顺
为数组中所有对象添加属性
qq_44877496的博客
10-20 513
let arr = []; let list = [{id:1,name:'111'},{id:2,age:'222'},{id:3,age:'333'},]; list.map((item)=>{ array.push( Object.assign(item,{age:18}) ) }); Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 ...
85 jQuery-使用$.extend()扩展函数
LiGuogang
01-31 202
1.效果图 1.1 使用$.extend()函数扩展工具函数 1.2 使用 $.extend()函数扩展obj对象 2.html代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;85 jQuery-使用$.extend()扩展函数&lt;/title&gt
Jquery实现$.fn.extend和$.extend函数_.docx
10-09
在JavaScript中，jQuery库提供了两种扩展对象的方法，即`$.fn.extend`和`$.extend`。它们都用于增加或修改现有对象的功能，但应用场景不同。本文将深入解析这两种方法的实现原理和用途。 首先，`$.fn.extend`是用于...
$.extend(),$.fn.extend()扩展方法及相关方法
Baby_加油_的博客
01-23 941
Query开发插件的两个方法： 1.$.extend(object);为扩展jQuery类本身，为类添加新的方法，添加类的静态方法。 2.$.fn.extend(object);给jQuery对象添加方法。 jQuery.fn jQuery.fn = jQuery.prototype = { init: function(selector, context) {
js数组的扩展方法
Thunderfox
08-05 980
1、用于清空数组   Array.prototype.clear = function() { this.length = 0; }     2、判断数据项在数组中的位置 varoldArrayIndexOf = Array.indexOf;//判断是否原始浏览器是否存在indexOf方法 Array.prototype.indexOf = function(ob...
jquery扩展的两个方法与区别
董庆贺的专栏
03-03 1万+
jQuery.extend：Query本身的扩展方法 jQuery.fn.extent(Object) jQuery 所选对象扩展方法 jQuery.extend我们先把jQuery看成了一个类，这样好理解一些。 jQuery.extend()，是扩展的jQuery这个类。 比如：猴子这个类，会说话，会爬树。现在我们用jQuery.extend()给它增加一个本领，让它也会敲代码。如下代码
$.extend()用法
alsdiuhfeircn的博客
07-16 1万+
本文转自：https://www.jianshu.com/p/4ca15259f77b <script src="js/jquery-3.2.0.min.js"></script> <script> var obj={}; var obj1={ name: 'hunger', sex: 'man' }; var obj2={ ...
jquery的$.extend和$.fn.extend的使用详解
亿卢向倍的专栏
11-30 6499
 Jquery.extend() 可以理解成为 Jquery 类添加静态方法，扩展方法原型是： 1 extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3…合并到 dest 中，返回值为合并后的 dest ，由此可以看出该方法合并后，是修改了 dest
jQuery扩展插件方法 $.extend()和$.fn.extend()
PT - Blog
03-19 848
jQuery扩展插件方法 $.extend()和$.fn.extend()
jQuery扩展方法
混合理论的专栏
05-17 273
通过$.fn 向jQuery添加新的方法 通过$.extend()来扩展jQuery 1、$.extend()使用方法： var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})合并后结果为： result={name:"Jerry",age:21,sex:"Boy"} 2、jquery扩展方法的使用
JavaScript 自执行函数和 jQuery扩展方法
Ayhan_huang的博客
10-12 1215
我们通常将JS代码写在一个单独的JS文件中，然后在页面中引入该文件。但是，有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题。那么如何解决这个问题呢？作用域隔离。在JS中，作用域是通过函数来划分的，将JS代码封装到函数中进行调用可以避免变量名/函数名冲突的问题，但是这也并不是万无一失，因为封装函数本身有可能和其它函数重名，解决方案：自执行函数。自执行函数是用一对圆括号将匿名函数包起来，加括号（
$ is not a function 已解决
热门推荐
java journey
10-10 14万+
网上查资料和不断尝试,终于找到原因了. 1)网上一种解释: If you are trying to add your own jQuery code to WordPress, and have had the error “$ is not a function” s
EasyUI(5) $.fn.datagrid.methods[_86e] is not a function(easyui扩展插件冲突错误)
郑清
12-04 8108
出现如下错误：$.fn.datagrid.methods[_86e] is not a function 在项目中我出现的问题是使用可编辑表格扩展插件(Cell Editing in DataGrid)的时候没有相应的效果 后来发现是和datagrid-扩展列信息中的 jeasyui.extensions.datagrid.tooltip.js 插件冲突 解决方法: --> 在to...
$.fn.extend({
最新发布
11-23
根据引用内容，$.fn.extend()是用来扩展jQuery实例对象的方法。下面是一个例子，演示如何使用$.fn.extend()来扩展jQuery实例对象： ```javascript // 定义一个扩展方法 $.fn.extend({ myMethod: function() { console.log("This is my custom method!"); } }); // 使用扩展方法 $("button").myMethod(); // 输出：This is my custom method! ``` 上述代码中，我们使用$.fn.extend()定义了一个名为myMethod的自定义方法，然后我们可以在任何jQuery对象上使用这个方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值