jQuery插件的编写方法

原创 2015年11月19日 23:24:13
<!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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

自己动手丰衣足食之征服jQuery插件编写

要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统。这好比大公司们争相做平台一样,得平台者得天下。苹果,微软,谷歌等巨头,都有各自的平台及生态圈...
  • cometwo
  • cometwo
  • 2016年04月01日 09:19
  • 1977

jQuery插件编写

jQuery插件编写的一些总结
  • liujie19901217
  • liujie19901217
  • 2016年07月15日 17:29
  • 4691

怎么写一个jquery插件

创建插件 看来 jQuery 你已经用得很爽了,想学习如何自己编写插件。非常好,这篇文档正适合你。用插件和方法来扩展 jQuery 非常强大,把最聪明的功能封装到插件中可以为你及团队节省大量开发...
  • caiwanxia1
  • caiwanxia1
  • 2016年11月08日 10:10
  • 2414

jquery插件编写方法

使用闭包。 面向对象编程 /** * jQuery AIUESuite V0.1 * * author: lixiaopeng * * mail:lixp3@asiainfo-link...
  • lxp1021
  • lxp1021
  • 2012年03月21日 17:12
  • 1035

JQuery插件编写方法

一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法。 $.fn.extend(object)...
  • u012150261
  • u012150261
  • 2016年06月03日 15:36
  • 130

最简单的jquery插件开发示例

页面三个DIV,一个按钮。 点击按钮后,三个DIV的高度调整为相同。 div { width: 40px; float: left; ...
  • dongflying
  • dongflying
  • 2016年12月27日 15:23
  • 405

简单的Jquery 插件编写

jQuery如此流行,各式各样的jQuery插件也是满天飞。你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! ...
  • xingxing513234072
  • xingxing513234072
  • 2012年07月09日 18:28
  • 1857

使用两种方式自定义jQuery插件

自定义jquery插件可以在函数级别定义也可在对象级别定义,而每种级别的插件都可以传参和不传参。 1.添加jQuery对象级的插件,是给jQuery类添加方法 写法: [javascript] vie...
  • xygg0801
  • xygg0801
  • 2016年12月06日 09:30
  • 1815

举例说明jquery插件的编写方法

摘要: jquery插件开发分为类级别开发和对象级别开发 jquery插件开发分为类级别开发和对象级别开发 类级别($.extend) jQuery.extend(object)...
  • yunqishequ1
  • yunqishequ1
  • 2017年06月16日 13:19
  • 321

编写模块化的jquery插件

这篇博客是解决了jquery加载jquery.cookie插件,jquery加载失败的问题。 这两天看了点儿requirejs,于是开始尝试编写模块化的Javascript代码,于是,特别想应用到项...
  • Brave_Coder
  • Brave_Coder
  • 2017年03月26日 15:30
  • 499
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件的编写方法
举报原因:
原因补充:

(最多只允许输入30个字)