如何使用jQuery寫乙個jQuery外掛程式

一：關於如何寫jquery外掛程式的方法有三種：

1. 使用$.extend()來擴充套件jquery；

2. 使用$.fn來新增jquery方法；

3. 通過$.widget()應用jquery ui的部件工廠方式建立；

二：三種jquery外掛程式開發方式說明

1、$.extend()相對簡單，一般很少能夠獨立開發複雜外掛程式，僅僅是在jquery命名空間或者理解成jquery身上新增了乙個靜態方法而以。

2、我們呼叫通過$.extend()新增的函式時直接通過$符號呼叫（$.myfunction()），而不需要選中dom元素($('#example').myfunction())。

3、$.widget()是一種高階的開發模式，該模式開發出來的部件帶有很多jquery內建的特性，比如外掛程式的狀態資訊自動儲存，各種關於外掛程式的常用方法等

4、$.fn則是一般外掛程式開發用到的方式，可以利用jquery強大的選擇器帶來的便利，以及將外掛程式更好地運用於所選擇的元素身上，使用的外掛程式也大多是通過此種方式開發。

三：例項演示

1. $.extend()

(function( $ ) 

})$.sayhello(); //hello,aaa
$.sayhello('bbb'); //hello,bbb
})( jquery );

(function($);

var settings = $.extend({}, defaults, options);
return this.css();
}})(jquery);

呼叫：

1、jquery外掛程式的檔名推薦命名為jquery.[外掛程式名].js，以免和其他js庫外掛程式混淆

2、所有的物件方法都應當附加到jquery.fn物件上，而所有的全域性函式都應當附加到jquery物件本身上

3、在外掛程式內部的this指向的是當前通過選擇器獲取的jquery物件，而不像一般方法那樣，如click，內部的this指向的是dom元素

4、可以通過this.each來遍歷所有的元素

5、所有的方法或函式外掛程式，都應當以分號結尾。否則壓縮的時候可能出現問題。為了穩妥些，甚至可以在外掛程式頭部先加上乙個分號，以免他人不規範的**影響自身的外掛程式**

6、外掛程式應該返回乙個jquery物件，以保證外掛程式的可鏈式操作

7、避免在外掛程式內部使用$作為jquery物件的別名，而應使用完整的jquery來表示，避免衝突。當然，也可以利用閉包來迴避這種問題，使外掛程式內部繼續使用$作為jquery的別名

8、利用閉包的特性，即可以避免內部臨時變數影響全域性空間，又可以在外掛程式內容繼續使用$作為jquery的別名。常見的jquery外掛程式都是以下這種形式的:

(function())();

首先定義乙個匿名函式function()，然後用括號括起來，變成(function())這種形式，最後通過()這個運算子來執行。可以傳遞引數進行，以供內部函式使用

//為了更好的相容性，開始前有個分號

;(function($))(jquery);//這裡就將jquery作為實參傳遞給匿名函式了

上面的**是一種常見的jquery外掛程式的結構

如何去寫乙個jquery外掛程式

前些日子，因為專案的需求，自己定製了一款jquery彈窗，這得益於自己之前接觸的專案讓我對於物件導向程式設計有了深刻的理解。在jquery的基礎上拓展一款彈窗外掛程式 jquery原始碼中可知，jquery.fn便是jquery的命名空間。jquery.fn jquery.prototype var...

如何寫乙個jquery外掛程式

本文總結整理一下如何寫乙個jquery外掛程式？雖然現今各種mvvm框架異常火爆，但是jquery這個陪伴我們成長，給我們帶來很多幫助的優秀的庫不應該被我們拋棄，寫此文章，作為對以往欠下的筆記的補充，以及對jquery的重溫。寫jquery外掛程式有三種方法 1.使用 extend 來拓展jquer...

如何寫乙個jQuery外掛程式

jquery 的外掛程式開發模式主要有三種 這裡我們選用第二種 fn.myplugin functin 因為這種方法是加在jquery物件上，可以在jquery選擇器選擇元素後直接呼叫 body myplugin 若對其他兩種方法有興趣，請自行檢視jquery 官方文件。改變元素的背景顏色外掛程式 ...