快捷導(dǎo)航

jQuery自定義插件詳解及實(shí)例代碼

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

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

jQuery自定義插件

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

jQuery庫(kù)是為了加快JavaScript的開(kāi)發(fā)速度而設(shè)計(jì)的，通過(guò)簡(jiǎn)化編寫(xiě)JavaScript的方式，減少代碼量。

jQuery編寫(xiě)插件有兩種方式

1.添加jQuery對(duì)象級(jí)別的插件，原理是給jQuery類添加方法。

寫(xiě)法如下：

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

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

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

寫(xiě)法如下：

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

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

jQuery插件的種類

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

jQuery的插件機(jī)制

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

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

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

這兩個(gè)方法接收的參數(shù)都是一個(gè)對(duì)象，類型為Object，Object里面的”名/值”分別對(duì)應(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對(duì)象的原型，即為jQuery類添加成員函數(shù)。

這里我寫(xiě)一個(gè)簡(jiǎn)單的例子來(lái)實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的插件，僅僅是用來(lái)說(shuō)明一下如何使用jQuery開(kāi)發(fā)插件。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定義jQuery插件</title>
<script src="plugs/jquery-2.2.3.min.js"></script>
<script>
//這是一個(gè)自定義的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í)行以后返回的頁(yè)面為：