jQuery自定義插件詳解及實例代碼

更新時間：2016年12月29日 10:33:37 投稿：lqh

這篇文章主要介紹了 jQuery自定義插件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下

jQuery自定義插件

jQuery是一個功能強(qiáng)大的庫，提供了開發(fā)JavaScript項目所需的所有核心函數(shù)。然而，有時候我們還是需要使用自定義代碼來擴(kuò)展這些核心函數(shù)來提高開發(fā)效率。

jQuery庫是為了加快JavaScript的開發(fā)速度而設(shè)計的，通過簡化編寫JavaScript的方式，減少代碼量。

jQuery編寫插件有兩種方式

1.添加jQuery對象級別的插件，原理是給jQuery類添加方法。

寫法如下：

(function($){
  $.fn.extend({
    函數(shù)名:function(自定義參數(shù)){
      //自定義插件代碼部分
    }
  });
})(jQuery);
//第二種寫法
(function($){
  $.fn.函數(shù)名=function(自定義參數(shù)){
    //自定義插件代碼
  }
})(jQuery);

//調(diào)用方法
("#id").函數(shù)名(參數(shù));

2.添加jQuery類級別的方法，也就是添加靜態(tài)方法

寫法如下：

(function($){
  $.extend({
    函數(shù)名:function(自定義參數(shù)){
      //自定義插件代碼  
    }
  });
})(jQuery);
//第二種寫法
(function($){
  $.函數(shù)名=function(自定義參數(shù)){
    //自定義插件代碼
  }
})(jQuery);

//調(diào)用方式
$.函數(shù)名(參數(shù));

jQuery插件的種類

1.對象級別插件開發(fā)，即給jQuery對象添加方法，封裝對象方法的插件，例如：append()、val()。
2.類級別插件開發(fā)，即給jQuery添加全局函數(shù)，相當(dāng)于給類本身添加方法，例如：$.ajax();

jQuery的插件機(jī)制

jQuery為開發(fā)插件提供了兩種方法。

1. jQuery.fn.extend(object)，給jQuery對象添加方法。

2. jQuery.extend(object)，給jQuery類添加方法。

這兩個方法接收的參數(shù)都是一個對象，類型為Object，Object里面的”名/值”分別對應(yīng)”函數(shù)名/函數(shù)主體”。

fn是什么

查看jQuery源碼：

<span style="font-size:12px;">jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....　 //...... }; </span>

從源碼中查看，可以得出：

jQuery.fn=jQuery.prototype
//fn指向jQuery對象的原型，即為jQuery類添加成員函數(shù)。

這里我寫一個簡單的例子來實現(xiàn)一個最簡單的插件，僅僅是用來說明一下如何使用jQuery開發(fā)插件。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定義jQuery插件</title>
<script src="plugs/jquery-2.2.3.min.js"></script>
<script>
//這是一個自定義的jQuery插件
(function(){
  $.fn.extend({
    myFirst:function(){
      var s="This is my first jQuery";
      $(this).append(s);
    }
  });
})(jQuery);
</script>
</head>

<body>
<div id="i1"></div>
<script>
$("#i1").myFirst();
</script>
</body>
</html>

執(zhí)行以后返回的頁面為：