2018年09月18日
jQueryセレクタのまとめ
たまにド忘れするので、jQueryのセレクタまとめました。
基本的なセレクタ
1.要素で指定する
$("要素名")
2.idで指定する
$("#id名")
※セレクタでidを指定する場合は「#」を使用する
3.classで指定する
$(".class名")
※セレクタでclassを指定する場合は「.」を使用する
複数条件での指定
1.AND条件での指定
要素、id、class等をつなげて記載する
例:「test」というidを持つdiv要素
$("div#test")
$("div#test")
例:「test」と「dummy」の2つのclassを持つ要素
$(".test.dummy")
$(".test.dummy")
2.OR条件での指定
要素、id、classなどを「,」でつなげて記載する
例:「test」classまたは「dummy」classを持つ要素
$(".test,.dummy")
$(".test,.dummy")
例:a要素または「test」というidを持つ要素
$("a,#test")
$("a,#test")
階層での指定
1.先祖要素を指定する
先祖要素+スペース+対象要素となるように記載する
例:「test」idを持つ要素内にある「dummy」classを持つ要素
$("#test .dummy")
$("#test .dummy")
2.親要素を指定する
「>」で「親 > 子」となるように記載する
例:「test」idを持つ要素を親に持つ「dummy」classを持つ要素
$("#test > .dummy")
$("#test > .dummy")
兄弟要素の指定
1.前後関係を指定して要素を指定する1
「+」でつなげて記載する
例:「test」idを持つ要素の次の「dummy」classを持つ要素(兄弟要素)
$("#test + .dummy")
$("#test + .dummy")
2.前後関係を指定して要素を指定する2
「~」でつなげて記載する
例:「test」idを持つ要素以降に出てくる「dummy」classを持つ全ての要素(兄弟要素)を指定
$("#test ~ .dummy")
$("#test ~ .dummy")
タグ:JavaScript jQuery
【このカテゴリーの最新記事】
-
no image
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/8108022
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック