jQuery是一个快速、小巧、功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery还提供了一种机制，允许为核心模块添加方法和额外的功能。通过这种机制，可以创建新的代码部分，并在不同的页面和项目中重用它。
要编写一个插件，需要在jQuery.fn对象中添加一个新的属性，属性的名称将是插件的名称。
(function($) {
$.fn.myPlugin = function() {
// 在这里编写插件代码
};
})(jQuery);
让开始为插件添加功能，并在网页中使用它。在第一个例子中，将简单地使元素淡出。
(function($) {
$.fn.myPlugin = function() {
this.fadeOut('normal');
};
})(jQuery);
现在，将文件保存为“jquery-myPlugin.js”，插件就可以使用了。在页面上创建一个HTML按钮和div。点击按钮时，div将淡出。
也可以编写一个对一组元素执行操作的插件。假设想要在鼠标悬停时改变元素的背景颜色。简单地获取每个元素并为该对象注册悬停事件。让开始编写悬停插件的代码。
(function($) {
$.fn.hoverElement = function() {
this.each(function() {
$(this).hover(
function() {
$(this).addClass('hoverTextSel');
},
function() {
$(this).removeClass('hoverTextSel');
}
);
});
};
})(jQuery);
$(selector).each()方法用于遍历一个jQuery对象、数组或任何集合。这个例子为jQuery对象的每个元素注册了悬停事件。
jQuery设计之美在于它保持了链式调用。可以在一系列操作中执行多个动作。因此，为了在插件中保持链式调用，必须确保插件返回'this'关键字。
(function($) {
$.fn.hoverElement = function() {
return this.each(function() {
$(this).hover(
function() {
$(this).addClass('hoverTextSel');
},
function() {
$(this).removeClass('hoverTextSel');
}
);
});
};
})(jQuery);
现在可以在一系列操作中执行多个动作。
$(".hoverText2").hoverElement().css({
'color': 'red'
});
如果想将插件商业化，那么它应该是可配置的。例如，应该提供更改图片、宽度、高度等的选项。所以用户可以根据需要更改外观和感觉。
为了解释这个概念，这个例子将允许用户在悬停时更改文本、前景色和背景。用户可以根据自己的需求自定义设置。现在插件方法将有一个参数，用户可以在调用方法时传递设置。
$.fn.YourPlugin = function(options) {...}
还需要有一个默认设置对象，它将包含默认值。
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
在那个时候，有两个不同的对象，一个是用户传递的，第二个是默认值。将使用jQuery提供的extend方法合并这两个对象。
var obj = $.extend(defaultVal, options);
extend()方法将两个或更多对象的内容合并到第一个对象中。合并两个对象后，将有一个最终的对象，它将用于设置。插件的完整代码如下：
(function($) {
$.fn.textHover = function(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();
var oldBgColor = selObject.css("background-color");
var oldColor = selObject.css("color");
selObject.hover(
function() {
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);
将创建一个插件，它非常接近Lightbox插件。Lightbox是一个非常著名的图片插件。基本上，当页面上显示图片时，为用户提供了一个非常方便的可能性。点击（小）缩略图将使图片越来越大，直到达到原始尺寸，并在找到较小图片的同一页面上以全尺寸显示！
获取所有的锚点(
$(document).ready(function() {
$("#myGallery a").imageGallery2();
});
插件获取集合，并为每个元素注册点击事件，点击事件后，它会在页面上添加一些元素。添加后，它设置图片源、动画，并在这些元素上注册事件。
在示例中，在显示图片之前预加载全尺寸图片。首先，创建一个图片对象并注册图片对象的onload方法。然后从点击的对象获取图片源，并分配图片源到图片对象。
// 预加载图片以显示
var objImagePreloader = new Image();
var url = objClick.getAttribute('href');
var imageCaption = objClick.getAttribute('title');
objImagePreloader.onload = function() {
$("#imageGallery2-image").attr('src', url);
// 执行图片容器调整大小的效果
resizeImageContainer(objImagePreloader.width, objImagePreloader.height);
// 清除onLoad，IE在处理动画GIF时行为异常
objImagePreloader.onload = function() { };
};
objImagePreloader.src = url;
function CloseSelectedImage() {
$("#imageGallery2-image-text-box").hide();
$("#imageGallery2-image-container").animate({ width: 0, height: 0 }, 300, function() {
$("#imageGallery2-overlay").remove();
$("#imageGallery2-wrapper").remove();
});
}