初心者向けに、jQueryの「メソッド」とは？とメソッド一覧についてを記載していきます。
jQueryセレクタの使い方は、CSSと似ているので理解できたけど、「メソッドって何があるの？」や「メソッドで何ができるの？」または、そもそも「メソッドってなに？」などの疑問を抱える初心者に向けて、解説していこうと思います。
jQueryのメソッドも種類が豊富にありますが、HTMLとCSSに比べると、使用頻度が低いため、なかなか初心者の方が覚えるには難しいことと思います。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
HTMLに記述された要素を指定する部分、「セレクタ」については前回記載いたしました。
今回は、セレクタで指定した要素に、何らかの「命令」を出す部分、「メソッド」について記載してきます。
上記の「何をする」部分、つまり何をするのか命令を出してあげなくてはプログラムは動きません。この命令をメソッドで記述していきます。
jQueryのメソッドには、色々なタイプのメソッドが用意されています。どんなメソッドがあるのか、大まかに記載してみます。
要素のCSSを操作するためのメソッドになります。前回のセレクタの記事ではこのCSS系のメソッドのひとつ、css()を使い文字色を変更していました。
要素の属性を操作するためのメソッド。例えばフォーム内のinput要素のvalue属性を操作したり、a要素のtarget属性、img要素のhref属性を操作したりすることができます。
HTMLそのものを操作するタイプのメソッド。HTMLに新しく要素を追加したり、逆に要素を削除したりすることができます。Webページをインタラクティブに書き換えることができる、とても便利なメソッドです。
トラバースとは「横断」という意味の言葉になります。HTMLを横断して、その中から要素を検索するようなイメージのメソッドです。セレクタがあるから使用頻度は少ないのでは！と思うかもしれませんが、使い始めるととても便利なメソッドです。
要素をアニメーションさせたり、フェードさせたりと、エフェクトを加えるためのメソッドです。これを使い始めるとjQueryの世界が広がりだすメソッドで、見た目にも楽しいメソッドになります。
プログラムを動かすためには、何かのきっかけが必要になります。例えばクリックしたときなど、マウスを乗せた時など。イベント系メソッドは、このようなきっかけを指定することができるメソッドになります。
jQueryでは、Ajaxを操作することも可能です。Ajaxを利用する際には、このAjax系メソッドを利用します。
ざっくりとメソッドの分類を大まかに分けると、上記のようになります。覚える必要はないことと思いますが、どのような分類があるのかを理解しておく必要はあることと思います。
JavaScriptに馴染みのない初心者にとっては、「jQueryメソッドをもっと簡単に」と言われても、訳が分からない事と思います。例えば、これから記載する下記のような風に考えると比較的理解しやすいことと思います。
実際には上記のように、色々なメソッドを組み合わせて、1つのプログラムとして動かすことが少なくありません。またメソッドひとつだけで終わるプログラムも多々あります。
それでは最後に、実際の使い方の記載をする前に、jQueryメソッドの一覧を記載してみます。
やはりjQueryのメソッドもすべて覚えるのは、難しいことと思いますので、一覧があるととても便利ですね！
| .addClass() | DOM要素にclass属性と値を追加する |
|---|---|
| .css() | DOM要素にCSSを追加したり取得したり。 |
| jQuery.cssHooks | 独自のCSSプロパティを設定する |
| .hasClass() | 指定のクラス名が設定されているか確認する。 |
| .height() | DOM要素の高さを取得したり設定したり。 |
| .innerHeight() | DOM要素の高さを取得する。paddingは含むがborderは含まれない。 |
| .innerWidth() | DOM要素の幅を取得する。paddingは含むがborderは含まれない。 |
| .offset() | DOM要素の原点(Document)からの距離を取得する |
| .outerHeight() | DOM要素の高さを取得。paddingは含むがborderは含まれない。 |
| .outerWidth() | DOM要素の幅を取得。paddingは含むがborderは含まれない。 |
| .position() | positionがstatic以外の親要素からの位置を返す。 |
| .removeClass() | 要素に設定されている指定のクラスを削除する。 |
| .scrollLeft() | 右にどのくらいスクロールされたか、またはするか |
| .scrollTop() | 下にどのくらいスクロールされたか、またはするか |
| .toggleClass(className) | classNameで指定されたクラス名があれば削除、なければ追加される。 |
| .width() | DOM要素の幅を取得したり設定したり。 |
| .addClass() | DOM要素にクラスを追加する |
|---|---|
| .attr() | DOM要素の属性の読み書きをおこなう |
| .hasClass(className) | class属性がclassNameを持っているかチェックする |
| .html() | 要素内に含まれるHTMLの取得、設定をおこなう |
| .prop() | DOM要素のプロパティを読み書きする。 |
| .removeAttr() | 要素の属性を削除する。 |
| .removeClass() | 要素に設定されている指定のクラスを削除する。 |
| .removeProp(propertyName) | 要素のプロパティを削除する |
| .toggleClass(className) | classNameで指定されたクラス名があれば削除、なければ追加される。 |
| .val() | value属性の値を取得したり設定したり。 |
| .addClass() | クラス属性を設定する。 |
|---|---|
| .after() | 指定要素の後ろに要素を追加する |
| .append() | DOMツリーに要素を追加 |
| .appendTo() | DOMツリーに要素を追加 |
| .attr() | DOM要素の静的な属性を取得する |
| .before( content [, content ] ) | 選択されているDOM要素の前にcontentを追加 |
| .clone() | DOM要素をコピーする。 |
| .css() | DOM要素にCSSを設定する |
| .detach([selector]) | DOMツリーからselectorを削除する。イベントハンドラやデータは失われない。 |
| .empty() | DOMツリーからも実際のデータも削除。 |
| .hasClass(className) | DOM要素がclassNameというクラス属性を持っていればtrue |
| .height() | DOM要素の高さを取得したり設定したり。 |
| .html() | jQueryオブジェクトが保持している最初のDOM要素に含まれるHTMLを返す。 |
| .innerHeight() | DOM要素の高さを取得する。paddingは含むがborderは含まれない。 |
| .innerWidth() | DOM要素の幅を取得する。paddingは含むがborderは含まれない。 |
| .insertAfter(target) | jQueryオブジェクトが保持しているDOM要素を target の後ろに挿入する。 |
| .insertBefore(target) | jQueryオブジェクトが保持しているDOM要素を target の前に挿入する。 |
| .offset() | jQueryオブジェクトが持つ最初のDOM要素(indexが0のもの)のDocumentからの位置を取得する。 |
| .outerHeight() | DOM要素の高さを取得。paddingは含むがborderは含まれない。 |
| .outerWidth() | DOM要素の幅を取得。paddingは含むがborderは含まれない。 |
| .position() | .offset()がDocumentからの位置なのに対しposition()はpositionがstatic以外の親要素からの位置を返す。 |
| .prepend() | 選択要素の前に要素を追加する |
| .prependTo( target ) | 選択要素を target の前に挿入する |
| .prop() | DOM要素のプロパティを取得する。 |
| .remove([selector]) | DOMツリーからselectorを削除する。イベントハンドラやデータも削除されるがDOMそのものは残る。 |
| .removeClass() | 要素に設定されている指定のクラスを削除する。 |
| .removeProp(propertyName) | 要素のプロパティを削除する |
| .replaceAll( target ) | target を jQueryオブジェクトにセットされている要素と置換する |
| .replaceWith() | jQueryオブジェクトにセットされている要素を newContent で置換する。 |
| .scrollLeft() | 右にどのくらいスクロールされたか、またはするか |
| .scrollTop() | 下にどのくらいスクロールされたか、またはするか |
| .text() | jQueryオブジェクトにセットされてる要素のテキストデータをセット/ゲットする。 |
| .toggleClass(className) | classNameで指定されたクラス名があれば削除、なければ追加される。 |
| .unwrap() | 対象の要素の親要素を削除する。 |
| .val() | value属性の値を取得したり設定したり。 |
| .width() | DOM要素の幅を取得したり設定したり。 |
| .wrap(wrappingElement) | 対象の要素を wrappingElement で囲む |
| .wrapAll() | 対象の要素をグループとして扱い指定の要素で囲む。 |
| .wrapInner() | 対象の要素の中身をwrappingElementで囲む |
| .add() | jqueryオブジェクトにdom要素を追加した新たなjqueryオブジェクトを作成する |
|---|---|
| .andself() | メソッドチェーンのひとつ前のjqueryオブジェクトと現在のjqueryオブジェクトを一つにまとめる |
| .children([selector]) | jqueryオブジェクトのdom要素の直接の子要素を取得する。テキスト、コメントノードは除く |
| .closest() | セレクタにマッチする直近の親要素を取得する |
| .contents() | テキスト、コメントノードを含む全ての子要素を取得する |
| .each() | jquery オブジェクトが保持しているdom要素に対して繰り返し処理をおこなう。 |
| .end() | 現在のフィルタリング状態をひとつ前の状態に戻す。 |
| .eq() | jqueryオブジェクトにセットされているdom要素からindex番目のdom要素がセットされたjqueryオブジェクトを取得する。 |
| .filter() | jquery オブジェクトが保持しているdom要素に対してさらに条件を指定して絞り込む。 |
| .find() | jquery オブジェクトが保持しているdom要素の子孫を検索する。 |
| .first() | jquery オブジェクトが保持しているdom要素の最初の要素を取得。 |
| .has() | 選択された要素のうち指定されたセレクタに一致する要素の祖先要素を選択。 |
| .is(selector) | 選択されている要素がselectorにマッチする場合trueを返す |
| .last() | 選択された要素のうち最後の要素を取得。 |
| .map() | 選択された要素ごとにコールバックを呼び出し、その帰り値からなるjQueryオブジェクトを返す |
| .next([selector]) | selectorにマッチする直後の弟要素を選択する。 |
| .nextall([selector]) | selectorにマッチする全ての弟要素を選択する。 |
| .nextuntil([selector]) | 対象となる要素からselectorにマッチする弟要素までの間の弟要素を取得する。 |
| .not() | 選択された要素から指定されたセレクタに一致するか関数を呼び出しときにtrueを返す要素を除外 |
| .offsetparent() | 選択された各要素の配置の基準になる祖先要素を選択。 |
| .parent() | 選択された各要素の親要素のうち、指定されたセレクタに一致する要素を選択。 |
| .parents() | 選択された各要素の祖先要素のうち、指定されたセレクタに一致する要素を選択。 |
| .parentsuntil() | 選択された各要素から祖先要素をたどり、指定されたセレクタに一致する最初の要素以前を選択。 |
| .prev([selector]) | selectorにマッチする直前の兄要素を取得する。 |
| .prevall([selector]) | selectorにマッチする兄要素を取得する。 |
| .prevuntil() | 対象となる要素からselectorにマッチする兄要素までの間の兄要素を取得する。 |
| .animate() | アニメーションを設定する」。もっとも柔軟。 |
|---|---|
| .clearQueue([queueName]) | キューを削除する |
| .delay (duration [,queueName]) |
その後に実行されるキューの遅延時間を設定する。 |
| .dequeue([queueName]) | queueNameにエンキューされている関数を1つ実行する。実行された関数は削除される。 |
| .fadeIn() | jQueryオブジェクトが保持しているDOM要素で非表示となっているものを透明度を下げながら表示する。 |
| .fadeOut() | jQueryオブジェクトが保持しているDOM要素で表示となっているものを透明度を上げながら非表示にする。 |
| .fadeTo() | 透明度を変更する。jQueryオブジェクトが持っているDOM要素の透明度をopacityまでdurationで指定した時間で変更する。 |
| .fadeToggle ([duration] [,easing] [,callback]) |
フェード効果付きで要素の表示、非表示を切り替える |
| jQuery.fx.interval | アニメーションのフレームレートを設定する。デフォルトは13ミリ秒。 |
| jQuery.fx.off | アニメーションを無効にする。 |
| .hide() | 表示要素を非表示にする |
| .queue() | キューの実行と設定をおこなう |
| .show() | 非表示要素を表示する |
| .slideDown() | スライドアニメーション付きで非表示要素を表示にする |
| .slideToggle() | スライドアニメーション付きで要素の表示、非表示を切り替える |
| .slideUp() | スライドアニメーション付きで要素を非表示にする |
| .stop() | アニメーションをストップする。 |
| .toggle() | 表示、非表示を切り替える。 |
| .bind() | イベントハンドラを設定する。 |
|---|---|
| .blur() | 対象となる要素からフォーカスが外れたときに実行される処理を登録する。 |
| .change() | DOMのvalue属性の値が変更されたときに実行されるイベントハンドラを設定する。 |
| .click() | クリックイベントハンドラを設定する |
| .dblclick() | ダブルクリックイベントハンドラを設定する |
| .delegate() | イベントハンドラを設定する |
| .die() | 1.7で非推奨、1.9で削除。代わりにoff()を利用 |
| .error() | 1.8で非推奨、3.0で削除されました。代わりに.on( "error", handler )を利用してください。 |
| event.currentTarget | イベントバブリングフェーズの現在のDOM要素。 |
| event.data | イベントハンドラ設定時に設定したオブジェクトはevent.dataに設定される。 |
| event.delegateTarget | イベントを捕捉した要素。 |
| event.isDefaultPrevented() | preventDefault()が実行されてたらtrue |
| event.namespace | イベントに設定された名前空間（namespace）を取得できます。 |
| event.pageX | マウスイベント時のマウスの位置。ドキュメントの原点(左上)からのX座標。 |
| event.pageY | マウスイベント時のマウスの位置。ドキュメントの原点(左上)からのY座標。 |
| event.preventDefault() | このメソッドを実行した場合、通常のイベントアクションは行われない。 |
| event.target | イベントの対象となったDOM要素 |
| event.timeStamp | イベントオブジェクト作成時のUnixタイムスタンプ。 |
| .focus() | focusイベントにイベントハンドラを登録する。 |
| .focusin() | focusinイベントにイベントハンドラを登録する。 |
| .focusout() | focusoutイベントにイベントハンドラを登録する。 |
| .hover() | 要素のmauseenterイベントとmouseleaveイベントにイベントハンドラを登録。 |
| .keydown() | keydownイベントにイベントハンドラを登録する。 |
| .keypress() | keypressイベントにイベントハンドラを登録する。 |
| .keyup() | keyupイベントにイベントハンドラを登録する。 |
| .live() | 1.9で削除。.on()を利用。 |
| .mousedown() | mousedownイベントにイベントハンドラを登録する。 |
| .mouseenter() | マウスが要素の上にのった時に発生するイベントにイベントハンドラを登録する。 |
| .mouseleave() | マウスが要素の上から離れた時に発生するイベントにイベントハンドラを登録する。 |
| .mousemove() | mousemoveイベントにイベントハンドラを登録する。 |
| .mouseout() | mouseoutイベントにイベントハンドラを登録する。 |
| .mouseover() | mouseoverイベントにイベントハンドラを登録する。 |
| .mouseup() | mouseupイベントにイベントハンドラを登録する。 |
| .off() | イベントハンドラを削除する。 |
| .on() | 選択された要素にイベントハンドラを登録する。 |
| .one() | 選択された要素に一度だけ実行されるイベントハンドラを登録する。 |
| .ready(handler) | DOMの初期化が完了した時点でhandlerが呼び出しされる。 |
| .resize() | resizeイベントにイベントハンドラを登録する。 |
| .scroll() | scrollイベントにイベントハンドラを登録する。 |
| .select() | selectイベントにイベントハンドラを登録する。 |
| .submit() | submitイベントにイベントハンドラを登録する。 |
| .trigger() | 対象となる要素で擬似的にイベントを発生させる。 |
という事で今回は、jQuery「メソッド」とは？メソッド一覧につきまして記載いたしました。
一覧をご覧いただければ、ご理解いただけれとおり、沢山のメソッドが存在しますが、実はまだ一部に過ぎません！すべて覚えるのは不可能だと思いますので、基礎的なものの使い方だけを覚え、後はプログラミングを行う都度、調べることが重要なように思います。
上記を見ただけでも、初心者の方は難しいなと、思うかもしれませんが、何事も慣れ！が最重要になりますので、こまめに手を動かし実際にコードを記載することが、最短で身につけるコツのように思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
