jQuery $.extend 和 $.fn.extend 例子

最新推荐文章于 2021-10-07 17:57:36 发布
最新推荐文章于 2021-10-07 17:57:36 发布
阅读量98 收藏
点赞数
分类专栏： jquery1.0 文章标签： javascript jquery 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_gust_wind/article/details/118964674
版权

$.extend({ })   是在jQuery函数对象本身添加属性
     访问直接 $.或者jQuery
$.fn.extend({}) 是在jQuery函数对象的原型上添加属性
    访问是jQuery对象访问 $()或者jQuery()
html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>爱好</p>
		篮球<input type="checkbox" name="aihao" value="basket" />
		足球<input type="checkbox" name="aihao"  value="football" />
		羽毛球<input type="checkbox" name="aihao" value="badminton" />
		<div id="box1">
			<button id="checkedAll" type="button">全选</button>
			<button id="noChecked" type="button">全不选</button>
			<button id="invertSelect" type="button">反选</button>
		</div>
	</body>
</html>
<script src="jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
<script src="tool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('#checkedAll').click(function(){
		$('input[name="aihao"]').checkAll()
	})
	$('#noChecked').click(function(){
		$('input[name="aihao"]').unCheck()
	})
	$('#invertSelect').click(function(){
		$('input[name="aihao"]').reverseCheck()
	})

</script>

tool.js的代码

(function(){
	$.extend({
		min:function(){//取最小值
			return Math.min.apply(null,arguments)
		},
		max:function(){//取最大值
			return Math.max.apply(null,arguments)
		},
		rightTrim:function(str){//去掉右边的空格
			var reg = new RegExp("^\\s+")
			return str.replace(reg,'')
		},
		leftTrim:function(str){
			var reg = new RegExp("\\s+$")
			return str.replace(reg,'')
		}
	})
	$.fn.extend({
		checkAll:function(){
			this.prop('checked',true)
		},
		unCheck:function(){
			this.prop('checked',false)
		},
		reverseCheck:function(){
			this.each(function(){
				this.checked = !this.checked
			})
		}
	})
})()
a_gust_wind
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解jquery的$.extend()、$.fn和$.fn.extend()
10-19
在jQuery中，`$.extend()`、`.fn`（即`jQuery.fn`）和`.fn.extend()`是开发者用于增强其功能和创建插件的关键部分。下面我们将详细探讨这三个概念。 1. `$.extend()` `$.extend()`方法用于合并一个或多个对象的属性...
jQuery的extend方法【三种】
shenenhua的博客
09-14 4602
jq中的extend在面试中经常会被问道，今天我总结一个下有关于extend的用法三种进行对比，可能不全，希望大家指点， 用法一： $.extend({}),为jQuery类添加方法，可以理解为扩展静态方法 用法二：$.fn.extend({}) 插件，对jQuery.prototype进行扩展，提到插件那么就得说一下另一种方法$.fn.method = function(){} 　　　　1. $.fn.method = function(){} 可以定义一个方法 　...
jQuery中的$.extend方法与$.fn.extend方法
weixin_52378257的博客
10-07 408
jQuery中的$.extend方法与 $.fn.extend方法 jquery为开发插件提供了两个方法:$.extend与 $.fn.extend 函数用于将一个或多个对象的内容合并到目标对象（可以实现克隆） 参数 描述 deep 如果设为true，则递归合并 target 待修改对象 object1 待合并到第一个对象的对象 objectN 待合并到第一个对象的对象。 第一个参数不写（浅克隆），合并过来的引用类型数据只复制地址，后者被合并对象引用类型数据修改，合
理解jquery的$.extend()、$.fn和$.fn.extend()
夜轩14
12-11 3841
jquery插件的开发包括两种：一种是类级别的插件开发，即给jquery添加新的全局函数，相当于给jquery类本身添加方法。jquery的全局函数就是属于jquery命名空间的函数。另一种是对象级别的插件开发，即给jquery对象添加方法，下面就两种函数的开发做详细的说明。1.类级别的插件开发类级别的插件开发最直接的理解就是给jquery类添加类方法，可以理解为添加静态方法。典型的例子就是$.aj
jquery的$.extend和$.fn.extend的使用详解
亿卢向倍的专栏
11-30 6501
 Jquery.extend() 可以理解成为 Jquery 类添加静态方法，扩展方法原型是： 1 extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3…合并到 dest 中，返回值为合并后的 dest ，由此可以看出该方法合并后，是修改了 dest
