jqプラグインの作成方法(カスタムjqプラグイン)

jqプラグインは使いやすく、クライアントのプログラミングに大きなメリットをもたらし、開発時間を大幅に節約します.
私がJqを使うのもとても长い时间があって、今日1つのプロジェクトの中で1つのプラグインを使う时、突然このプラグインが1つのバグがあると感じます
これは私にjqプラグインを書く考えを生んだ.
次に例を示します.
jQuery(以下JQと略す)は強力でコンパクトなJSフレームワークで、現在多くのサイトでJQが使用されており、当駅も例外ではありません.本文はみんなにどのように1つの自分の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.qiandabao.com", //     
			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">

著作権所有者の名前、Webサイト、文字サイズ、右側の表示など、デフォルトのコンテンツを使用したくない場合は、このプラグインにいくつかのパラメータを渡します.

<script type="text/javascript">
	$("#article-content").userCp({
		cpBy: " T ",
		url: "http://www.qiandabao.com", size: "16px",
		align: "right"
	});
<script">

実際の応用では、私たちはもちろんこのようなプラグインを書くことはありません.非パッケージの方法やページのソースコードを直接変更するともっと速く便利になるので、私はただみんなにdemoをあげるために、この鶏肋のプラグインを書いただけです.