使用 jQuery（中级），第 2 部分: 创建自己的插件

核心提示： 创建插件框架的最后一步是正确处理传入方法的选定元素，回想一下上例您会发现，使用 jQuery（中级），第 2 部分: 创建自己的插件(7)，选定元素可以是单页面元素，或者是多页面元素，第 1 部分: 使用插件创建和扩展 jQuery 函数 使用 jQuery，第 3 部分: 用

创建插件框架的最后一步是正确处理传入方法的选定元素。回想一下上例您会发现，选定元素可以是单页面元素，或者是多页面元素。您必须等效地处理它们。同样，回想一下 jQuery 插件规则，"this" 对象只能引用 jQuery 对象。因此，您有一个对传入方法的 jQuery 选定元素的引用，现在需要迭代它们。同样，回顾规则让我们知道，每个插件方法都应该返回 jQuery 对象。当然，您知道 jQuery 对象就是 "this"，因此在方法中返回 this 完全没有问题。让我们看看如何在代码片段中实现迭代每个选定元素并返回 jQuery 对象。

清单 4. 处理 jQuery 对象

jQuery.fn.format　=　function(options)　{　
　
　　var　options　=　jQuery.extend(　{　
　
　　　format:　"#,###.00",　
　　　locale:　"us"　
　
　　},　options);　
　
//　this　code　snippet　will　loop　through　the　selected　elements　and　return　the　jQuery　object　
//　when　complete　
return　this.each(function(){　
　//　inside　each　iteration,　you　can　reference　the　current　element　by　using　the　standard　
　//　jQuery(this)　notation　
　//　the　rest　of　the　plug-in　code　goes　here　
　});

由于实际插件本身不是本文的重点，我不对此进行详细阐述，但是您可以在本文的插件代码附件中看到全部内容（请参见 下载）。如果您决定编写函数而不是方法，我还将向您展示一个样例，介绍如何设置插件架构。

清单 5. 使用函数的示例插件

jQuery.exampleFunction　=　function(options)　{　
　
　　var　options　=　jQuery.extend(　{　
　
　　　//　your　defaults　
　
　　},　options);　
　　　
　　jQuery(".exampleSelector").each(function(){　
　　　
　　});　
　
});

编缉推荐阅读以下文章

• 使用 jQuery（中级），第 1 部分: 使用插件创建和扩展 jQuery 函数
• 使用 jQuery，第 3 部分: 用 jQuery 和 Ajax 构建富 Internet 应用程序
• 使用 jQuery，第 2 部分: 构建未来的 Web 应用程序
• 使用 jQuery，第 1 部分: 将桌面应用程序引入浏览器