jquery 中 $.extend 和 $.fn.extend 的区别
li_2580的博客
09-25 496
它们的区别其实很简单，$.extend是用来扩充jquery类属性或者方法所用 而 $ .fn.extend是用来扩充jquery实例的属性或者方法所用，那什么是类属性什么又是实例属性呢？只要是静态的就是属于类级别，非静态的就是实例级别的 $.extend是用来扩充jquery类属性或者方法所用 var jsonObj1={ sid:'s001', sname...
Jquery实现$.fn.extend和$.extend函数
11-26
在jQuery库中，`$.fn.extend` 和 `$.extend` 是两个非常重要的功能，它们用于扩展jQuery的功能和对象。这两个函数虽然名字相似，但作用却截然不同。 首先，`$.fn.extend` 是用于扩展jQuery选择器对象的方法。当你...
jquery $.fn.extend
09-04
`$.fn.extend`是jQuery库中的一个核心方法，主要用于扩展jQuery对象的方法集合。这个方法允许开发者自定义jQuery的函数，从而实现对DOM元素的操作或添加新的功能。在jQuery中，`$.fn`实际上是`$.prototype`的一个...
jQuery中$.fn的用法示例介绍
01-19
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子：...
jQuery中的"$.extend()"和"$.fn.extend()"的区别：
dh12313012的博客
11-30 413
jQuery中的’$'和"$.fn"的区别： 新手上路，最近在学前端的一些知识。在一个项目中看到这两个符号，后来上网查了一下，下面将这两个区别简单写一下。 这两个都是为jQuery赋予方法，但是他们赋予的方法有个本质上的区别： $.extend(也可以写成jQuery.extend())，这是拓展jQuery本身的方法。也就是说，只要我们用这个拓展方法，那么这个方法，可以不通过对象直接使用。 ...
jQuery.fn.extend() 函数详解
时清云的博客
03-31 712
jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。 jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。 该函数属于jQuery的原型对象(jQuery.fn)。 语法 jQuery 1.0 新增该静态函数。
jQuery $.fn.extend()和$.extend()详解
weixin_42185136的博客
11-27 1809
尽管现在有大量非常棒的插件可供我们免费下载和使用，但是在实际开发中，我们有时候需要根据项目需求自己来定义一个插件，提供给团队其他人复用。学习使用 jQuery 并不难，因为它非常简单。但是如果你想要使能力上升一个台阶，学会编写一个属于自己的 jQuery 插件是一个不错的办法。 从广义上来说，jQuery 插件可以分为以下 3 种。 方法类插件； 函数类插件 选择器插件； 其中的选择器插件，很少有人会去开发使用，因为 jQuery 内置的选择器已经足够完善了，所以我们只会介绍方法类插件和函数类插件。 j
Jquery 中的扩展方法$.extend() 和$.fn.extend()
分享我的点点滴滴，在成长路上与你同行！
09-08 520
jQuery为开发插件提拱了两个方法分别是：· 1、jQuery.extend() or$.extend()函数用于将一个或多个对象的内容合并到目标对象； 语法：.extend( [deep ], target, object1 [, objectN ] ) 案例1：属性 <body> <div id="box"></div> </body> </html> <scri...
jQuery.fn.extend ($.fn.extend)的使用
西风XF的博客
06-08 831
昨天说了$.extend，今天百度资料，看到了$.fn.extend的用法，顺便也说一下： $.extend用法是扩展jQuery的方法，那么$.fn.extend也是扩展方法，但是$.fn.extend是用来扩展DOM的方法的。 例如： $.fn.extend({ sum:function(){ alert("sum"); } });若调用例子中
jquery的.fn.extend使用方法
海生的博客
08-03 652
jQuery为开发插件提拱了两个方法，分别是： $.fn.extend()和$.extend(); 下面来看下两个方法的具体使用： 1)  $.extend() extend(data,src1,src2,src3…);该方法是将src1,src2,src3…合并到data中,返回值为合并后的data。 var newObj=$.extend({},s
jquery 插件开发／插件编写$.fn.extend(),$.extend()
京都玩家
07-13 1700
js/jquery 插件开发，进一步提高插件编写能力！
浅谈jQuery.extend 与 jQuery.fn.extend
筱葭的博客
03-04 1671
jQuery是一个JavaScript类，如$("#input1") 生成一个 jQuery类的实例。 jQuery为开发插件提拱了两个方法：jQuery.fn.extend()和jQuery.extend()。 1、jQuery.extend() (1)为jQuery类添加类方法（静态方法） jQuery.extend({ 　　add: function(a, b)
jQuery的 $.fn.extend和 $.extend的区别和使用
IT_10的博客
06-28 576
jQuery为开发插件提拱了两个方法，分别是：jQuery.fn.extend(object)和jQuery.extend(object) jQuery.extend(object)：用于扩展jQuery类本身，为jQuery类添加新的方法，即可以通过 $.functionName()调用的方法。还可以将两个或更多对象的内容合并到第一个对象。 jQuery.fn.extend(object)：用于...
$.fn.extend({
最新发布
11-23
下面是一个例子，演示如何使用$.fn.extend()来扩展jQuery实例对象： ```javascript // 定义一个扩展方法 $.fn.extend({ myMethod: function() { console.log("This is my custom method!"); } }); // 使用扩展...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值