jQuery:如何创建一个最基本的插件（How to Create a Basic Plugin）

Bertha 。 2022-08-23 11:55 120阅读 0赞

PS：红色的部分为我自己添加的扩展

大神请绕路！

这是首篇翻译，英语太水，希望大家见谅！翻译不好的请多多指教，希望口下留情！！！

最近想写一个jQuery插件，于是找到了这篇文章，翻译的目的：一是想学习如何写插件，二是想练习练习英语，提升一下英语水平。希望需要的朋友可以看看。

原文地址：  [http://learn.jquery.com/plugins/basic-plugin-creation/][http_learn.jquery.com_plugins_basic-plugin-creation]

如何向jQuery那样去实现一些效果，或是想拥有自己的方法去实现一系列的操作。或许你可以写一个非常有用的通用方法，并且可以再其他的工程中去使用。接下来，将会带你去实现怎样写一个插件。

jQuery是如何去实现的：JQuery的对象方法和工具类方法（ How jQuery Works 101: jQuery Object Methods and Utility Methods）

在写我们自己的插件之前，我们先了解一下jQuery是如何去实现的。先看看下面这个例子：

<table style="font-size:15px; border-collapse:collapse; margin-top:10px; margin-bottom:10px; color:rgb(51,51,51); width:875px; font-family:source-code-pro,Consolas,monospace!important; background-color:inherit"> 
 <tbody style="background-color:inherit; font-size:1em!important"> 
  <tr style="background-color:inherit; font-size:1em!important"> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; font-size:1em!important; width:auto!important"> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      1 
    </div> </td> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; width:807px; font-size:1em!important"> <pre style="line-height:16px; font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">$( <span style="background-color:inherit; color:rgb(221,17,68)">"a"</span> ).css( <span style="background-color:inherit; color:rgb(221,17,68)">"color"</span>, <span style="background-color:inherit; color:rgb(221,17,68)">"red"</span> );</code>
       
        
      </div>
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

这是一些非常基础的jQuery代码，但是你知道在调用了这个方法后发生了什么吗？不管何处你使用$去选择一些元素，它将会反回一个jQuery对像。这个对象包含所有你要使用的方法（ .css()， .click()等等），和所有符合你选择条件的元素。 如：$('.red')，这个返回的对象就是个jQuery对象，这个对象包含所有html标签元素中类名（class属性）为.red的元素，此时的这个返回对象可以看做是一个数组。 jQuery对象从  `$.fn` `获得这些方法。这个对象（$.fn）包含所有jQuery的方法，并且我们要是想写自己的方法，最终他也会拥有我们所写的方法。`

`另外jQuery的工具方法 $.trim() 被用于去除用户出入字符串两边的空格字符，工具类方法是直属于$方法的。当你的jQuery API的扩展无法满足你的需求时，你可能会自己写一个通用的方法插件。`

`写一个简单的插件（`Basic Plugin Authoring）

我们现在是想写一个让选择到的元素的文本颜色变成绿色的插件，所以我们要做的就是在 $.fn 上添加一个greenify方法，并且他就会像其他jQuery对象方法一样可以使用。

<table style="font-size:undefined; border-collapse:collapse; margin-top:10px; margin-bottom:10px; background-color:inherit"> 
 <tbody style="background-color:rgb(238,238,238); color:rgb(51,51,51); font-family:source-code-pro,Consolas,monospace; font-size:15px"> 
  <tr style="background-color:inherit; font-size:1em!important"> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; font-size:1em!important; width:auto!important"> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      1 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      2 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      3 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      4 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      5 
    </div> </td> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; width:811px; font-size:1em!important"> <pre style="line-height:16px; font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">$.fn.greenify = <span style="background-color:inherit"><strong>function</strong></span>() {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    <span style="background-color:inherit"><strong>this</strong></span>.css( <span style="background-color:inherit; color:rgb(221,17,68)">"color"</span>, <span style="background-color:inherit; color:rgb(221,17,68)">"green"</span> );</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">};</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">$( <span style="background-color:inherit; color:rgb(221,17,68)">"a"</span> ).greenify(); <span style="background-color:inherit; color:rgb(153,153,136)"><em>// Makes all the links green.</em></span></code>
       
        
      </div>
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

注意那个使用的.css()， 这是jQuery的另一个方法，我们在这是用this而不是$(this)，这是因为我们的方法 greenify和 css一样，都是同一个对象的方法。

链条（Chaining）

这个有作用，但是我们还有一些事要去做才能在这个真实的世界里生存下来。JQuery特性的其中的一个就是链条，当你使用一个选择器的时候，五六个动作都可以通过这个选择器来调用。这个特性的实现方法就是所有的jQuery方法是将原来的jQuery对象再次返回，但是时有些例外，如.width()在不调用人物参数的时候返回的是所选择元素的宽，而不是jQuery对象。使我们的插件变得可重复使用的，只需要添加一行代码：

