20151213Jquery學習筆記--外掛

破玉發表於2015-12-13
jQuery筆記

外掛(Plugin)也成為 jQuery 擴充套件(Extension)，是一種遵循一定規範的應用程式介面編 寫出來的程式。目前 jQuery 外掛已超過幾千種，由來自世界各地的開發者共同編寫、驗證 和完善。而對於 jQuery 開發者而言，直接使用這些外掛將快速穩定架構系統，節約專案成 本

一．外掛概述 

外掛是以 jQuery 的核心程式碼為基礎，編寫出複合一定規範的應用程式。也就是說，插 件也是 jQuery 程式碼，通過 js 檔案引入的方式植入即可。

外掛的種類很多，主要大致可以分為：UI 類、表單及驗證類、輸入類、特效類、Ajax 類、滑動類、圖形影象類、導航類、綜合工具類、動畫類等等。

引入外掛是需要一定步驟的，基本如下： 

 

1.必須先引入 jquery.js 檔案，而且在所有外掛之前引入；

2.引入外掛；

3.引入外掛的周邊，比如皮膚、中文包等。

二．驗證外掛 

Validate.js 是 jQuery 比較優秀的表單驗證外掛之一。這個外掛有兩個 js 檔案，一個是主 檔案，一個是中文包檔案。使用的時候，可以使用 min 版本；在這裡，為了教學，我們未 壓縮版本

驗證外掛包含的兩個檔案分別為：jquery.validate.js 和 jquery.validate.messages_zh.js。 

//HTML 內容 

<scripttype="text/javascript"src="jquery.validate.js"></script> 
<scripttype="text/javascript"src="jquery.validate.messages_zh.js"></script>
 <form> 
<p>用 戶 名：<inputtype="text"class="required"name="username"minlength="2"/>
 *</p> 
<p>電子郵件：<inputtype="text"class="requiredemail"name="email"/>
*</p> 
<p>網 址：<inputtype="text"class="url"name="url"/></p>
 <p><inputtype="submit"value="提交"/></p> 
</form>

　　//jQuery 程式碼 

$(function(){
 $('form').validate(); 
});

　　只要通過 form 元素的 jQuery 物件呼叫 validate()方法，就可以實現“必填”、 “不能小於 兩位”、 “電子郵件不正確”、“網址不正確”等驗證效果。除了 js 端的 validate()方法呼叫， 表單處也需要相應設定才能最終得到驗證效果。 

1.必填項：在表單設定 class="required"；

2.不得小於兩位：在表單設定 minlength="2"；

3.電子郵件：在表單中設定 class="email";

4.網址：在表單中設定 class="url"。

注意：本章就簡單的瞭解外掛的使用，並不針對某個功能的外掛進行詳細講解。比如驗 證外掛 validate.js，它類似與 jQuery 一樣，同樣具有各種操作方法和功能，需要進行類似手 冊一樣的查詢和講解。所以，我們會在專案中再去詳細講解使用到的外掛。

三．自動完成外掛 

所謂自動完成，就是當使用者輸入部分字元的時候，智慧的搜尋出包含字元的全部內容。 比如：輸入 a，把匹配的內容列表展示出來。 

//HTML 內容 

<scripttype="text/javascript"src="jquery.autocomplete.js"></script> 
<scripttype="text/javascript"src="jquery-migrate-1.2.1.js"></script>
 <linkrel="stylesheet"href="jquery.autocomplete.css"type="text/css"/>

　　//jQuery 程式碼 

varuser=['about','family', 'but', 'black']; 
$('forminput[name=username]').autocomplete(user,{
 minChars:0 //雙擊顯示全部資料 
});

　　

注意：這個自動完成外掛使用的 jQuery 版本較老，用了一些已被新版本的 jQuery 廢棄 刪除的方法，這樣必須要向下相容才能有效。所以，去查詢外掛的時候，要注意一下他堅持 的版本。

四．自定義外掛 

前面我們使用了別人提供好的外掛，使用起來非常的方便。如果市面上找不到自己滿意 的外掛，並且想自己封裝一個外掛提供給別人使用。那麼就需要自己編寫一個 jQuery 外掛 了。 

按照功能分類，外掛的形式可以分為一下三類： 

1.封裝物件方法的外掛；（也就是基於某個 DOM 元素的 jQuery 物件，區域性性）

2.封裝全域性函式的外掛；（全域性性的封裝）

3.選擇器外掛。(類似與.find())

 

經過日積月累的外掛開發，開發者逐步約定了一些基本要點，以解決各種因為外掛導致 的衝突、錯誤等問題，包括如下： 

1.外掛名推薦使用 jquery.[外掛名].js，以免和其他 js 檔案或者其他庫相沖突；

2.區域性物件附加 jquery.fn 物件上，全域性函式附加在 jquery 上；

3.外掛內部，this 指向是當前的區域性物件；

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

5.所有的方法或外掛，必須用分號結尾，避免出現問題；

6.外掛應該返回的是 jQuery 物件，以保證可鏈式連綴；

7.避免外掛內部使用$，如果要使用，請傳遞 jQuery 進去。

按照以上的要點，我們開發一個區域性或全域性的導航選單的外掛。只要導航的<li>標籤內 部嵌入要下拉的<ul>，並且 class 為 nav，即可完成下拉選單。 

//HTML 部分 

<ulclass="list"> 
  <li>導航列表 
    <ul class="nav"> 
      <li>導航列表 1</li> 
      <li>導航列表 1</li> 
      <li>導航列表 1</li> 
      <li>導航列表 1</li> 
      <li>導航列表 1</li> 
      <li>導航列表 1</li> 
   </ul> 
  </li> 
  <li>導航列表 
    <ul class="nav"> 
     <li>導航列表 2</li>
     <li>導航列表 2</li>
     <li>導航列表 2</li> 
     <li>導航列表 2</li>
     <li>導航列表 2</li>
     <li>導航列表 2</li>
    </ul>
   </li>
 </ul>

　　

//jquery.nav.js 部分 ;
(function($){
 $.fn.extend({
 'nav':function(color){
 $(this).find('.nav').css({
    listStyle:'none', 
    margin:0,
    padding:0, 
    display:'none', 
    color:color
});

$(this).find('.nav').parent().hover(function(){ 
$(this).find('.nav').slideDown('normal'); 
},function(){ 
$(this).find('.nav').stop().slideUp('normal');
 });
returnthis;
}
}); 
})(jQuery);

　　此教程來源於北風網

 

相關文章