セレクターまとめ

jQueryとは、簡単な記述でwebページに動きを加えることができるJavaScriptライブラリ。

jQueryを利用したスクリプトでは

1.指定したいHTML要素を「セレクター」で指定

2.操作したい内容

を記述します。

ここでは、HTMLの要素を取得するために使用するjQueryの基本のセレクターをまとめてみました。

よく使用されるセレクター 

要素セレクター：特定の要素を指定する

 $("h1")

idセレクター：特定のid属性を持つ要素

 $("#ID名")

クラスセレクター：特定のclass属性を持つ要素

 $(".クラス名")

子孫セレクター：特定の要素の内側にある要素

 $("ul li")

ユニバーサルセレクター：全ての要素

 $("*")

グループセレクター：複数のセレクターを指定

 $("セレクター1,セレクター2")

子セレクター：特定の要素の直下の子要素

 $("親要素 > 子要素")

隣接セレクター：特定の要素の次の要素

 $("要素1 + 要素2") 

疑似クラスを使ったセレクター

否定疑似クラス：いくつかある特定の要素のうち()内以外の要素

$("要素1:not(要素2)")

last-child疑似クラス：要素内の最後の要素

$("要素:last-child")

first-child疑似クラス：要素内の最初の要素

$("要素:first-child")

nth-child疑似クラス：要素内の指定した番号の要素

$("要素:nth-child(番号)")

first-of-type疑似クラス：同一要素内で最初にあたる要素

$("要素:first-of-type")

last-of-type疑似クラス：同一要素内で最後にあたる要素

$("要素:last-of-type")

jQuery独自のセレクター

firstセレクター：指定した要素の最初の要素

$("要素:first")

lastセレクター：指定した要素の最後の要素

$("要素:last")

evenセレクター：指定した要素の偶数番目の 要素

$("要素:even")

oddセレクター：指定した要素の奇数番目の要素

$("要素:odd")

eqセレクター：指定した番号の要素

$("要素:eq(番号)")

ltセレクター：指定した番号より前の要素

$("要素:lt(番号)")

gtセレクター：指定した要素より後の要素

$("要素:gt(番号)")