$.fnを使うと?
jQueryのオブジェクトに新しいメソッドを作成して、追加することができる。
$.fnメソッドを記述しているJSファイルを読み込めば、どこのHTMLファイル内でも作成したメソッドを使うことができる。
※オリジナルのメソッドを作成して、他のファイルでもそのJSファイルを取り込めば使えるよということ。
$.fnというエイリアスとは?
※エイリアスとは短縮したニックネームのようなもの
$.fn は jQuery.prototype のための標準的なエイリアスであり、jQuery ライブラリにおいてこれは決まっています。
開発当初から$.fn は jQuery.prototype のショートカットとして導入され、jQuery の全てのインスタンス(jQuery オブジェクト)がこれを継承しています。
このエイリアスを使うことで、jQuery プラグインをより簡単に書くことができ、jQuery の機能を拡張する際に便利です。$.fn を使用して定義されたメソッドやプロパティは、どの jQuery オブジェクトでも使用可能になるため、開発者は新しい機能を容易に jQuery の全体に適用できます。
jQuery.prototypeとは
まず「プロトタイプ」という概念について少し知る必要があります。
プロトタイプは、JavaScriptというプログラミング言語の特徴の一つで、オブジェクトが共有するメソッドやプロパティ(特性や機能)を管理する仕組みです。
プロトタイプとは何か?
プロトタイプは、あるオブジェクトの「設計図」のようなものです。
この設計図に書かれているメソッド(行動や作業の仕方)やプロパティ(情報やデータ)は、そのオブジェクトを使う全てのものに適用されます。
jQuery.prototypeの役割とは?
jQuery.prototypeは、jQueryというツールで作られた全てのオブジェクトが共通で使えるメソッドやプロパティを保持しています。
これによって、jQueryを使っているどのオブジェクトも、`jQuery.prototype`に定義されている機能を使うことができます。
例えば、jQueryでよく使う`.hide()`や`.show()`といったメソッドは、`jQuery.prototype`に定義されています。これにより、どんなjQueryオブジェクトでも`.hide()`や`.show()`を使って要素を隠したり表示したりすることができるのです。
$.fnとの関連
`$.fn`は`jQuery.prototype`の短縮形(エイリアス)です。これを使うことで、新しいメソッドを簡単に追加できます。
たとえば、あなたが新しい機能「点滅させる」を作りたい場合、以下のように書けば、すべてのjQueryオブジェクトでその機能を使えるようになります:
$.fn.blink = function() {
this.fadeOut(500).fadeIn(500);
};
これで、`$('p').blink();` のようにして、ページの中の段落を点滅させることができます。
まとめ
jQuery.prototypeは、jQueryで作られたオブジェクトが共有する「設計図」です。この設計図に書かれたメソッドやプロパティは、jQueryを使う全てのオブジェクトで利用可能です。
$.fnを使って、この設計図に新しい機能を簡単に追加することができます。これにより、プログラミングがより柔軟で強力になります。