jQuery插件的编写方法-优快云博客

本文链接：https://blog.youkuaiyun.com/u011500781/article/details/49936207

本文通过一个具体的示例介绍了如何使用jQuery开发插件的方法。包括类级别和对象级别的插件开发方式，展示了如何定义全局函数、扩展静态方法及命名空间下的方法等技巧。

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

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Demo</title>
  <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  <style>
	*{margin:0;padding:0;}
	ul,li{list-style:none;}
	html,body{width:100%; height:100%;}
	div {width: 300px; height: 200px;}
	.d1 {background: red;}
	.d2 {background: blue; display: none;}
	.d3 {background: yellow; display: none;}
  </style>
 </head>
 <body>
	
	<div class="d1">1</div>
	<div class="d2">2</div>
	<div class="d3">3</div>

	<script>

		;(function($) {

			/*类级别开发插件*/
			//直接添加全局函数
			$.popup = function() {
				console.log(1);
			};

			//extend扩展静态方法
			$.extend({
				popup2 : function() {
					console.log(2);
				}
			});

			//命名空间下定义方法
			$.hwb = {
				popup3 : function() {
					console.log(3);
				}
			}
			/*对象级别开发插件*/
			//$.fn.setBgColor模版
			$.fn.setBgColor = function(options) {
				var defaults = {
					num : "a"
				};
				var options = $.extend(defaults, options);//不能加{}
				return this.each(function() {
					$(this).attr("index", defaults.num);
					console.log(defaults.num);
				});
			}
		})(jQuery);

		$(function() {
		
			$.popup();//1

			$.popup2();//2

			$.hwb.popup3();//3

			//$.fn.setBgColor();
			$("div").setBgColor({
				num : "b"
			}).css("background", "black");//b b b
		
		
		})
		


	</script>
 </body>
</html>