怎樣自己動手開發JQuery外掛

2019-12-12 21:28:48

JQuery從誕生之初就秉性著「One less, Do more」（用最少的程式碼表達最豐富的內容）思想，充分合理的使用JQuery可以實現豐富的網頁效果，同時從程式碼重用性的角度出去，設計各種各樣滿足不同需求的JQuery外掛已是形勢所需要，通過JQuery外掛，我們可以隨心所欲的使用JQuery外掛到網頁的任何部分，實現任意的效果。說到這裡，大家一定心動了吧，下面就跟隨小編一起來探究一下JQuery外掛的開發方法。

1

下載相關的腳步執行庫：由於採用JQuery指令碼來實現網頁的動態效果，因此需要在網上搜尋並下載相應的JQuery運動庫，下載完成後進行解壓縮，將解壓後的檔案拷貝到網站的根目錄下。

2

建立內容頁面：為了更好的展示JQuery實現的效果，在此小編特意製作了一個導航選單。該導航選單包括四個子選單，分別是「主頁」、「部落格推薦」、「討論專區」、「分享經驗」以及「熱點搜尋」。具體程式碼和內容如下：

3

接下來需要對該網頁進入美化：在當前目錄下新建一名稱為"MyStyle.css"的層疊樣式表檔案，利用該檔案實現網頁的美化。當然利用CSS進行美化操作的另一目地是實現網頁的內容與其表現形式的分離，這樣就可以使我們專注於網頁的美化，實現了更高效的分工合作理念。當前重要利用CSS實現了將網頁內容字型顏色設定為紅色，新增了列表樣式，樣式表檔案的原始碼及對應的網頁效果如圖所示。

4

建立JQuery外掛：首先在網站的根目錄下新建一名稱為「MyJQueryAddIn.js」檔案，然後在檔案中輸入如圖所示內容。在此特別需要說明的一點是JQuery外掛的基本結構是：（function($){程式碼})(jquery);本外掛的重要功能是實現當滑鼠停留在導航欄上時，對應選單選項向右移動60畫素，當滑鼠離開時又恢復原樣。JQuery外掛對應內容如圖所示：

5

最後在網頁檔案「index.html」中新增對「MyStyle.css」和」MyJQueryAddIn.js「檔案的參照：

設計完成後，網站根目錄結構及頁面效果如果所示。

6

偵錯執行： 將滑鼠停留在導航欄上時，觀看對應選單選項向右移動的情況。當滑鼠離開時再觀察選單恢復原樣情況。以下為效果展示：

怎樣自己動手開發JQuery外掛

1

2

3

4

5

6

熱門文章