【jQuery】セレクタとトラバース

Toma0916 22views 更新:2016年9月21日

jQueryで目的の要素を取得するために。

【セレクタ】

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

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

$(“.class1″) CLASS名 class1 の要素を選択

$(“.class1 .class2″) CLASS名 class1 の要素の中にあるCLASS名 class2 の要素を選択

$(“.class3, .class4″) CLASS名 class3、もしくはCLASS名 class4 の要素を選択

$(“.class5″, “#id1″) ID名 id1 の要素の中にあるCLASS名 class5 の要素を選択

$(“.class6.class7″) CLASS名 class6 と class7 2つ持つ要素を選択

$(“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」が含まれている要素を選択

$(“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 が指定されていない要素を選択

【トラバース】

$(“#id1″).find(“.class7″) ID名 id1 の要素の中にあるCLASS名 class7 の要素を選択

$(“ul”).children(“.class6″) ulタグ の子要素にある CLASS名 class6 の要素を選択

$(“li.class6″).parent() CLASS名 class6 があるliタグを持つ親要素を選択

$(“li.class6″).parent(“#id1″) CLASS名 class6 があるliタグを持つ親要素でID名 id1 の要素を選択

$(“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タグの要素を選択

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません