初心者向け：jQuery「メソッド」とは？メソッド一覧

初心者向けに、jQueryの「メソッド」とは？とメソッド一覧についてを記載していきます。

jQueryセレクタの使い方は、CSSと似ているので理解できたけど、「メソッドって何があるの？」や「メソッドで何ができるの？」または、そもそも「メソッドってなに？」などの疑問を抱える初心者に向けて、解説していこうと思います。

jQueryのメソッドも種類が豊富にありますが、HTMLとCSSに比べると、使用頻度が低いため、なかなか初心者の方が覚えるには難しいことと思います。

という事で、それでは今回はッ、

・jQueryメソッドは何をするもの？
・jQueryメソッドをもっと簡単に
・jQueryメソッド一覧

上記について記載していこうと思います…。

jQueryメソッドは何をするもの？

HTMLに記述された要素を指定する部分、「セレクタ」については前回記載いたしました。
今回は、セレクタで指定した要素に、何らかの「命令」を出す部分、「メソッド」について記載してきます。

$(“セレクタ”).メソッド(パラメータ);
-↑要素の指定-↑何をする「命令」

上記の「何をする」部分、つまり何をするのか命令を出してあげなくてはプログラムは動きません。この命令をメソッドで記述していきます。

jQueryのメソッドには、色々なタイプのメソッドが用意されています。どんなメソッドがあるのか、大まかに記載してみます。

CSS系メソッド

要素のCSSを操作するためのメソッドになります。前回のセレクタの記事ではこのCSS系のメソッドのひとつ、css()を使い文字色を変更していました。

属性系メソッド

要素の属性を操作するためのメソッド。例えばフォーム内のinput要素のvalue属性を操作したり、a要素のtarget属性、img要素のhref属性を操作したりすることができます。

HTML系メソッド

HTMLそのものを操作するタイプのメソッド。HTMLに新しく要素を追加したり、逆に要素を削除したりすることができます。Webページをインタラクティブに書き換えることができる、とても便利なメソッドです。

トラバース系メソッド

トラバースとは「横断」という意味の言葉になります。HTMLを横断して、その中から要素を検索するようなイメージのメソッドです。セレクタがあるから使用頻度は少ないのでは！と思うかもしれませんが、使い始めるととても便利なメソッドです。

エフェクト系メソッド

要素をアニメーションさせたり、フェードさせたりと、エフェクトを加えるためのメソッドです。これを使い始めるとjQueryの世界が広がりだすメソッドで、見た目にも楽しいメソッドになります。

イベント系メソッド

プログラムを動かすためには、何かのきっかけが必要になります。例えばクリックしたときなど、マウスを乗せた時など。イベント系メソッドは、このようなきっかけを指定することができるメソッドになります。

Ajax系メソッド

jQueryでは、Ajaxを操作することも可能です。Ajaxを利用する際には、このAjax系メソッドを利用します。

ざっくりとメソッドの分類を大まかに分けると、上記のようになります。覚える必要はないことと思いますが、どのような分類があるのかを理解しておく必要はあることと思います。

jQueryメソッドをもっと簡単に

JavaScriptに馴染みのない初心者にとっては、「jQueryメソッドをもっと簡単に」と言われても、訳が分からない事と思います。例えば、これから記載する下記のような風に考えると比較的理解しやすいことと思います。

リンクにマウスを乗せたとき（イベント系メソッド）、リンクのtitle属性を取得して（属性系メソッド）、それをp要素で作った吹き出しにして（HTML系メソッド）、ツールチップとしてフェードアウト（エフェクト系メソッド）で表示する。

実際には上記のように、色々なメソッドを組み合わせて、1つのプログラムとして動かすことが少なくありません。またメソッドひとつだけで終わるプログラムも多々あります。

jQueryメソッド一覧

それでは最後に、実際の使い方の記載をする前に、jQueryメソッドの一覧を記載してみます。
やはりjQueryのメソッドもすべて覚えるのは、難しいことと思いますので、一覧があるととても便利ですね！