jQuery plug-in_jqueryで作成したグローバル関数の使用例

この記事の例では、jQuery プラグイン制作におけるグローバル関数の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. 新しいグローバル関数を追加します

いわゆるグローバル関数は、実際には jQuery オブジェクトのメソッドですが、実用的な観点からは、jQuery 名前空間内にある関数です

(1) 関数を追加するには、jQuery オブジェクトのプロパティとして新しい関数を指定するだけです。

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
}

呼び出し:

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

$.five();

(2)複数の機能を追加する

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
} 
jQuery.six =function(){ 
 alert("直接继承方式不一样2"); 
}

呼び出し:

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

$.five();$.six( );

上記の方法では、名前空間の競合が発生するリスクがあります。この問題を回避するには、次のように、このプラグインに属するすべてのグローバル関数をオブジェクトにカプセル化することが最善です。

//命名空间继承
jQuery.myPlugin ={ 
 one : function(obj){ 
  var object = obj; 
  var id = object.attr("id"); 
  alert(id); 
 }, 
 two : function(){ 
  alert(22); 
 } 
}

これにより、実際にはグローバル関数用に別の名前空間 jQuery.myPlugin が作成されます。

2. jQuery オブジェクトメソッドを追加します

jQuery の組み込み機能のほとんどは、そのオブジェクト メソッドを通じて提供されます。

jQuery.fn.myMethod= function(){ 
 alert(11); 
}

呼び出し:

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

$.fn.myMethod();

注: jQuery.fn は jQuery.prototype のエイリアスです。

例: 以下は正しく動作しないメソッドです

<ul> 
  <li>11111111111111111111111111</li> 
  <liclass="this">22222222222222222222</li> 
  <li>333333333333333</li> 
  <liclass="that">44444444444444444</li> 
  <liclass="this">55555555555555</li> 
  <li>6666666666666666</li> 
  <li>777777777777777777</li> 
  <liclass="that">777777777777777777</li> 
</ul> 
<inputtype="button" value="swap" id="swap" />

jQuery.fn.swapClass= function(class1,class2){ 
 if(this.hasClass(class1)){ 
  this.removeClass(class1).addClass(class2); 
 } 
 if(this.hasClass(class2)){ 
  this.removeClass(class2).addClass(class1); 
 } 
} 
 $("#swap").click(function(){ 
  $("li").swapClass("this","that"); 
  return false; 
})

すべてのリーはそのスタイルを使用します。

(1)Hermit の反復

複数の要素の一致に関係なく正しい動作を保証する最も簡単な方法は、メソッドの環境で常に .each() メソッドを呼び出すことです。

ハーミット反復を実行します。ハーミット反復の実行は、呼び出される .each() メソッド内での一貫性を維持するために重要です。

は各 DOM 要素を順番に参照します。上記のコードは次のように変更されます。

電話:

jQuery.fn.swapClass= function(class1,class2){ 
 this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

コードをコピー コードは次のとおりです:$("li").swapClass("this","that ")

(2) メソッドの連結

メソッド連結を使用するには、すべてのプラグイン メソッドで jQuery オブジェクトを返す必要があります。返される jQuery オブジェクトは通常、this によって参照されるオブジェクトです。

電話:

jQuery.fn.swapClass= function(class1,class2){ 
 return this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

コードをコピー コードは次のとおりです:$("li").swapClass("this","that ").css("テキスト装飾","下線");

3. 新しい略語メソッドを追加します

この記事が皆さんの jQuery プログラミングに役立つことを願っています。

//添加新的简写方法 
jQuery.fn.slideFadeOut= function(speed,callback){ 
 return this.animate({ 
  height : "hide", 
  opacity : "hide" 
 },speed,callback) 
} 
jQuery.fn.slideFadeIn= function(speed,callback){ 
 return this.animate({ 
  height : "show", 
  opacity : "show" 
 },speed,callback) 
} 
jQuery.fn.slideFadeToggle= function(speed,callback){ 
 return this.animate({ 
  height : "toggle", 
  opacity : "toggle" 
 },speed,callback) 
}