初心者向けに、jQueryのセレクタ、一覧とセレクタ使い方のコツを記載していきます。
jQueryセレクタの使い方（指定方法）とひと言でいってみても、実は沢山のセレクタ指定方法がございます。こちらでは、「どうやって要素を指定すればいいの？」や「セレクタの複数指定ってどうやるの？」などの疑問が解決できることと思います。
沢山あるセレクタの指定方法は、すべて覚える必要はないことと思いますが、CSSのセレクタと使い方は、ほぼ同じになりますので、基本の良く使うセレクタを覚えておくと便利です。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
以前もご紹介したように、jQueryではセレクタで要素を指定して、メソッドを使って何かをする、というのが基本的な流れになります。そして、このもっとも基本的な一行が、jQueryの基本構文になります。
上記、基本構文の前半部分、セレクタの部分について記載していきます。
まずは約束ごとで、これからサンプルで色々なセレクタを使って要素を指定していきますが、セレクタは、$("セレクタ")というように、$（ドルマーク）ではじまる「()」の中に記述します。基本的に「"」ダブルクォーテーションや「'」シングルクォーテーションで囲んで記述します。
この約束事を守って、サンプルを使いながら、セレクタを解説していきます。とはいうものの、このセレクタはCSSで馴染みがあるものばかりです。難しく考えずに、CSSのセレクタと同じようなものだと考えましょう。
集客に強いホームページ制作サービス概要を見る
予算に合わせたホームページ制作料金プランを見る
下記にセレクタ一覧を記載いたします。
予想以上に多いことが見て取ることができると思います。すべて覚える必要はない事とおもいますが、使うことができると便利なセレクタもあるので、理解しておく必要はあることと思います。
それでは、よく使うセレクタだけサンプルと解説を記載してみます。
要素をそのまま指定する方法です。$("p")と記述すれば、HTML上のすべてのp要素が対象になります。$("li")と記述すれば、全てのli要素が対象となります。
id属性で指定するセレクタです。CSSでの記述と同じように、#（ハッシュ）の後にid名で指定します。 $("#jquery")と指定すれば、HTML上の「jquery」というidが付いた要素を指定することができます。
クラスで指定するセレクタです。$(".jquery")というように、クラス名の前に「.」ピリオドをつけるのもCSSの記述と同じです。
特定の要素の子孫にあたる要素を指定できるのが子孫セレクタになります。多少分かりにくいと思いますので下記にサンプルを記載します。この場合、p要素の中にあるem要素、つまりp要素の子孫にあたるem要素だけに絞って指定できます。
初心者の方は、jQueryを勉強する前にHTML+CSSを学習することが不可欠です。
HTML内には、ふたつのem要素がありますが、p要素内のem要素だけが赤くなります。
*（アスタリスク）で指定するユニバーサルセレクタは、特定の要素ではなく、すべての要素を指定することができます。$("li *")と記述すると、要素をとわずli要素内のすべての子要素を指定することになります。
li要素の中には、em要素やspan要素が記述されていますが、ユニバーサルセレクタを使えば、すべての要素を一度に指定することができます。
複数の要素を一度にまとめて指定できるのが、グループセレクタです。「,」カンマで区切って記述します。
複数のセレクタに同じ処理を加えたい場合に、便利な指定方法になります。
チャイルドセレクタは、名前の通り「子」にあたる要素だけを指定することができるセレクタです。子孫セレクタと混同しそうですが、あくまでも「子」にあたる要素だけで、孫以降は含まないという大きな違いがあります。
li要素の中には、3つのem要素が記述されていますが、li要素の子要素にあたるem要素だけを指定することができます。
隣接セレクタは、指定した2つの要素が隣り合っているときだけ、指定した2つ目の要素（弟要素）を指定するセレクタです。要素同士を「+」プラスでつなぎます。
間接セレクタは、同じ親要素を持つ要素（兄弟要素）で、指定した要素よりも後に登場する弟要素を指定できるセレクタです。要素を「~」チルダでつなぎます。少し分かりにくいことと思いますので、下記サンプルで確認してみてください。
サンプルでは、li要素はすべて同じul要素を親に持っています。つまりli要素同士は、すべて兄弟関係になっています。その中の指定した要素以降を指定できるのが間接セレクタです。サンプルでは、li要素を使ったので、隣同士になっていますが、隣接セレクタと違い、間に他の要素が入っている場合でも有効になります。
:first-child疑似クラスは、一番最初に登場する要素だけを指定できるセレクタです。逆に一番最後を指定できる:last-child疑似クラスといったものもあります。
上記サンプルコードに今度は、:not疑似クラスを付けてみます。:not疑似クラスは、指定した条件以外を指定できるセレクタです。この:not疑似クラスセレクタはとても便利なセレクタで、jQueryのコードでは度々登場します。記述方法は:not()のカッコの中に条件を記述します。
という事で今回は、jQueryセレクタ一覧と良く使うセレクタをサンプルコードと共に記載いたしました。
CSSを記述するときは、古いIEのブラウザでは使えないセレクタも多数ありましたが、jQueryでは、クロスブラウザで構築されているため、CSS3などのセレクタも利用することができます。
今回上記で解説したセレクタの使い方以外も、セレクタ一覧同様まだまだございますが、とりあえず今回解説した使い方ができれば、実際の制作現場でも、何ら問題ないことと思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
初期費用を抑えるライトプランの詳細はこちら
お問い合わせから納品まで 制作の流れを解説
