Jqueryプラグインの書き方メモcompilation_jquery-jsチュートリアル-php.cn

Jqueryプラグインの書き方メモcompilation_jquery

WBOY

リリース： 2016-05-16 17:50:11

オリジナル

890 人が閲覧しました

jQuery プラグインの種類:
1. jQuery メソッド:
このタイプのプラグインはオブジェクトメソッドをカプセル化するため、jQuery は jQuery で取得されます。セレクター。オブジェクトプロセス内で動作するため、jQuery の強力なセレクターを利用できます。
2. グローバル関数:
カスタム関数関数を jQuery 名前空間に独立してアタッチし、jQuery スコープ内のパブリック関数として使用することもできます。ただし、グローバル関数は jQuery オブジェクトにバインドされていないため、セレクターで取得した jQuery オブジェクトに対して呼び出すことはできません。 jQuery.fn() または $.fn() を通じて参照する必要があります。
3. セレクター:
jQuery が提供するセレクターが不十分または不便だと感じる場合は、セレクターのカスタマイズを検討できます。
jQuery プラグインの仕組み:
① jQuery.extend() メソッド: グローバル関数またはセレクターを作成できます。
による: いわゆるグローバル関数は、jQuery オブジェクトのメソッドです。実際には、このタイプの関数をユーティリティ関数と呼ぶ人もいます。それらは、DOM を直接操作しませんが、JavaScript の非要素オブジェクトを操作するか、jQuery の each() 関数や noConflict() 関数などの他の非オブジェクト固有の操作を実行します
例: に 2 つのパブリック関数を作成します。 jQuery 名前空間

コードをコピーしますコードは次のとおりです。

jQuery.extend({
minValue : function(a,b ){
return a},
maxValue : function(a,b){
return a}
})
$(function(){
$("input").click(function(){
var a = prompt("値を入力してください? ");
var b = プロンプト("別の値を入力してください?");
var c = jQuery.minValue(a,b);
var d = jQuery.maxValue(a,b);
alert("入力した最大値は次のとおりです: " d "n入力した最小値は次のとおりです:
});
})

※ jQuery.extend() メソッドは、プラグインの作成以外にも jQuery オブジェクトの拡張にも使用できます。
例: jQuery.extend() メソッドを呼び出してオブジェクト a とオブジェクト b を新しいオブジェクトにマージし、マージされたオブジェクトを返して変数 c に割り当てます

コードをコピーしますコードは次のとおりです:

 
var a = {name : "zhu",pass : 123} 
var b = {名前 : "wang"、パス : 456、年齢 : 1} 
var c = jQuery.extend(a,b); 
$(function(){ 
for(c の変数名){ 
$("div ").html($("div").html() "
" name ":" c[name]); 
} 
}) 

例: jQuery グローバル関数の作成

コードをコピーコードは次のとおりです:

 
jQuery.css8 = { 
minValue : function(a,b){ 
return a}, 
maxValue : function(a,b){ 
return a} 
} 
$(function(){ 
$("input").click(function(){ 
var a = プロンプト("値を入力してください?"); 
var b = プロンプト("別の値を入力してください"); 
var c = jQuery.css8.minValue(a,b); d = jQuery.css8.maxValue( a,b); 
alert("入力した最大値は次のとおりです:" d "n入力した最小値は次のとおりです:" 
}); ) 

 
By: jQuery 名前空間に関数を追加する場合は、新しい関数を jQuery オブジェクトのプロパティとして指定するだけです。 jQuery オブジェクト名は、$、jQuery.css8==$.css8 と省略することもできます。 

② jQuery.fn.extend() メソッド: jQuery オブジェクトを作成するメソッド。
例: 最も単純な jQuery オブジェクトメソッドを見てみましょう

コードをコピーしますコードは次のとおりです:

jQuery.fn.test = function(){

alert("これは jQuery オブジェクトのメソッドです!"); 
} 
$(function(){ 
$("div ").click (function(){ 
$(this).test(); 
}); 
}) 