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插件开发分为类级别开发和对象级别开发 jquery插件开发分为类级别开发和对象级别开发 类级别($.extend) jQuery.extend(object)...

JQuery插件编写方法

一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法。 $.fn.extend(object)...

jquery插件编写方法

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

jquery插件 ajaxfileuploa异步上传文件和 ajax 批量请求的处理方法

因工作需求,碰到这些问题,下面把这些问题及解决方法分享大家  众所周知jquery 的ajax 是相当的简单及实用且兼容各类浏览器,但殊不知其原生不支持 ajax 文件上传,于网上百度查找插...

自己开发jquery插件的方法

jquery插件开发模式 jquery插件一般有三种开发方式: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQu...

开发jQuery插件的方法

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象...

关于jquery插件placeholder 1.3在chrome和safari下点击后不消失的解决方法

最近公司网站改版的过程中,搜索框有一些提示信息比如“关键字”之类,不写吧用户可能不知道这个搜索框是用来做什么的,写了吧点击搜索之后默认就把这些提示信息提交给数据处理页面处理去了,有点麻烦,而且也没有必...

关于jQuery插件的index选择器index()方法的一些操作细节

jQuery插件index选择器index()方法的一些操作细节 jQuery index() jQuery index()获取顺序值...
  • gdqy_w
  • gdqy_w
  • 2017年03月23日 17:21
  • 149

自定义insertContent方法的JQuery插件实现在文本框光标位置插入内容并选中

在文本框光标位置插入内容在实际的项目应用中经常用到,比如在文本框插入表情,首先要获取光标在文本框中的位置,当然这个有浏览器兼容性问题。 IE下可以通过document.selection.cre...

已正确配置Jquery插件,却提示方法找不到的原因分析(Juery.cookie)

1----问题描述           在我们的网站上,出现这样一个奇怪的问题,我们做了一个弹出层注册页面(专题号:qqcf),注册提示成功,但是在页首的登录框中输入,先后出现三个重大问题:   ...
  • altand
  • altand
  • 2012年07月27日 10:29
  • 2432
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件的编写方法
举报原因:
原因补充:

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