jQuery插件的编写方法

<!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>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011500781/article/details/49936207
个人分类: jQuery插件
上一篇合并运动及透明度框架(含json)
下一篇sublime text 3左侧边栏背景色更改
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