jquery扩展

最新推荐文章于 2021-11-12 09:19:10 发布

TechBirds

最新推荐文章于 2021-11-12 09:19:10 发布

阅读量918

点赞数

分类专栏： js/jquery 文章标签： jquery扩展对象级别类级别

本文链接：https://blog.csdn.net/techbirds_bao/article/details/8534352

版权

js/jquery 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

当重复使用某个方法时，你就会想要封装这些代码，即使在客户端编写js或者jquery脚本也不另外。恰巧在项目中使用到了jquery对于方法封装的好处，非常灵活。

1.类级扩展-全局方法

//自定义全局函数1 未用命名空間
 jQuery.extend({
   sum:function(a,b){return a+b;}
 });
 // 自定义全局函数2
 jQuery.foo=function(j){
 	alert(j);
 }
 //自定义全局函数1 用命名空間
 jQuery.myPlugin={
 	foo:function(j){
 		alert(j);
 	}	
 }

2.对象方法的扩展

(function($){
 	//形式1
 	$.fn.extend({
 		add:function(j){
 			alert(j);
 		}
 	});
 	//形式2
 	$.fn.foo=function(j){
 		alert(j);
 	}
 })(jQuery);

ps：上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名, 而不会与prototype引起冲突.

3.页面调用

<body>
 	<a href="#" id="a">click</a>
 </body>
 <script type="text/javascript">
 	$("#a").click(function(){
 		$("#a").add(2);
 		$("#a").foo(3);
 		$.foo("foo1");
 		$.myPlugin.foo("foo2");
 		return false;
 	});
 </script>

ps：这里也遇到一个不解，当类级别的代码和对象级别的代码放在同一个js文件中时，会产生错误，分开则表示正常。

TechBirds

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery扩展

当重复使用某个方法时，你就会想要封装这些代码，即使在客户端编写js或者jquery脚本也不另外。恰巧在项目中使用到了jquery对于方法封装的好处，非常灵活。1.类级扩展-全局方法//自定义全局函数1 未用命名空間 jQuery.extend({ sum:function(a,b){return a+b;} }); // 自定义全局函数2 jQuery.foo=functio
复制链接

扫一扫