セレクター・・・jQueryを効かせたい要素の指定方法

jQueryを使うときは、HTMLソースのどの要素(タグ・class・idなど)に何をしてほしいかを明確にしてください。
ここでは「どの要素」をどうやって指定するかを説明します。


sample

テキスト

テキストテキストテキスト

テキスト

テキスト

テキスト


サンプルの解説

<p class="jq">テキスト</p>
<p class="test">テキスト<span>テキスト</span>テキスト</p>
<p class="jq">テキスト</p>
<p class="test">テキスト</p>
<p class="jq">テキスト</p>

上のサンプルのhtmlはこうなっています。
たとえば、ソース内に、spanタグが1つしかない(もしくは全てのspanタグに同じことをしたい)という場合は、セレクターはspanタグになります。

$(function(){
    $('span').css('background-color','#fdf');
})

このように、$('と')でspanを囲ってください(ここでは.css(~)は気にしなくていいです)。
class[test]内のspanタグにだけ、何かしたいという場合は次のように指定します。

$(function(){
    $('.test span').css('background-color','#fdf');
})

cssの記述のように親要素のクラス名のあとにスペースをいれて、子要素のタグを指定します。
class[jq]を設定した全ての要素を指定したい場合は、次のようにします。

$(function(){
    $('.jq').css('background-color','#ddf');
})

こんな感じに、セレクターはcssみたいに指定できます。
サンプルのhtmlにはないですが、idであれば次のように指定できるわけです。

$(function(){
    $('#testest').css('background-color','#ddf');
})

その他のセレクター

ほかにもいろいろ指定の仕方があります。詳細は以下の参考サイトやgoogle先生を参照してください。
偶数番目・奇数番目をしていするとか、使い勝手がいいかなーと思います。

