【jQuery】要素セレクタについて・その1

要素セレクタってなんだい？

さて「3歩進んで2歩下がる勉強法」ということで、一旦jQueryの記述の基本のおさらいです。

$(function(){
	$("セレクタ").jQueryの命令
});

jQueryの記述の基本は「何を」「どうする」です。
その「何を」にあたる部分が「要素セレクタ」と呼ばれています。
まあ、単純に「要素を選ぶ（セレクト）する」ということですかね。
もっと複雑になってくると、その前に「何を」「どうしたら」という条件文が入ってくるのですが、本日はそのひとつ手前。

それでは「pタグについてCSSのcolorプロパティの値を#F00に変更する」の記述を書いてみましょう。

あ、ここで「CODEPEN」が登場します。「HTML」や「JS」を確認しながら進めてください。

$(function(){
	$("p").css("color","#F00");
});

See the Pen bNxJKm by Info Markup (@Info_Markup) on CodePen.

■ IDセレクタ / CLASSセレクタ

特定のID属性を持つ要素に命令ができます。

$(function(){
	$("p#first").css("color","#F00");
});

See the Pen dPqLqR by Info Markup (@Info_Markup) on CodePen.

id属性の値に#を付けたものをセレクタとして利用します。CSSの指定の仕方と同じですね。
また、ご想像通りかと思いますが「CLASSセレクタ」というものもあります。
指定の仕方はもう言わずもがなですよね。

■ 子孫セレクタ

複数のセレクタをスペース区切りで指定することによって、特定の要素内の内側にある要素に指定することができます。

$(function(){
	$("#first span").css("color","#F00");
});

See the Pen ZYMZVY by Info Markup (@Info_Markup) on CodePen.

■ ユニバーサルセレクタ

CSSにも同じユニバーサルセレクタ（名前がかっこいいからちょっと好き）がありますが、機能としては同じ「どんなやつにでもまるっと指定する」って感じですかね。
「*（アスタリスク←こいつも名前がかっこいいからちょっと好き）」を使って指定します。

$(function(){
	$("p *").css("color","#F00");
});

See the Pen EaeJry by Info Markup (@Info_Markup) on CodePen.

上記の場合「pタグの子要素はなんでもかんでも#F00」ということになります。

■ グループセレクタ

複数のセレクタをカンマ区切りで指定します。

$(function(){
    $("#first , #third").css("color","#F00");
});

See the Pen LEJvaL by Info Markup (@Info_Markup) on CodePen.

■ 子セレクタ

特定の要素の直下に配置されているものを指定できます。
>（大なり）で指定するなり。（greater thanって読みます）

$(function(){
    $("p > strong").css("color","#F00");
});

See the Pen GgXLLG by Info Markup (@Info_Markup) on CodePen.

#thirdのstrongはspanの中で直下じゃないから、指定されません。

■ 隣接セレクタ

特定の要素の「次」の要素に指定できるセレクタです。+（プラス）で指定します。

$(function(){
    $("#second + p").css("color","#F00");
});

See the Pen ByOeWe by Info Markup (@Info_Markup) on CodePen.

#secondの「次のpタグ」だから、#thirdが#F00になりますね。

あれ…、これってCSSの指定の＠あそｋだおｐｓｋｄ＠ぽあｋ…

と思われた方は大正解です。
この指定の仕方の「易しさ」が「CSSがわかっているとjQuery先生と仲良くなりやすい」と言われている理由のひとつです。
この後、まだまだ指定の方法は続くのですが、今回はここまで。

最後におまけでクイズです。
今回の記事の中にたくさん「テキスト」と書きましたが、ひとつだけ「テキスト」じゃないところがあります。

「CODEPEN」も面白かったので、ぜひ使ってみてください。