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");
コメント