JQuery除了提供一个简单、有效的方式进行管理元素以及脚本，它还还提供了例外一种机制：即给核心模块增加自己的方法和额外的功能。通过这种机制，Jquery允许我们自己创建属于我们自己的插件，提高我们在开发过程中的效率。
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
第一个示例：
1.插件文件 MyFirstPlugin.js
注：用$.extend()把默认值和用户传进来的值是联合在一起，这样子的话，就把用户自定义的值覆盖了默认用户的值。如果用户没定义值，就用系统自定义的。
this.each(function () { 这个前面加了一个 return。这样就实现了我们的链式操作。
(function ($) {
$.fn.textHover = function (options) {
var defaultVal = {
Text: '鼠标悬浮事件',
ForeColor: 'red',
BackColor: '#B9FDD8'
};
//默认值
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 () {
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);2.前台HTML代码
<form id="form1" action="#">
<div id="div1" style="width: 400px; height: 150px; background-color: #B9FDD8;">
Hello world</div>
<br />
<div id="div2" class="textBar" style="width: 200px; height: 150px; background-color:#F0FBFF;float:left; border:1px solid gray;">
哈哈 我是第二个 DIV
</div>
<div id="div3" class="textBar" style="width: 200px; height: 150px; background-color:#EDEAFF;float:left; border:1px solid gray; margin-left:2px;">
哈哈 我是第三个 DIV
</div>
</form>3.JS代码
3.1导入jQuery库文件
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jQuery文件必须放在自定义插件的前面！防止自定义插件引用对象时报错。-->
<script src="MyScripts/MyFirstPlugin.js" type="text/javascript"></script>
3.2 JS代码
<script type="text/javascript">
$(function () {
$('#div1').textHover({
Text: '鼠标悬浮在第一个 DIV 上面。。。',
ForeColor: 'yellow',
BackColor: 'Red'
});
$('#div2').textHover({ Text: '我是第二个 DIV 。。。' });
$("#div3").textHover({ Text: '我是第三个 DIV 。。。' }).css("background-color", "#B1B0FE"); //初次加载的时候 给出改变其颜色
});
</script>
OK，到这里，一个简单的插件就完成了。