jQuery插件编写的原理

最新推荐文章于 2024-11-17 23:52:47 发布

原创最新推荐文章于 2024-11-17 23:52:47 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #jQuery插件

javascript和jQuery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用jQuery创建两种类型的插件：类级别插件和对象级别插件，并通过实例展示了如何定义插件方法和使用$.extend()来扩展jQuery的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想写一个jQuery的小插件，可是没接触过，上网看别人的也看不懂，现在也算看出一点小小的原理了

1.类级别插件，直接jQuery.xxx()或$.xxx()调用，类似$.ajax();

//全局函数
		$.foo=function (){console.info('foo')}
		$.foo();
		
		//jQuery.extend()
		$.extend({
			test1:function(){
				console.info("test1");
			},
			test2:function(data){
				console.info("test2"+data);
			}
		});
		$.test1();
		$.test2("ang");
		
		//命名空间
		$.mySpace={
			test1:function(){
				console.info("mySpace1");
			},
			test2:function(data){
				console.info("mySpace2"+data);
			}
		}
		$.mySpace.test1();
		$.mySpace.test2("ang");

结果：

2.对象级别

	<script type="text/javascript">
	
		(function($){
			$.fn.extend({
				color:function(options){
					options=$.extend({//默认参数
						color:"red",
						width:"100px",
						height:"30px"
					},options);//传递的参数，如果有传递的参数，默认里面的相同属性会被传递的参数给覆盖
					$(this).css("color",options.color);
					$(this).height(options.height);
					$(this).width(options.width);
				}
			});
		})(jQuery);
		
		$(function(){
			$("#test1").color();
			$("#test2").color({
				color:"#EEAD0E",
				height:"20px"
			});
			$("#test3").color({
				color:"#blue",
				width:"80px"
			});
		});
	</script>

结果：

分解介绍：

1.对象级别的插件格式，基本都是这样的格式

(function($){
//需要实现的代码
})(jQuery);

2.options是要传递的参数，是个数组，里面包含了要控制的属性

options=$.extend({

options={

}

},options);

这样用$.extend();后面的options如果有跟前面默认的options的相同的属性，就会覆盖掉默认的属性。这样，在调用函数的时候可以传递参数，实现想要达到的目的。

比如:

var opt1={name:'aaa',age:'25',sex:'男'}；
var opt2={name:'bbb',age'30'};
$.extend(opt1,opt2);
结果是：{name:'bbb',age:'30',sex:'男'}

$(this).css("color",options.color);
$(this).height(options.height);
$(this).width(options.width);

这里的this是调用方法的对象，里面的属性，要用options.xxx的方式调用