jQuery插件編寫jQuery種類基本要點封裝對象方法的插件全局函數的插件選擇器的插件

1.封裝對象方法的插件,這種插件是我們常用的插件，後面将會具體針對這種插件介紹，如：$("#div").parent();

2.封裝全局函數的插件 如:jquery.ajax() 3.選擇器插件 如：$("ul li:eq(0)")

1.所有的對象方法(第1種)都應該附加在jquery.fn=jquery.prototype,而所有的全局函數都應該附加在jquery上

2.this在插件内部，是通過選擇器擷取的jquery對象，而例如click(),内部指的的dom元素

3.應該傳回一個jquery對象，以保證插件的可鍊式操作

1

2

3

4

5

6

7

8

9

10

11

<code>(</code><code>function</code><code>($){</code>

<code>   </code><code>$.fn.extent({</code>

<code>       </code><code>jname:</code><code>function</code><code>(opt){</code>

<code>         </code><code>var</code>

<code>option={uername:</code><code>"require"</code><code>};  </code><code>//預設的規則</code>

<code>         </code><code>option=$.extend(option,opt);</code>

<code>         </code><code>return</code>

<code>this</code><code>.each(){  </code><code>//會依次比對元素，return 傳回對象，保證可鍊式操作</code>

<code>        </code><code>這裡寫插件要做的操作</code>

<code>        </code><code>}</code>

<code>      </code><code>}&lt;br&gt;</code>

<code>  </code><code>})</code>

<code>})(jquery)</code>

以上是一個基本的對象插件的模闆，這裡講解下$.extend(option,opt);如果option，opt有相同屬性，opt會覆寫option的值

<code>option={uername:</code><code>"require"</code><code>,age:22};</code>

<code>  </code><code>opt={age:33};</code>

<code>  </code><code>$.extend(option,opt) </code><code>//這時傳回的option={ uername:"require", age:33}</code>

jquery的extend方法還有一個重載原型：extend(boolean,dest,src1,src2,src3...)第一個參數boolean代表是否進行深度拷貝，其餘參數和前面介紹的一緻，什麼叫深層拷貝，我們看一個例子：

<code>var</code>

<code>result=$.extend(</code><code>true</code><code>, {},</code>

<code>{ name:</code><code>"john"</code><code>, location: {city:</code><code>"boston"</code><code>,county:</code><code>"usa"</code><code>} },</code>

<code>{ last:</code><code>"resig"</code><code>, location: {state:</code><code>"ma"</code><code>,county:</code><code>"china"</code><code>} } );</code>

我們可以看出src1中嵌套子對象location:{city:"boston"},src2中也嵌套子對象location:{state:"ma"},第一個深度拷貝參數為true，那麼合并後的結果就是：

也就是說它會将src中的嵌套子對象也進行合并，而如果第一個參數boolean為false，我們看看合并的結果是什麼，如下：

<code>result=$.extend(</code><code>false</code><code>, {},{ name:</code><code>"john"</code><code>, location:{city:</code><code>"boston"</code><code>,county:</code><code>"usa"</code><code>} },{ last:</code><code>"resig"</code><code>, location: {state:</code><code>"ma"</code><code>,county:</code><code>"china"</code><code>} });</code>

那麼合并後的結果就是:result={name:"john",last:"resig",location:{state:"ma",county:"china"}}

<code> </code><code>$.extend({</code>

<code>  </code><code>func:</code><code>function</code><code>(){</code>

<code>  </code><code>return</code>

<code>;}</code>

<code> </code><code>})</code>

<code> </code><code>$.extend(jquery.expr[</code><code>":"</code><code>],{</code>

<code>    </code><code>between:</code><code>function</code><code>(a,i,m){ </code><code>//第1個參數，目前周遊的dom元素，第2個參數目前周遊的dom元素的索引值，從0開始，第3個參數用正規表達式match比對出來的數組</code>

<code>        </code><code>return</code>

<code>    </code><code>}</code>