abstract：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í)別的插件，原理是給jQu
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類(lèi)添加方法。
寫(xiě)法如下：
(function($){
$.fn.extend({
函數(shù)名:function(自定義參數(shù)){
//自定義插件代碼部分
}
});
})(jQuery);
//第二種寫(xiě)法
(function($){
$.fn.函數(shù)名=function(自定義參數(shù)){
//自定義插件代碼
}
})(jQuery);
//調(diào)用方法
("#id").函數(shù)名(參數(shù));2.添加jQuery類(lèi)級(jí)別的方法，也就是添加靜態(tài)方法
寫(xiě)法如下：
(function($){
$.extend({
函數(shù)名:function(自定義參數(shù)){
//自定義插件代碼
}
});
})(jQuery);
//第二種寫(xiě)法
(function($){
$.函數(shù)名=function(自定義參數(shù)){
//自定義插件代碼
}
})(jQuery);
//調(diào)用方式
$.函數(shù)名(參數(shù));jQuery插件的種類(lèi)
1.對(duì)象級(jí)別插件開(kāi)發(fā)，即給jQuery對(duì)象添加方法，封裝對(duì)象方法的插件，例如：append()、val()。
2.類(lèi)級(jí)別插件開(kāi)發(fā)，即給jQuery添加全局函數(shù)，相當(dāng)于給類(lèi)本身添加方法，例如：$.ajax();
jQuery的插件機(jī)制
jQuery為開(kāi)發(fā)插件提供了兩種方法。
1. jQuery.fn.extend(object)，給jQuery對(duì)象添加方法。
2. jQuery.extend(object)，給jQuery類(lèi)添加方法。
這兩個(gè)方法接收的參數(shù)都是一個(gè)對(duì)象，類(lèi)型為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類(lèi)添加成員函數(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è)面為：
更多關(guān)于jQuery自定義插件詳解及實(shí)例代碼請(qǐng)關(guān)注PHP中文網(wǎng)（m.miracleart.cn）其他文章！