本节书摘来自异步社区《javascript高效图形编程（修订版）》一书中的第2章，第2.2节，作者：【美】raffaele cecco著，更多章节内容可以访问云栖社区“异步社区”公众号查看
将bouncysprite转为一个jquery插件，可以利用jquery通过css选择器搜索并返回dom 元素列表的能力。这个插件可以搜索任何元素并用 bouncyboss 给它附上多个bouncysprite实例，并可以改变附加的实例个数和背景颜色。
将bouncysprite转为一个灵活的jquery插件，实际没有想象得那么难。因为dhtmlsprite、bouncysprite和bouncyboss对象是以模块化方式开发的，可以很顺利地转为jquery插件结构。
下面这个单独的分号看起来奇怪，但它可以避免前面的代码遗漏分号可能导致的问题。通常这不会是个问题，因为javascript通过换行符将插件代码识别为新语句。不过，如果代码和插件是压缩的，空格和换行符也许会被删除。而插件也许会因为它和前面代码之间缺乏换行符而失效。
下面我们定义一个匿名函数。这将所有插件代码包成一个自给自足的语境。$是传入的参数，这里指的是全局jquery对象本身（见插件最后一行）。现在，在插件中我们可以使用$()代替jquery()来调用jquery。传jquery对象似乎没必要，因为它已经在全局定义了。不过，它可以避免由于外部代码（比如其他javascript库）重新定义$变量而导致插件不能使用$()调用jquery。
为增强jquery的能力，我们将对插件的引用保存在jquery的fn属性中。如果另一个插件定义了同样的名字，可能会出现冲突。为避免这种情况，你应该起个有想象力的名字。比如，“zoom”很可能冲突，而“cloudzoom”则不太会冲突。
此处我们插入dhtmlsprite、bouncysprite和bouncyboss的代码，插入时没必要做任何修改。因为它们以局部变量保存，所以是对插件私有的。
这个插件使用option对象的属性作为选项。用这种方式给插件传入选项比较灵活，因为它可以传入所有参数、一些参数或者空参数。jquery的extend函数融合了option属性和$.fn.bouncyplugin.defaults对象定义的默认option属性。option属性具有优先权，它们不存在时才使用默认属性。因为默认选项是公共的，一个应用可以通过在$.fn.bouncyplugin.defaults中创建新的defaults对象来改变默认选项。
这个插件在找到的dom元素列表上进行迭代，对每个元素执行一个匿名函数。在这个函数里，this指的是dom元素列表中的当前元素。函数从this中创建一个jquery对象，并存在$drawtarget中。option中定义的背景颜色被应用到$drawtarget中，option中指定的numbouncy则传入一个新的bouncyboss实例。
下面是一个包含此插件的html页面。显示结果如图2-4所示。
在此处插入插件：
当页面准备好后，在指定元素上调用此插件，此例指的是任何有draw-target css类的元素。
接着，我们定义4个draw-target类的div元素：
关于jquery的更多细节，请阅读jquery社区专家撰写的jquery cookbook。