YuriBlo02

2018年09月18日

たまにド忘れするので、jQueryのセレクタまとめました。

基本的なセレクタ

１．要素で指定する

$("要素名")

２．idで指定する

$("#id名")

※セレクタでidを指定する場合は「#」を使用する

３．classで指定する

$(".class名")

※セレクタでclassを指定する場合は「.」を使用する

複数条件での指定

１．AND条件での指定

要素、id、class等をつなげて記載する

例：「test」というidを持つdiv要素
$("div#test")

例：「test」と「dummy」の２つのclassを持つ要素
$(".test.dummy")

２．OR条件での指定

要素、id、classなどを「,」でつなげて記載する

例：「test」classまたは「dummy」classを持つ要素
$(".test,.dummy")

例：a要素または「test」というidを持つ要素
$("a,#test")

階層での指定

１．先祖要素を指定する

先祖要素＋スペース＋対象要素となるように記載する

例：「test」idを持つ要素内にある「dummy」classを持つ要素
$("#test .dummy")

２．親要素を指定する

「>」で「親 > 子」となるように記載する

例：「test」idを持つ要素を親に持つ「dummy」classを持つ要素
$("#test > .dummy")

兄弟要素の指定

１．前後関係を指定して要素を指定する１

「+」でつなげて記載する

例：「test」idを持つ要素の次の「dummy」classを持つ要素（兄弟要素）
$("#test + .dummy")

２．前後関係を指定して要素を指定する２

「~」でつなげて記載する

例：「test」idを持つ要素以降に出てくる「dummy」classを持つ全ての要素（兄弟要素）を指定
$("#test ~ .dummy")