注意链条概念不适用于jQuery的工具类方法，如$.trim().

保护$这个别名和添加作用域（Protecting the $ Alias and Adding Scope）

在javascript的库中，$这个变量是很受欢迎的，如果你在使用jQuery的同时使用了其他库，你就必须使用 `jQuery.noConflict()` .来代替$来使用jQuery。但是，这样会破坏我们的插件，因为我们使用的是$来当做jQuery方法的别名。为了和其他插件很好的共处，并且还使用jQuery的$这个别名，我们需要将我们的代码放到一个 立即调用方法表达式 中，然后通过传递jQuery参数，将命名参数为$：

<table style="font-size:15px; border-collapse:collapse; margin-top:10px; margin-bottom:10px; color:rgb(51,51,51); font-family:source-code-pro,Consolas,monospace!important; background-color:inherit"> 
 <tbody style="background-color:inherit; font-size:1em!important"> 
  <tr style="background-color:inherit; font-size:1em!important"> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; font-size:1em!important; width:auto!important"> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      1 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      2 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      3 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      4 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      5 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      6 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      7 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      8 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      9 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      10 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      11 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      12 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      13 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      14 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      15 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      16 
    </div> </td> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; width:803px; font-size:1em!important"> <pre style="line-height:16px; font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">(<span style="background-color:inherit"><strong>function</strong></span> ( $ ) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    $.fn.greenify = <span style="background-color:inherit"><strong>function</strong></span>() {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>this</strong></span>.css( <span style="background-color:inherit; color:rgb(221,17,68)">"color"</span>, <span style="background-color:inherit; color:rgb(221,17,68)">"green"</span> );</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>return</strong></span> <span style="background-color:inherit"><strong>this</strong></span>;</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    };</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    $.ltrim = <span style="background-color:inherit"><strong>function</strong></span>( str ) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>return</strong></span> str.replace( <span style="background-color:inherit; color:rgb(0,153,38)">/^\s+/</span>, <span style="background-color:inherit; color:rgb(221,17,68)">""</span> );</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    };</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    $.rtrim = <span style="background-color:inherit"><strong>function</strong></span>( str ) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>return</strong></span> str.replace( <span style="background-color:inherit; color:rgb(0,153,38)">/\s+$/</span>, <span style="background-color:inherit; color:rgb(221,17,68)">""</span> );</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    };</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">}( jQuery ));</code>
       
        
      </div>
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

另外，立即调用函数表达式是允许我们有自己的私有变量，想象我们需要一个不同的颜色--绿色，我们将它保存在一个变量中：

减少插件占用的空间（Minimizing Plugin Footprint）

在写插件的时候只占用$.fn的一个位置是个很好的做法，这样的话会减少你的插件被覆盖和你的插件会覆盖别人插件的机会。换句话说，这样做是不对的：

占用一个位置是最好的，这样你可以通过传递参数来控制你的实现：

<table style="font-size:15px; border-collapse:collapse; margin-top:10px; margin-bottom:10px; color:rgb(51,51,51); font-family:source-code-pro,Consolas,monospace!important; background-color:inherit"> 
 <tbody style="background-color:inherit; font-size:1em!important"> 
  <tr style="background-color:rgb(238,238,238); font-size:1em!important"> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; font-size:1em!important; width:auto!important"> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      1 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      2 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      3 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      4 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      5 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      6 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      7 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      8 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      9 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      10 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      11 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      12 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      13 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      14 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      15 
    </div> </td> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; width:803px; font-size:1em!important"> <pre style="line-height:16px; font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">(<span style="background-color:inherit"><strong>function</strong></span>( $ ) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    $.fn.popup = <span style="background-color:inherit"><strong>function</strong></span>( action ) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>if</strong></span> ( action === <span style="background-color:inherit; color:rgb(221,17,68)">"open"</span>) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">            <span style="background-color:inherit; color:rgb(153,153,136)"><em>// Open popup code.</em></span></code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        }</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>if</strong></span> ( action === <span style="background-color:inherit; color:rgb(221,17,68)">"close"</span> ) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">            <span style="background-color:inherit; color:rgb(153,153,136)"><em>// Close popup code.</em></span></code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        }</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    };</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">}( jQuery ));</code>
       
        
      </div>
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

使用.each方法（Using the `each()`Method）

你的jQuery对象将会包含其他引用的DOM元素，这就是为什么jQuery对象经常被当做为一个容器。如果你想做一些其他的操作，如获得一个数据属性、计算位置等等，你就需要使用.each来循环遍历这些元素。

接受选项（Accepting Options）

