原文：http://www.webreference.com/programming/jquery/plugin/index.html作者：Rob Gravelle
版权声明：翻译作品，欢迎转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。
jQuery作为一个开源、跨浏览器的Javascript库，通过推进快速应用简化了Web页面事件处理、动画和Ajax的开发。jQuery还提供了一个优秀的插件架构，如果你能舒服的编写jQuery的代码，你可以轻松的开发和实现你自己的插件以扩展jQuery库。
这篇文章讨论了jQuery插件的原理，并解释了你如何也能开发一个属于你自己的插件，和在你自己的程序里使用它。你可以自由的下载最新的jQuery库，另外它已经被预装在Visual Studio 2010里了。
开始条件
要运行文章里的代码示例，你必须先安装Visual Studio 2010 RC或者更高的版本，或者必须安装Visual Studio 2008和Visual Studio 2008 SP1。在后面一种情况下，你必须手动安装jQuery库。
文章里的代码示例是用Visual Studio 2008编译的，你也可以在Visual Studio 2010 RC或者更高的版本中使用。
插件：扩展jQuery库
什么是jQuery插件，我们为什么要使用它？一个插件是一段jQuery的代码，你可以很容易的将它插入到现有的jQuery库里，提供扩展性。你可以使用jQuery的插件，以扩展jQuery库，并且提高代码重用性。本质上，你可以使用jQuery的插件扩展jQuery本身。
声明一个插件
在最简单的形势下，你可以使用jQuery里的fn功能声明一个jQuery的插件，如下例所示：
jQuery.fn.reverseString = function(params) { //Some Code };
实现一个插件需要两个步骤。首先，你需要写一个方法作为现有jQuery库的插件。下面是一个例子：
jQuery.logMessage = function(messageText) {
if(window.console)
{
console.debug(messageText);
}
else
{
alert(messageText);
}
};
然后，你可以在你的代码里使用这个插件。下面是示例：
try
{
// Some code
}
catch(exception)
{
$.logMessage(exception);
}
注意你需要像这样命名你的插件：
jQuery.[plugin name].js
作为一个示例，如果你插件功能的名称是logMessage，插件必须存储在一个名为jQuery.logMessage.js的文件里。
实现一个jQuery的简单插件
在这一节，你将实现一个jQuery的简单插件。这个插件可以翻转字符串。注意这个插件只是一个简单的函数，需要存储在和插件名相同的文件里，同时在需要使用到的Web页面里引用。这段字符串翻转的代码是如此简单：
for (var ctr = originalText.length - 1; ctr >= 0; reversedText += originalText.substr(ctr, 1), ctr--);
注意originalText是包含需要被翻转字符串或文本的变量。翻转后的文本存储在变量reversedText里。为了翻转字符串，你必须从文本的结尾开始使用substr()函数每次检索一个字符（上面所示的代码片段）。
下面是jQuery字符串翻转插件的全部代码。
(function($) {
$.fn.StringReverse = function() {
this.each(function() {
var $textObj = $(this);
var originalText = $textObj.text(), reversedText = '';
for (var ctr = originalText.length - 1; ctr >= 0; reversedText += originalText.substr(ctr, 1), ctr--);
$textObj.text(reversedText);
});
return this;
};
})(jQuery);
上面的插件需要被放置在一个名为jquery.StringReverse.js的文件中。要使用这个插件，你必须在你的代码里引用这个插件。你可以简单的将这个js插件文件拖放到需要引用的地方来做到这一点。当完成这件事后，你可以创建如下的应用：
<script src="jquery.StringReverse.js" type="text/javascript"></script>
You can call the plugin using the following code:
<script language="javascript" type="text/javascript">
window.onload = ReverseString;
function ReverseString() {
$("p").StringReverse();
}
</script>
像你看到的一样，StringReverse插件被onload事件调用。你可以调用这个插件来饭庄一段话里面的文字，这段文字可以像如下所示：
<p>This is a sample text to illustrate text reversal using jQuery Plugins.</p>
下列清单展示了完整的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryPlugin._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.StringReverse.js" type="text/javascript"></script>
<title>Using jQuery Plugins</title>
<script language="javascript" type="text/javascript">
window.onload = ReverseString;
function ReverseString() {
$("p").StringReverse();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>This is a sample text to illustrate text reversal using jQuery Plugins.</p>
</div>
</form>
</body>
</html>
为了执行这段程序，你需要将这个Web页面（例子中的Default.aspx页面）设定为启动页面然后按F5键。执行后，你会发现段落中的文字被翻转了。下面是预期的输出：
注意这段文字是如何被翻转的。
摘要
jQuery是一个简单、快速和轻量级的Javascript库，已经成为建立快速、敏捷的Web程序框架的选择之一。它快速的成为了所有Javascript库里最为流行的一个，现在你已经知道了如何编写和实现jQuery的插件。
代码下载
http://www.webreference.com/programming/jquery/plugin/jQueryPlugin.zip
分享到：
相关推荐
jQuery.extend 函数详解 Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解。
PS图片出血扩展插件-Image Extend-1.0.0中文汉化版
原生js实现jquery $.extend方法 通过遍历对象属性来实现
jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建... jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象. 例如: 代码如下: var a = { name : “blue”, pass : 12
Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，dest是要整合的空间可以使{} 或者不写 src是一个JSON表达式表示的javascript对象…. 因此里面可以添加方法属性等等… 我么通过不同...
jquery 插件开发详解通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建
MagicGrid is a small and flexible JQuery grid plugin. Although it only provide basic grid function, good design model give it great flexibility. It is open source and totally free. Before your start, ...
用例的关系有泛化(generalization)、扩展(extend)和包含(include)。其中include和extend最易混淆。下面我们结合实例彻底理清三者的关系。基本概念用例图（UseCaseDiagram）:用例图显示谁是相关的用户，用户希望系统...
本文不聊怎么写jQuery插件，我们聊聊怎么去实现jQuery的插件扩展功能，extend是怎么实现把我们写的插件挂载到jQuery上的。（大牛可以出门右拐……） 我们可以模拟创建一个迷你jQuery。 var $ = {}; 好的，就这么...
jquery.validate.extend.js
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({ add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加...
jQuery：jQuery.extend函数详解
Animate content and build your own image slider with jQuery’s animation tools Extend the library by writing your own custom plug ins Avoid common beginner errors and learn how to use best practices...
jQuery为开发插件提拱了两个方法，分别是： 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象...
extend()是jQuery中一个重要的函数，作用是实现对对象的扩展, 它经常用于jQuery插件的开发，jQuery内部也使用它来扩展属性方法，如上篇文章中讲到的noConflict方法，就是用extend方法来扩展的。 在jQuery的API手册...
You will be able to extend jQuery's capabilities by writing your own plugins on top of the framework, animate elements, build your own jQuery elements, employ best practices, and avoid common errors....
jQuery为开发插件提拱了两个方法，分别是： JavaScript代码 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object)...
jQuery_extend 函数详解
用法二：$.fn.extend({}) 插件，对jQuery.prototype进行扩展，提到插件那么就得说一下另一种方法$.fn.method = function(){} 1. $.fn.method = function(){} 可以定义一个方法 2 . $.fn.extend({}) 定义多个...
在使用Jquery开发的过程中，extend是常用的参数处理函数，特别是对默认值的使用。 Jquery的扩展方法原型是: var v=$.extend(dest,src1,src2,[,src3...]); 作用是把src1,src2,src3合并到到dest中并返回合并后的dest....