jQueryで拡張関数 $.extend と $.fn.extend の違い

参照
$.extend、$.fn.extend メソッドを使用して jQuery オブジェクトの機能を拡張する
jQuery.extendとjQuery.fn.extendの違い - こんにちはこんにちはmonmonです！

$.extend

静的メソッド → 単なる関数のイメージ

$.extend メソッドには、「メソッド名: 匿名関数」のハッシュとして追加したいメソッドをいくつでも指定できます。$.extend メソッドで定義された静的メソッドには、「$.メソッド名(...)」、または「jQuery.メソッド名(...)」でアクセスできます。

書き方は

$.MethodName= {
 MethodInFunctionName: function(){
 }
}
// 呼び出し
$.MethodName.MethodInFunctionName();

これは

function hogehoge(){
}

ってのと同じような動きをするが、これだと他の人が同じ名前で書いた時にバッティングするのでjQueryの中で閉じ込めますってことかな。

$.fn.extend

jQueryオブジェクトに紐づけて使うもの

もうひとつ、よく似たメソッドとして、$.fn.extend メソッドがあります。こちらは jQuery に対してインスタンス メソッドを追加するためのメソッドです。たとえば以下は、現在の要素セットに対して一律、指定された色で枠線を付与する border メソッドを追加しています。 書き方は

$.fn.extend({ 
  border: function(color) { 
     // 現在の要素セットに対して、スタイルを適用 
    return $(this).css('border', 'solid 5px ' + color); 
  } 
}) 
// 呼び出し
$('li.new').border('Blue'); 

ってな感じでjQueryインスタンス（jQueryオブジェクト）のメソッドとして書く

ちなみに

メソッドとは関数に近い概念
関数とメソッドの違い - ぬけラボ