在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 
如果对E文好的同学 ,可以看上面的连接。
现在我把上面网站的及结合自己的想法写这篇文章。希望能得到大牛们的支持和谅解。。。大鸟飞过。。。欢迎拍装。
来源:

【1】How to write plugin in Jquery.

【2】锋利的JQuery 书

【3】RascallySnakeJQuery.extend()详解
一.介绍 
插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护。 
JQuery除了提供一个简单、有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能。通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率。

1.1JQuery的插件分为3中类型: 
(1)封装对象方法的插件(也就是对象级别的开发) 
这种类型的插件是我们今天需要讲的插件。 
(2)封装全局函数的插件(类级别开发) 
指可以把独立的函数添加到JQuery命名空间之下。 
添加一个全局函数,我们只需如下定义: 
jQuery.foo = function() { 
alert('This is a test. This is only a test.'); 
}; 
当然 你也可以添加多个全局函数:

.代码如下:
jQuery.foo = function() { 
alert('This is a test. This is only a test.'); 
}; 
jQuery.bar = function(param) { 
alert('This function takes a parameter, which is "' + param + '".'); 
}; 

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar'); 
(3)选择器插件 
1.2编写JQuery插件需要注意的地方: 
(1)插件的推荐命名方法为:jquery.[插件名].js 
(2)所有的对象方法都应当附加到JQuery.fn对象上面,而所有的全局函数都应当附加到JQuery对象本身上。 
(3)在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。 
(4)可以通过this.each 来遍历所有的元素 
(5)所有方法或函数插件,都应当以分号结尾,否则压缩的时候可能会出现问题。为了更加保险写,可以在插件头部添加一个分号(;),以免他们的不规范代码给插件带来 影响。 
(6)插件应该返回一个JQuery对象,以便保证插件的可链式操作。 
(7)避免在插件内部使用$作为JQuery对象的别名,而应当使用完整的JQuery来表示。这样可以避免冲突。 
1.3JQuery插件的机制 
JQuery提供了2个用于扩展JQuery功能的方法。即: 
①jQuery.fn.extend() 
②jQuery.extend() 
第一个就是我们前面说插件类型的第一个中情况,第二个就是指后面的2种情况。 
jQuery.extend()在插件中友一个很重要的功能是扩展已经有的object的对象。 
比如: 
var newSrc=$.extend(dest,src1,src2,src3...) 
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并。 
示例: 
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 
得到的结果是: 
result={name:"Jerry",age:21,sex:"Boy"} 
详细的 可以查看:jQuery.extend 函数详解 里面对这个方法有很好的讲解。

官网:JQuery.extend()与JQuery.fn.extend()
使用命名空间 
虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。

.代码如下:
jQuery.myPlugin = { 
foo:function() { 
alert('This is a test. This is only a test.'); 
}, 
bar:function(param) { 
alert('This function takes a parameter, which is "' + param + '".'); 

}; 

采用命名空间的函数仍然是全局函数,调用时采用的方法:

.代码如下:
$.myPlugin.foo(); 
$.myPlugin.bar('baz'); 

二.第一个Jquery插件 
如果需要写一个JQuery插件,你需要在$.fn对象后面增加一个属性名,这个属性名 其实 就是你的插件名。它的一般框架如下:

.代码如下:
(function( $ ) { 
$.fn.myPlugin = function() { 
// 这里开始写功能需求 
}; 
})( jQuery ); 

现在我们需要写的插件的功能很简单,就是把一个对象给慢慢的隐藏起来。就是使用fadeOut()这个方法。 
OK,我们打开 VS 2012.新建一个jscript文件,并且命名为:MyPlugin.js,并在里面添加如下代码:

.代码如下:
(function ($) { 
$.fn.myPlugin = function () { 
this.fadeOut('normal'); 
}; 
})(jQuery); 

怎么用呢?很简单。 
新建一个html页面,把jquery文件以及刚刚我们MyPlugin.js文件导入到本次页面中。如下:

.代码如下:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="MyPlugin.js" type="text/javascript"></script> 
js代码: 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#btn1").click(function () { 
$("#div1").myPlugin(); 
}); 
}); 
</script> 

HTML代码:

.代码如下:
<div id="div1" style="width: 400px; height: 30px; "> 
My God</div> 
<input id="btn1" type="button" value="button" onclick="MyClick()" /> 

好的,你现在点击网页上面的按钮的时候,div就会缓缓的隐藏。。。因为我们设定的是normal嘛,里面也可以设定一些值之类的。 
很兴奋的是,既然这个有智能提示,如下图:

