jQuery插件开发精品教程让你的jQuery升级更上一层楼

要说jQuery最成功的地方，我觉得是它的扩展性吸引了很多开发者为它开发插件，从而建立了一个生态系统。就像大公司竞争平台一样。平台赢家赢得世界。苹果、微软、谷歌等巨头都有自己的平台和生态圈。

学习如何使用jQuery并不难，因为它很容易学习，相信你在接触jQuery之后，一定已经使用或熟悉了它的很多插件。如果你想把自己的能力提升到一个更高的水平，编写自己的插件是一个不错的选择。

这个教程可能不是最好的，但一定是最详细的。

JQuery插件开发模式。

在软件开发过程中，我们需要一定的设计模式来指导开发。有了这个模式，我们可以更好地组织我们的代码，并从前人总结的这些模式中学习到很多好的实践。

根据《jQuery高级编程》的描述，开发jQuery插件主要有三种方式：

1.通过$扩展jQuery。扩展()。2.通过$.fn. 3向jquery添加一个新方法。通过$创建jQuery UI。小部件()。

通常，我们使用第二种方法来开发简单的插件，这是相对于第三种方法而言的。第三种方法用于开发更高级的jQuery组件。在这种模式下开发的组件有很多jQuery的内置特性，比如插件状态信息的自动保存，关于插件的各种常用方法等。它们非常亲密，在此不再赘述。

第一种方法太简单了，只是在jQuery命名空间或jQuery中添加一个静态方法。因此，当我们调用通过$添加的函数时。extend()，我们直接调用($。myfunction())通过$符号，而不选择DOM元素($('#example ')。myfunction())。请看下面的例子。

$.扩展({sayHello:函数(名称){console.log('Hello，'(名称？名称：‘Dude’)’！”);}})$.sayHello()；//调用$。说你好(“瓦友”)；//参数调用的运行结果：

在上面的代码中，通过$向jQuery添加了一个sayHello函数。extend()，然后直接通过$调用。现在您可以认为我们已经完成了一个简单的jQuery插件。

但是可以看到，这样定义一些辅助方法是很方便的。例如，自定义控制台以特定格式输出信息，一旦定义，就可以通过jQuery在程序中的任何地方调用。

$.extend({log:函数(消息){var now=new Date()，y=now.getFullYear()，m=now.getMonth() 1，//！JavaScript中每月的分钟数是d=now.getdate()，h=now.gethours()，min=now.getminutes()，s=now.getseconds()，time=y '/m '/d ' h ' : ' min ' 3330。console.log(time ' My App: '消息)；}})$.日志('正在初始化.');//通话

但是，这个方法不能利用jQuery强大的选择器带来的便利。为了更好地处理DOM元素和将插件应用于所选元素，我们仍然需要使用第二种开发方法。您看到或使用的大多数插件都是这样开发的。

插件开发

让我们看看jQuery插件开发的第二种方式。

基本方法

让我们看看它的基本格式：

$ . fn . plugin name=function(){//你的代码到这里了}基本上是给$。fn，它的名字是我们插件的名字。然后在这个方法中扩展我们的插件代码。

例如，如果我们将页面上的所有链接都变成红色，我们可以这样编写这个插件：

$.fn.myPlugin=function() {//在这种情况下，这是指jQuery//示例：选择的元素$('a ')，那么这=$ ('a') this.css ('color '，' red ')；}在插件名称定义的函数内，这是指我们调用插件时jQuery选择器选择的元素，一般是jQuery类型的集合。例如，$('a ')返回页面上所有A标签的集合，这个集合已经是jQuery包装器类型了，也就是说操作时可以直接调用jQuery的其他方法，不用用美元符号包装。

所以在上面的插件代码中，我们在th。