原文：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插件，理解jQuery扩展的核心原理。 首先，我们要明白jQuery插件的本质是一个包装在jQuery对象上的函数。在jQuery中，我们经常看到这样的匿名函数结构： ```javascript ...
`jQuery.extend`是jQuery提供的一个用于扩展jQuery核心功能或自定义jQuery插件的方法。通过这个方法，开发者可以在不修改原始jQuery源码的情况下，向jQuery添加新的功能。 #### 二、基本用法与原理 **1. 基本用法*...
"PS图片出血扩展插件-Image Extend-1.0.0中文汉化版.zip"是专为PS设计的一款插件，用于帮助用户轻松实现图片的出血效果处理。出血在印刷术语中是指图像或设计元素超出最终裁切边缘的部分，以避免在裁切后出现白色...
2. `jQuery.fn.extend`用于向jQuery对象添加新的方法，增强了jQuery的功能性，使我们可以自定义jQuery插件。 理解这两个方法的差异对于深入掌握jQuery并创建高效、可维护的代码至关重要。在实际开发中，合理使用...
这个功能在开发过程中非常实用，尤其是在处理配置选项、扩展插件功能或者进行对象拷贝时。本篇文章将深入探讨jQuery.extend的工作原理、用法以及相关的编程实践。 **1. 基本用法** jQuery.extend方法的基本语法...
为了实现这些功能，插件可能使用了jQuery的核心API，如`$(selector).on()`来绑定事件，`$.fn.extend()`来扩展jQuery对象，以及`$.ajax()`进行异步图片加载。此外，还可能用到了CSS3的过渡和变换属性来实现平滑的动画...
3. **初始化插件**：使用jQuery选择器找到分享按钮，并调用`$.fn.extend`中的方法来初始化插件。例如，`$('.share-button').share(options);`，`options`是可选的配置参数，可以定制分享的平台、标题、描述等信息。 ...
这篇文档，"使用jQuery（中级）第1部分：使用插件创建和扩展jQuery函数"，深入探讨了jQuery插件的开发和应用，揭示了jQuery如何通过插件机制让Web应用的功能无限扩展。 jQuery插件的出现，源于库本身的设计理念，即...
### jQuery.extend函数详解 #### 一、概述 `jQuery.extend`是jQuery库中一个非常实用且功能强大的函数，主要...通过理解和掌握其不同的使用方式，开发人员能够更加灵活地使用jQuery，提高代码的可维护性和扩展性。
标题为《一步一步教你写一个jQuery的插件教程(Plugin)》，这篇教程旨在带领读者了解如何创建一个jQuery插件，具体例子是一个能够高亮显示文本的简单插件。在开始之前，有必要明确几个开发插件时需要注意的要点。首先...
1. **封装**：使用`jQuery.fn.extend`或`$.extend`方法定义插件。 2. **初始化**：在插件函数内部，进行初始化操作，如设置默认值、检查参数等。 3. **执行逻辑**：编写实现插件功能的代码。 4. **暴露公共方法**：...
3. **扩展jQuery对象**：使用`$.fn.extend`方法将插件函数添加到jQuery原型链上，这样我们就可以像使用jQuery内置方法一样调用自定义插件。 4. **设置默认选项**：定义一个对象来存储插件的默认配置，这样用户可以...
你可以创建一个独立的JS文件，比如`myPaginationExtension.js`，然后在这个文件中定义新的方法和属性，通过jQuery的`$.extend()`方法将这些扩展内容合并到EasyUI的分页配置中。 在描述中提到的"重写的分页属性"可能...
原生js实现jquery $.extend方法 通过遍历对象属性来实现
通过学习和使用JQuery插件，开发者可以快速实现各种动态效果，同时还能复用代码，减少工作量。这个提供的插件源码可能包含了一些高级的动画效果或者独特的交互设计，对于学习和提升JQuery技能非常有帮助。
2. **jQuery插件编写**：jQuery插件通常以函数形式存在，可以通过$.fn扩展jQuery对象。一个简单的进度条插件可能会包含初始化、开始、更新和结束等方法。以下是一个基本示例： ```javascript (function($) { $.fn....
### jQuery插件精髓：深入理解`jQuery.extend` 在前端开发领域，jQuery因其强大的功能和简洁的语法而备受青睐。作为一款流行的JavaScript库，jQuery提供了众多便捷的方法和功能，其中`jQuery.extend`方法更是核心之...
在本篇文章中，我们将详细解析如何通过$.extend()方法扩展jQuery、如何通过$.fn向jQuery添加新的方法以及如何使用$.widget()方法应用jQuery UI的部件工厂方式创建插件。 首先，我们来看如何通过$.extend()方法扩展...
jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建... jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象. 例如: 代码如下: var a = { name : “blue”, pass : 12
jQuery插件是jQuery库的扩展，它为开发者提供了丰富的功能，使得JavaScript编程更为简便和高效。jQuery本身提供了基础的DOM操作、事件处理、动画效果以及Ajax交互等核心功能，但为了满足更复杂的需求，开发者们创建...