$(function(){
    $("li *").css("color","red");
    //liタグに含まれるすべての要素(ユニバーサルセレクター)を指定

    $("#list01 , #list02").css("color","red");
    //グループセレクター(「,」で区切ったすべてのセレクター)を指定

    $("dd > div").css("color","red");
    //特定の要素の直下に配置された要素(直下セレクター(子セレクター))を指定
    //この場合はddタグの直下のdivタグが子セレクターになるが、dd>div>divの場合、入れ子のdiv(孫セレクター)は対象外。
    //dd>h1>divとなっていた場合、divは直下ではないので対象外。

    $("li#list02 + li").css("color","red");
    //id[list02]の隣接セレクター(特定の要素の次に出現するセレクター)を指定
    //この場合はid[list02]を指定したliタグの閉じタグのすぐ次に来るliタグ

    $("li:first-child").css("color","red");
    //特定のセレクターのうち、最初に登場する要素を指定するセレクター(first-child擬似クラス)を指定

    $("li:not(:first-child)").css("color","red");
    //セレクター内の特定の条件以外の要素を指定するセレクター(否定擬似クラス)を指定

    $("li:last-child").css("color","red");
    //特定のセレクターのうち、最後に登場する要素を指定するセレクター(last-child擬似クラス)を指定

    $("h3 ~ h3").css("color","red");
    //特定のセレクターの後に出現する要素を指定するセレクター(間接セレクター)を指定
    //この場合、最初のh3の次以降にあるh3すべてが対象。

    $("td:empty").css("background-color","#ccc");
    //子要素やテキストを含まない要素(empty擬似クラス)を指定

    $("li:nth-child(3)").css("color","red");
    //セレクターの要素から任意の番号の要素だけを選択(nth-child擬似クラス)を指定
    //偶数番目を指定  →$("li:nth-child(even)")
    //奇数番目を指定  →$("li:nth-child(odd)")
    //3の倍数番目を指定→$("li:nth-child(3n)")

    $("li span:only-child").css("color","red");
    //セレクターに特定の要素が1つだけ含まれる場合、only-child擬似クラスを指定できる→ブラウザによって差異があるっぽい

    $("[id]").css("color","red");
    //特定の属性(attribute)を選択できるセレクター:記述→[attribute]
    //ここではid属性を持つ要素を指定

    $("[title='third']").css("color","red");
    //特定の属性が特定の値を持つ要素を選択できるセレクター:記述→[attribute='value']
    //ここではtitle属性の値がthirdである要素を指定

    $("li[title!='first']").css("color","red");
    //特定の属性が特定の値を持たない要素(element)を選択できるセレクター:記述→element[attribute!='value']
    //ここではliタグのtitle属性の値がfirst以外である要素を指定

    $("li[title^='f']").css("color","red");
    //特定の属性の値が特定の文字列で始まっている要素を選択できるセレクター:記述→element[attribute^='value']
    //ここではliタグのtitle属性の値がfで始まっている要素を指定

    $("li[title$='d']").css("color","red");
    //特定の属性の値が特定の文字列で終わっている要素を選択できるセレクター:記述→element[attribute$='value']
    //ここではliタグのtitle属性の値がdで終わっている要素のを指定

    $("li[title*='ir']").css("color","red");
    //特定の属性の値が特定の文字列を含んでいる要素を選択できるセレクター:記述→element[attribute*='value']
    //ここではliタグのtitle属性の値にirを含んでいる要素を指定

    $("li[title^='f'][title*='th']").css("color","red");
    //複数の属性セレクターを同時に指定することも可能:記述→element[attributeFilter1][attributeFilter2]
    //ここではliタグのtitle属性の値がfで始まり、thを含んでいる要素を指定

    $("li:first").css("color","red");
    $("li:last").css("color","red");
    //セレクターの中から最初の要素をfirstフィルター、最後の要素をlastフィルターで指定できる:jQuery独自フィルター→first/last
    //first-child(last-child)擬似クラスは共通の親要素を持つ要素から最初(最後)の要素を選択する。
    //親要素がliのとき、リストの塊が複数あればそれぞれの塊ごと(それぞれのul/olタグごと)に最初(最後)の要素を選択する。
    //first(last)フィルターは指定したすべてのセレクタで最初(最後)の要素を選択する。
    //リストの塊が複数あっても、トータルで最初(最後)の要素を選択する。つまりのul(ol)タグの最初のli(最後のul(ol)タグの最後のli)が選択される。

    $("li:even").css("color","red");
    $("li:odd").css("color","blue");
    //セレクターの中から偶数番目に出現要素をevenフィルター、奇数番目に出現する要素をoddフィルターで指定できる:jQuery独自フィルター→even/odd
    //nth-child擬似クラスとちがって、共通の親要素をもつ要素から特定の要素を指定するのではなく、first/lastフィルター同様、全体での選択になる

    $("li:eq(2)").css("color","red");   //eqフィルター(equal):特定の順番の要素
    $("li:lt(2)").css("color","blue");  //ltフィルター(less than):特定の要素より前の要素
    $("li:gt(2)").css("color","green"); //gtフィルター(greater than):特定の要素より後の要素
    //セレクターの中から、要素を指定できる:jQuery独自フィルター→eq/lt/gt
    //指定する数字は0から数える。共通の親要素をもつ要素ごとに数えるのではなく、全体が対象になる。
    //eq(2)では3番目の要素、lt(2)では3番目より前に出現している要素、gt(2)では3番目より後に出現している要素を指定している

    $(":header").css("color","red");
    //h1~h6のheading用を指定できる:jQuery独自フィルター→header

    $("li:contains('サンプル')").css("color","red");
    $("li:has(strong)").css("color","blue");
    //特定の文字列を含む要素をcontainsフィルター、特定の要素が含まれている要素をhasフィルターで指定できる:jQuery独自フィルター→contains/has

    $("li:parent").css("color","red");
    //何らかの子要素やテキストを含む要素を指定できる:jQuery独自フィルター→parent
    //empty擬似クラスと逆のフィルター
})

直下セレクター、隣接セレクター、擬似クラスなどについて参考サイト
(cssではIE6で無効なものもjQueryでは使えたりするので、結構使い勝手はよいです。使えるかどうかは、実際にやってみてください。)

戻る

Top