2.2 一个简单的插件示例
jQuery 插件能做任何事情，这个已经由浩如烟海的各类第三方插件如证明。小到只影响一个元素，大到改变多个元素的外观和行为，jQuery
的各种功能等你来扩展。
2.2.1 占位文本插件
为了维持一个form
的空间，很多时候一个字段的描述往往是省略的，取而代之的是用一个占位文本。如果这个字段是空的，占位文本将会重新显示。为了更好的用户体验，这个占位文本往往是灰色的，用来区别真正的内容。这个功能有个比较通用的名字叫做水印(watermark)。
占位的文本可以在插件初始化的时候赋值，但是最好允许多个文本框同时赋值。因此input 的title
属性是一个理想的占位文本取值的所在。当该字段获得焦点的时候，你需要移除占位文本并且移除灰色的样式。相应的，当该字段失去焦点的时候，如果值仍然是空白，就需要恢复原来的文字和样式。为了有更好的扩展性，字段的样式需要由css去指定，能够被插件的使用者轻松的重写样式。
2.2.2 Watermark 插件代码
由于这个插件的作用对象是页面上的元素，则是一个集合插件。因此需要扩展$.fn
$.fn.watermark = function (options) {
//set options
optoins = $.extend({ watermarkClass: ‘watermark‘ }, options || {});
//when field is focused
return this.focus(function () {
var field = $(this);
if (field.val() == field.attr(‘title‘)) {
field.val(‘‘);
removeClass(options.watermarkClass);
}
}).blur(function () {
var field = $(this);
if (field.val() == ‘‘) {
field.val(field.attr(‘title‘)).addClass(options.watermarkClass);
}
}).blur();
};
该插件扩展$.fn，声明了$.fn.watermark 使得该插件和jQuery 选择器无缝集成。定义了options
参数的默认值，watermarkClass 和值watermark. 通过extend
方法，允许被重写该属性。||{} 用来确保当options
没有被提供的时候使用默认值。为了允许该插件和其他插件的链式调用，一个关键的jQuery 理念就是function 必须返回当前的集合。由于默认内置的jQuery
方法已经实现了该功能，只需要直接返回内置的方法返回值即可。.blur 就是链式调用的例子。最后触发blur
给字段赋初始值。
这个简单的集合插件给了你一个第一印象。接下去的文章将会讲解一些jQuery 插件开发时候的最佳实践的理念。
2.3 小结
jQuery 开发者很有远见，提供了很多可供扩展的点。这章通过简单的例子让你初尝jQuery 开发的概念。
欲知详情，请继续收看下一波。。。
[译] EXTENDING JQUERY – 2.2 A simple plugin,布布扣,bubuko.com