jQuery 色々なセレクタ 覚え書き

javascript

jQueryのセレクタ、指定方法のパターンがいくつかあります。
いつも忘れがちなので、基本的でよく利用するものから
あまり使わないけど便利というものまでピックアップしてみます。

 

すべての要素を指定する

$("*")

 

要素名を指定して要素を指定する

$(“body”) // bodyタグ要素を選択
$(“form”) // formタグ要素を選択

 

id名から要素を指定する

$(“#id1″) // ID名 id1 の要素を選択

※IDはユニークなため,反映されるのは基本、一つの要素となる.

 

クラス名から要素を指定する

$(“.class1″) // クラス名 class1 の要素を選択

 

複合条件の指定
『区切りなしでAND、カンマ区切りでOR。』になる。
クォートの付け方によっても意味が変わるため注意。

$(“.class1 .class2″) // クラス名 class1 の要素の中にあるクラス名 class2 の要素を選択
$(“.class3, .class4″) // クラス名 class3、もしくはクラス名 class4 の要素を選択
$(“.class5″, “#id1″) // ID名 id1 の要素の中にあるクラス名 class5 の要素を選択
$(“.class6.class7″) // クラス名 class6 と class7 2つ持つ要素を選択

 

$("#id名 > 要素名") // id名直下のa要素を指定する検索対象は直下のa要素のみ
$("要素名A + 要素名B") // 要素名Aの次に現れる要素名Bを指定する
$("要素名A ~ 要素名B") // 要素名Aの以降に現れる要素名Bの全てを指定する
$(“ul li:first”) // すべてのulタグ内をあわせたliタグの中の最初の要素を選択
$(“ul li:first-child”) // 各ulタグ内にあるそれぞれのliタグの最初の要素を選択
$(“ul li:last”) // すべてのulタグ内をあわせたliタグの中の最後の要素を選択
$(“ul li:last-child”) // 各ulタグ内にあるそれぞれのliタグの最後の要素を選択
$(‘li:not(“.class6″)’) // liタグでCLASS名 class6 が指定されていない要素を選択

 

要素名A内の要素名Bで偶数番目の要素を取り出す

$("要素名A 要素名B:even")

要素名A内の要素名Bで奇数番目の要素を取り出す

$("要素名A 要素名B:odd")

要素名A直下の要素名Bでn番目の要素を取り出す

$(" 要素名A > 要素名B:eq(n)")

要素名A直下の要素名Bでn番目以前の要素すべて(n番目の要素は含まず)を取り出す

$(" 要素名A > 要素名B:lt(n)")

要素名A直下の要素名Bでn番目以降の要素すべて(n番目の要素は含まず)を取り出す

$(" 要素名A > 要素名B:gt(n")

textという文字列を含む要素(大文字小文字の区別あり)を取り出す

$(" 要素名B:contains('text')")

内容を持つ要素を取り出す

$(" 要素名B:parent")

内容を持たない要素を取り出す

$(" 要素名B:empty")

hasによって指定された要素名Bを含む要素名A要素を取り出す

$(" 要素名A:has(要素名B)")
$("div:has(strong)").addClass("important");

a個おきに要素を指定するan+bの場合,「aで割った時にb余る」要素を取り出す

$(" 要素名A > 要素名B:nth-child(an+b)")

要素名Bが要素名Aのただひとつの子要素の場合のみを取り出す

$(" selectorA > selectorB:only-child")

属性フィルタ

$(“a[href]”)

aタグのhref属性がある要素を選択

$(“a[href = ‘#pagetop’]”)

aタグのhref属性の値が「#pagetop」の要素を選択

$(“a[href != ‘#pagetop’]”)

aタグのhref属性の値が「#pagetop」でない要素を選択

$(“a[href ^= ‘#link’]”)

aタグのhref属性の値が「#link」から始まる要素を選択

$(“a[href $= ‘bottom’]”)

aタグのhref属性の値が「bottom」で終わる要素を選択

$(“a[href *= ‘page’]”)

aタグのhref属性の値に「page」が含まれている要素を選択

$('input[name]'); // タグ名="input" and name属性を持つ
$('input[name="quiz1"]'); // タグ名="input" and name属性が"quiz1"と一致
$('input[name!="quiz1"]'); // タグ名="input" and name属性が"quiz1"と不一致
$('input[name^="quiz1"]'); // タグ名="input" and name属性が"quiz1"と先頭一致
$('input[name$="quiz1"]'); // タグ名="input" and name属性が"quiz1"と末尾一致
$('input[name*="quiz1"]'); // タグ名="input" and name属性が"quiz1"と部分一致

使用可否

$('input[type="text"]:enabled'); // 入力可能テキストボックス
$('input[type="text"]:disabled'); // 入力禁止テキストボックス

選択状態

$('input[type="checkbox"]:checked'); // 選択済チェックボックス
$('input[type="radio"]:checked'); // 選択済ラジオボタン
$('select > option:selected'); // リストボックス・コンボボックス内の選択済要素

可視性

$('div:hidden'); // 不可視状態になっているdiv要素(display:noneも含む)
$('input:hidden'); // 不可視状態になっているinput要素≒$('input[type="hidden"]');
$('div:visible'); // 可視状態になっているdiv要素

単純に”:hidden”だけの場合、head,title,scriptタグ等にもマッチする可能性があるため注意。

jQueryメソッドを使用してDOMの中を移動・走査して要素を取得する方法を
トラバースといいますね。トラバースの多くは子孫セレクターで解決可能です。
トラバースを使用するとパフォーマンスが良くなるといわれることがありますが、状況によっては異なる場合もあります。
子孫セレクターを使用した場合と大差ない場合も多いです。
何かと使いやすい面もあるため、トラバースも覚えておきましょう。

$(“#id1″).find(“.class7″)

ID名 id1 の要素の中にあるCLASS名 class7 の要素を選択

$(“ul”).children(“.class6″)

ulタグ の子要素にある CLASS名 class6 の要素を選択

親-子関係

$("#root > .node"); // 「ID="root"」を親に持つ「クラス名="node"」
$(".node").parent("#root"); // 「クラス名="node"」の親のうち「ID="root"」の要素
$(“li.class6″).parent()

CLASS名 class6 があるliタグを持つ親要素を選択

$(“li.class6″).parent(“#id1″)

CLASS名 class6 があるliタグを持つ親要素でID名 id1 の要素を選択

先祖-子孫関係

$("#root .node"); // 「ID="root"」を先祖に持つ「クラス名="node"」
$(".node").parents("#root"); // 「クラス名="node"」の先祖のうち「ID="root"」の要素
$(“li.class6″).next()

CLASS名 class6 があるliタグに隣接する弟要素を選択

$(“li.class6″).next(“.class7″)

CLASS名 class6 があるliタグに隣接する弟要素の中でCLASS名 class7 の要素であれば選択
(それ以外であれば選択しない)

$(“li.class7″).prev()

CLASS名 class7 があるliタグに隣接する兄要素を選択

$(“li.class7″).next(“.class6″)

CLASS名 class7 があるliタグに隣接する兄要素の中でCLASS名 class6 の要素であれば選択
(それ以外であれば選択しない)

$(“a[href ^= ‘#link’]”).closest(“li”)

aタグのhref属性の値が「#link」から始まる要素の最も近いliタグ(親要素)を選択

$(“li”).slice(“3,12″)

すべてのliタグをあわせた0から数えて3個目から12個目までの間の要素を選択

$(“li”).find(“a”).css({color: ‘white’}).end()

liタグ内にあるaタグにスタイルを追加した後、直前の要素を選択

$(“li”).not(“li.class6″)

すべてのliタグでCLASS名 class6 が指定されていない要素を選択

$(“a[href *= ‘middle’]”).first()

aタグのhref属性の値に「middle」が含まれている一番最初にある要素を選択

$(“a[href *= ‘middle’]”).last()

aタグのhref属性の値に「middle」が含まれている一番最後にある要素を選択

兄-弟関係

$(“p”).siblings()

pタグの兄弟要素を選択

$(“p”).siblings(“p”)

pタグの兄弟要素の中でpタグの要素を選択

「属性Bが値C」かつ「属性Dをもつ」,「要素A」を取り出す

$("要素A[属性B=値C] [属性D]")

見出し要素すべてを取り出す

$(":header")

属性Bを持たない要素Aを取り出す

$("要素A:not([属性B])")

全てのフォーム要素を取り出す

$(":input")

その他の指定方法対象:textテキストボックス:passwordパスワード入力ボックス:radioラジオボタン:checkboxチェックボックス:fileファイル選択ボックス:submit送信ボタン:image画像ボタン:resetリセットボタン:button全てのボタン:hidden隠し要素要素A内のフォーム要素が利用可能な状態である場合取り出す

$("要素A:has(:enabled)")

その他の指定方法対象:dsabled利用不可の状態:checkedチェック状態:selsected選択状態:hidden非表示の状態:visible表示状態:animatedアニメーション中の状態その他よく使う指定方法jQeryを使用してイベントリスナで色々操作したい時などにthisを使って要素を指定しますが,その場合の指定方法について,よく使うパターンを挙げておきます

その要素そのものを取り出す

$(this);

要素の親要素Aを取り出す

$(this).parent("要素A");

要素の子要素(子孫)の要素Aを取り出す

$("要素A",this);

要素の子要素Aを取り出す

$(this).children("要素A");

コメント

タイトルとURLをコピーしました