jQuery（以下簡稱JQ）是一個功能強大而又小巧的JS框架，現在很多網站都在使用JQ，本站也不例外。本文教大家如何寫一個屬於你自己的JQ插件。
本JQ插件例子是在你網站的文章結尾處添加你的版權。
JQ插件標准的封裝代碼如下，首先需要閉包：
<
script
type
=
"text/javascript"
>
(function ($) {
//這里放入插件代碼
})(jQuery);
</
script
>
|
這是jQuery官方的插件開發規范，這樣寫是作用是：
1. 避免全局依賴。
2. 避免第三方破壞。
3. 兼容jQuery操作符’$’和’jQuery’
接着給插件加入主體：
<
script
type
=
"text/javascript"
>
(function ($) {
$.fn.userCp = function(options) { //定義插件的名稱，這里為userCp
var dft = {
//以下為該插件的屬性及其默認值
cpBy: "dafi", //版權所有者
url: "http://www.dafi.cn", //所有者鏈接
size: "12px", //版權文字大小
align: "left" //版權文字位置，left || center || right
};
var ops = $.extend(dft,options);
var style = 'style="font-size:' + ops.size + ';text-align:' + ops.align + ';"'; //調用默認的樣式
var cpTxt = '<
p
' + ' ' + style + '>此文章版權歸<
a
target
=
"_blank"
href
=
"' + ops.url + '"
>' + ops.cpBy + '</
a
>所有</
p
>'; //生成版權文字的代碼
$(this).append(cpTxt); //把版權文字加入到想顯示的div
}
})(jQuery);
</
script
>
|
OK了，這個插件已經完成了，接下來我們來看看調用的方式。
比如你文章所在的div的id=”article-content”，那么在此div后面（先讀取到了該div，該div才可以作為后面的JS的對象）加上JS代碼：
<
script
type
=
"text/javascript"
>
$("#article-content").userCp();
<
script
">
|
其實也不是一定要放到該div的后面，比如要放到head區域里的話，就要使用JQ的預讀功能，也就是把頁面所有的dom都讀取完之后，才執行里面的JS：
<
script
type
=
"text/javascript"
>
$(function(){ //官方解釋：在dom文檔載入完成后執行的函數
$("#article-content").userCp();
});
<
script
">
|
如果不想使用默認的內容，比如要修改版權所有者名字、網址、文字大小和靠右顯示等，那就給這個插件傳幾個參數：
<
script
type
=
"text/javascript"
>
$("#article-content").userCp({
cpBy: " T ",
url: "http://dafi.cn",
size: "16px",
align: "right"
});
<
script
">
|
在實際的應用中，我們當然不會寫這么一個插件，因為直接用非封裝的方法或者直接改頁面的源碼會更快更方便，我只是為了給大家一個demo，所以才寫了這個雞肋的插件。
不會JS的同學，可以直接去學JQ，這樣讓你在短時間內能夠做出很炫的效果，而不必去啃那些厚厚的JS書籍了。不過如果你是想以JS作為職業的話，還是要從最基本的東西學起。