【jQuery】代表的な要素の指定方法

jQueryで「特定の要素(pタグやdivタグなど)を取得して操作する」時は、セレクタを指定して取得します。

たとえば以下のコードは、「pタグの文字を赤にする」というスクリプトです。

$("p").css("color", "red");

セレクタ指定部分は、$("p")の部分で、全てのpタグを取得して文字を赤にすることができます。

セレクタの指定は、基本的にCSSでセレクタを指定する時と同じです。

そのため、jQueryを使えばJavaScriptをそこまで理解できていなくてもHTMLとCSSが理解できていれば簡単にスクリプト動作を書くことができます。

これがjQueryが幅広く利用されている理由の1つですね。

しかしセレクタ指定方法がCSSと基本同じといっても、少し異なる点があったりします。また、jQueryを学び始めたばかりの方にとってはCSSと同じ様に書くといわれてもミスをしそうでこわいですよね。

今回は、コピペで使えるように代表的なjQueryのセレクタ指定方法についてまとめました。

jQueryのセレクタ指定方法一覧

取得した要素はテキストが赤になる、という簡単なスクリプトを例に解説します。

タグ名を指定

pタグやdivタグなどのHTMLタグを指定します。

ページ内の全てのpタグに適用されます。

See the Pen jQuery書き方1 by spiqa design (@spiqa_design) on CodePen.

name属性を指定

name属性に指定したname名を指定します。

ブラケット( [] )で囲むことと、name名(今回の場合はtext)にダブルクォーテーションがついていないことにご注意ください。

See the Pen jQuery書き方2 by spiqa design (@spiqa_design) on CodePen.

id名を指定

id名を指定します。CSSと同様、頭に「#」を入れます。

最も使用する指定方法だと思います。

See the Pen jQuery書き方3 by spiqa design (@spiqa_design) on CodePen.

class名を指定

class名を指定します。CSSと同様、頭に「.」を入れます。

textクラスを指定した全ての要素に適用されます。

See the Pen jQuery書き方4 by spiqa design (@spiqa_design) on CodePen.

ちなみに上記コードのように複数の要素を取得して操作するのは、JavaScriptでは記述が複雑になります。

これだけ簡単な記述で実装出来るのはjQueryを使う大きなメリットです。

以下記事でそれぞれ解説していますので気になった方はご参考ください！

JavaScriptで複数の要素を取得する方法はこちら

【jQuery】代表的な要素の指定方法

jQueryで複数の要素を取得する方法はこちら

【jQuery】代表的な要素の指定方法

複数の要素を指定

複数の要素を指定したい場合はカンマ( , )で区切ります。

以下コードでは、textクラスとtext2クラスを指定しています。

See the Pen jQuery書き方5 by spiqa design (@spiqa_design) on CodePen.

親要素の子要素に指定

特定の親要素の子要素に指定したい場合は、半角スペースで区切ります。

CSSと同じですね。

以下コードの場合は、text-wrapクラスを指定したdivタグのtextクラスのみ適用されます。

See the Pen jQuery書き方6 by spiqa design (@spiqa_design) on CodePen.

まとめ

代表的なセレクタ指定方法についてご紹介しました！

今回ご紹介した指定方法を覚えておけば、問題ないと思います。

まだまだ指定方法はありますので、またご紹介いたします！

関連記事はこちら

【jQuery】代表的な要素の指定方法