不管你的插件有多么的复杂，你也应该使用选项来使得你的插件可定制化。最简单的方法，尤其是由很多的选项，就是使用一个对象。我们来使得我们的插件接受一些选项吧。

<table style="font-size:15px; border-collapse:collapse; margin-top:10px; margin-bottom:10px; color:rgb(51,51,51); font-family:source-code-pro,Consolas,monospace!important; background-color:inherit"> 
 <tbody style="background-color:inherit; font-size:1em!important"> 
  <tr style="background-color:rgb(238,238,238); font-size:1em!important"> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; font-size:1em!important; width:auto!important"> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      1 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      2 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      3 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      4 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      5 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      6 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      7 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      8 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      9 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      10 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      11 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      12 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      13 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      14 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      15 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      16 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      17 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      18 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      19 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      20 
    </div> </td> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; width:803px; font-size:1em!important"> <pre style="line-height:16px; font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">(<span style="background-color:inherit"><strong>function</strong></span> ( $ ) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    $.fn.greenify = <span style="background-color:inherit"><strong>function</strong></span>( options ) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit; color:rgb(153,153,136)"><em>// This is the easiest way to have default options.</em></span></code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>var</strong></span> settings = $.extend({
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">            <span style="background-color:inherit; color:rgb(153,153,136)"><em>// These are the defaults.</em></span></code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">            color: <span style="background-color:inherit; color:rgb(221,17,68)">"#556b2f"</span>,</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">            backgroundColor: <span style="background-color:inherit; color:rgb(221,17,68)">"white"</span></code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        }, options );</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit; color:rgb(153,153,136)"><em>// Greenify the collection based on the settings variable.</em></span></code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>return</strong></span> <span style="background-color:inherit"><strong>this</strong></span>.css({
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">            color: settings.color,</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">            backgroundColor: settings.backgroundColor</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        });</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    };</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">}( jQuery ));</code>
       
        
      </div>
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

示例：

颜色的默认值将会被橘色覆盖。

组装（Putting It Together）

这里有个小小的插件例子使用了我们上面提到的技术；

<table style="font-size:15px; border-collapse:collapse; margin-top:10px; margin-bottom:10px; color:rgb(51,51,51); font-family:source-code-pro,Consolas,monospace!important; background-color:inherit"> 
 <tbody style="background-color:inherit; font-size:1em!important"> 
  <tr style="background-color:inherit; font-size:1em!important"> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; font-size:1em!important; width:auto!important"> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      1 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      2 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      3 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      4 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      5 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      6 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      7 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      8 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      9 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      10 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      11 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      12 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      13 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      14 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      15 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      16 
    </div> 
    <div style="min-width:2px; background-color:inherit; font-size:1em!important">
      17 
    </div> </td> 
   <td style="word-break:break-all; border:1px solid rgb(153,153,153); padding:5px 10px; min-height:25px; min-width:25px; height:auto!important; background-color:inherit; width:803px; font-size:1em!important"> <pre style="line-height:16px; font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">(<span style="background-color:inherit"><strong>function</strong></span>( $ ) {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    $.fn.showLinkLocation = <span style="background-color:inherit"><strong>function</strong></span>() {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>this</strong></span>.filter( <span style="background-color:inherit; color:rgb(221,17,68)">"a"</span> ).each(<span style="background-color:inherit"><strong>function</strong></span>() {
          </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">            <span style="background-color:inherit"><strong>var</strong></span> link = $( <span style="background-color:inherit"><strong>this</strong></span> );</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">            link.append( <span style="background-color:inherit; color:rgb(221,17,68)">" ("</span> + link.attr( <span style="background-color:inherit; color:rgb(221,17,68)">"href"</span> ) + <span style="background-color:inherit; color:rgb(221,17,68)">")"</span> );</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        });</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">        <span style="background-color:inherit"><strong>return</strong></span> <span style="background-color:inherit"><strong>this</strong></span>;</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">    };</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">}( jQuery ));</code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"> </code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit"><span style="background-color:inherit; color:rgb(153,153,136)"><em>// Usage example:</em></span></code>
       
        
      </div>
      
       
     </div>
      
       
     <div style="background-color:inherit; font-size:1em!important">
       
        
      <div style="background-color:inherit; font-size:1em!important">
        
         
       <code style="font-family:source-code-pro,Consolas,monospace!important; font-size:1em!important; background-color:inherit">$( <span style="background-color:inherit; color:rgb(221,17,68)">"a"</span> ).showLinkLocation();</code>
       
        
      </div>
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

这个方便的插件通过容器中的所有锚点，追加href属性值到括号中。

我们的插件的最优化结果：

翻译到此结束。有些没有翻译，鉴于本人太菜，请大家手下留情。

[http_learn.jquery.com_plugins_basic-plugin-creation]: http://learn.jquery.com/plugins/basic-plugin-creation/