![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
$(“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 が指定されていない要素を選択 [ トラバース ] 要素については先祖、親子、兄弟という階層が存在します。 <div> <ul> <li>兄</li> <li>この要素から見て....ul要素は親、div要素は先祖</li> <li>弟</li> </u/> ul要素からみるとli要素は子、div要素は親ということになります。 </div> 以下説明に子要素や兄要素等の言葉がでてきますが、簡単に説明すると上記のような感じなのでイメージできれば簡単です。 $(“#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タグの要素を選択 本当にほしかったのはこういうブログだったんだ 
コメント： 
|