吧! 
三.插件运用在多个元素控件中。 
3.1 运用在多个元素控件中 
在上面编写JQuery插件需要注意的地方的第四点,写道 如果要遍历 则可以用this.each方法。$("ID").each 可以遍历jquery对象、数组以及集合。 
OK。知道了这样子,那么我们的新的代码如下:

.代码如下:
(function ($) { 
$.fn.hoverElement = function () { 
this.each(function () { 
$(this).hover( 
function () { 
$(this).addClass("Add"); 
}, 
function () { 
$(this).removeClass("Remove"); 

); 
}) 

})(jQuery); 

上面主要用到.each()方法进行遍历。代码很简单,就是把当前的对象的背景色css样式在“Add”和“Remove”直接切换。

HTML的代码是:

.代码如下:
<div class="hoverText"> 
First Button.. 
</div> 
<div class="hoverText"> 
Second Button.. 
</div> 
<div class="hoverText"> 
Third Button.. 
</div> 

JS 代码:

.代码如下:
<script type="text/javascript"> 
$(document).ready(function () { 
$(".hoverText").hoverElement(); 
}); 
</script> 

很简单,不解释。 
3.2 链式操作 
链式操作?都听过吧。。。比如下面这一句话: 
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000); 
就是能在当前的元素后面通过“.” 来实施更多的操作。这个动作特别的潇洒。 
那我们要怎么才能实现这种效果呢?很简单,我能只需要把对象回去就可以了。请注意上面的第六点:插件应该返回一个JQuery对象,以便保证插件的可链式操作。 
我们依旧看刚刚的例子:

.代码如下:
(function ($) { 
$.fn.hoverElement = function () { 
return this.each(function () { 
$(this).hover( 
function () { 
$(this).addClass("Add"); 
}, 
function () { 
$(this).removeClass("Remove"); 

); 
}) 

})(jQuery); 

代码都一样,唯一区别的是:this.each(function () { 这个前面加了一个 return。这样就实现了我们的链式操作。 
然后 你这样:

.代码如下:
$(document).ready(function () { 
$(".hoverText").hoverElement().css("color","yellow"); 
}); 

能看到 文字已经变成了yellow色的了。

四 自定义自己的插件 
对于一个商业插件来说,自定义插件的样式是必不可少的。我们可以通过我们自己输入不同的样式,来改变开发者的默认样式。比如说最常见的 width、height、url、color等等。要是没有这些自定义的东西,那开发者开发的插件的利用价值就大大的减小了。 
OK,下面的这个实例的意思是 当我们hover一个对象的时候,它能改变它的text、background、foreground三个属性,也就是文本、背景色、前景色。用户可以设定他自己想设定的值,而不是固定死的。当然,如果用户没有设置,我们会给他一个默认值。 
定义这类插件的开发框架是: 
$.fn.YouPlugin = function (options) {...} 
为了防止一些偷懒的人,我们需要设置一些默认值,当它没有设置的时候,我们就用这些默认值。 
var defaultVal = { 
Text: 'Your mouse is over', 
ForeColor: 'red', 
BackColor: 'gray' 
}; 
那默认值和用户传进来的值是怎么联合在一起的呢?这个就需要我们在开篇的时候讲到的$.extend()知识了。 
var obj = $.extend(defaultVal, options); 
这样子的话,就把用户自定义的值覆盖了默认用户的值。如果用户没定义值,就用系统自定义的。 
代码如下:

.代码如下:
(function ($) { 
$.fn.textHover = function (options) {//options 经常用这个表示有许多个参数。 
var defaultVal = { 
Text: 'Your mouse is over', 
ForeColor: 'red', 
BackColor: 'gray' 
}; 
      //默认值 
var obj = $.extend(defaultVal, options); 
return this.each(function () { 
var selObject = $(this);//获取当前对象 
var oldText = selObject.text();//获取当前对象的text值 
var oldBgColor = selObject.css("background-color");//获取当前对象的背景色 
var oldColor = selObject.css("color");//获取当前对象的字体的颜色 
selObject.hover(function () {//定义一个hover方法。 
selObject.text(obj.Text);//进行赋值 
selObject.css("background-color", obj.BackColor);//进行赋值 
selObject.css("color", obj.ForeColor);//进行赋值 
}, 
function () { 
selObject.text(oldText); 
selObject.css("background-color", oldBgColor); 
selObject.css("color", oldColor); 

); 
}); 

})(jQuery); 

代码也很简单,上面都有些了解释,此刻不在罗嗦。 
怎么用呢?很简单。 
HTML code:

.代码如下:
<div id="div1" class="textBar"> 
Mouse over here..... 
</div> 
<div id="div2" class="textBar"> 
Mouse over here..... 
</div> 

JS Code:

.代码如下:
$(document).ready(function () { 
$('#div1').textHover({ 
Text: 'I am going to over..', 
ForeColor: 'yellow', 
BackColor: 'Red' 
}); 
$('#div2').textHover({ Text: 'I am second div...' }); 
}); 

就能看到效果了。 
希望对你们有帮助。 
OK,到现在为止,应该一个插件开发的基本要素就这些了。本来后面还有一个比较复杂的代码,一起发的,等下一节吧! 
源码下载

转之 http://www.poluoluo.com/jzxy/201204/163035.html

(转)跟我一起学JQuery插件开发教程的更多相关文章

  1. 跟我一起学JQuery插件开发教程

    在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 如果对E文好的同学 ,可以看上面的连接.现在我把上面网站的及结合自己的想法写这篇文 ...

  2. jQuery插件开发教程

    jQuery插件开发教程  ——让你的jQuery水平提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台 ...

  3. 从零开始学jQuery插件开发

    http://www.w3cfuns.com/notes/19462/ec18ab496b4c992c437977575b12736c.html jQuery 最成功的地方,是它的可扩展性,通过吸引了 ...

  4. 跟我一起学JQuery插件开发

    http://www.cnblogs.com/Leo_wl/archive/2012/04/06/2435511.html 以前一直比较好奇,jquery插件是怎么开发的,怎么写属于自己的插件? 昨天 ...

  5. 网上整理的jQuery插件开发教程

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

  6. jQuery插件开发精品教程,让你的jQuery提升一个台阶

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

  7. Jquery插件开发精品教程

    最开始接触jquery对他提供的各种插件总是十分有兴趣,但是总是不理解为什么这样写,从网络上查询了很久终于找到这篇文章,讲解的很详细,分享给大家. 要说jQuery 最成功的地方,我认为是它的可扩展性 ...

  8. 转:jQuery插件开发精品教程,让你的jQuery提升一个台阶

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

  9. jQuery插件开发详细教程

    这篇文章主要介绍了jQuery插件开发详细教程,将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间. ...

随机推荐

  1. 武汉科技大学ACM:1001: 猴子选大王

    Problem Description n只猴子要选大王,选举方法如下:所有猴子按 1,2 ……… n 编号并按照顺序围成一圈,从第 k 个猴子起,由1开始报数,报到m时,该猴子就跳出圈外,下一只猴子 ...

  2. 实现DIV拖动

    Ajax的到来让B/S中的客户端中开发有火了一把,网上出现了很多优秀的开源框架和UI,比较著名了有prototype,YUI,GWT等,但很多时候发现这些东西很难用到你的系统之中,有时候你的系统仅仅需 ...

  3. 《Javascript模式》之对象创建模式读书笔记

    引言: 在javascript中创建对象是很容易的,可以使用对象字面量或者构造函数或者object.creat.在接下来的介绍中,我们将越过这些方法去寻求一些其他的对象创建模式. 我们知道js是一种简 ...

  4. JQUERY1.9学习笔记 之基本过滤器(二) 等于选择器

    等于选择器 :eq() 描述:选择与设定下标匹配的元素.jQuery( ":eq(index)" )jQuery( ":eq(-index)" ) <!D ...

  5. 怎么看时序图--nand flash的读操作详解(转载)

    出处:http://blog.chinaunix.net/uid-28852942-id-3992727.html这篇文章不是介绍 nand flash的物理结构和关于nand flash的一些基本知 ...

  6. .NET MVC 插件化框架源码

    本来想把源码整理了放github上,但最近一直忙,就直接在这里放出来了,还写得不太完整,里面有几个例子,插件上传也没写,只写了插件zip包解压,如果大家在使用中有什么疑问,可以加QQ群:1429391 ...

  7. 关于Android WebView内容不同屏幕兼容处理

    最近团队里项目开发APP时,其中有个界面要用到WebView来显示,而不用原生的控件. 开发这个界面的时候遇到一个问题,就是Android的碎片化导致有众多屏幕分辨率,不同分辨率的屏幕对这个界面Web ...

  8. INNO setup 制作安装包

    1.获取SQLserver安装路径vardbpath:string;rtn:boolean;rtn := RegQueryStringValue(HKEY_LOCAL_MACHINE, 'SOFTWA ...

  9. Linux下根据进程的名字杀死进程

    以前是写了一个bash,通过ps,grep 和awk配合搜索PID再kill掉进程.果然以前傻,不知道解决问题之前先google,原来直接就有相关的pkill -f "process_nam ...

  10. 【转】Java 多线程(四) 多线程访问成员变量与局部变量

    原文网址:http://www.cnblogs.com/mengdd/archive/2013/02/16/2913659.html 先看一个程序例子: public class HelloThrea ...