JQueryの優れた特徴の一つは、html上のタグ要素を選択するセレクタの種類が豊富で簡単に実装できることです。

HTMLは階層構造を持つDOM(ドキュメントオブジェクトモデル)なので、JQueryが登場するまでは、document.getElementById(“hoge”)という感じで長々と記述する必要がありましたし、階層構造を辿ったり、検索したりも実装の手間がかかりましたら、JQueryの登場によって要素の選択は非常に簡単になりました。
それでは具体的にJQueryではどのようなセレクタ(HTML上の要素選択方法)があるのか、代表的なものを紹介していきます。

IDセレクタ

[html]

[/html]

idがhogeの要素を選択するには以下のように記述します。

[javascript]$(“#hoge”)[/javascript]

クラスセレクタ

[html]

[/html]

classがhogehogeの要素を選択するには以下のように記述します。

[javascript]$(“.hogehoge”)[/javascript]

子孫セレクタ

[html]

  • aaa
  • [/html]

    liの中にあるaを選択するには以下のように記述します。

    [javascript]$(“li a”)[/javascript]

    グループセレクタ

    [html]

    aaaa

    aaaa
    [/html]

    上の両方の要素を選択するには、カンマ区切りで指定します。

    [javascript]$(“p.hoge, p.hogehoge”)[/javascript]

    アトリビュートセレクタ

    [html]

    id無し
    idあり
    idないけど、
    この範囲はIDあり

    [/html]

    というHTMLに対して、以下のJQueryを記述すると、IDを持つdiv要素の背景色を赤くします。

    [javascript]$(“div[id]”).css(“background-color”, “red”);[/javascript]

    その他、アトリビュートセレクタでよく使うのは、input要素のある項目を選択する場合です。

    [javascript]$(“input[name=’kana’]”)[/javascript]

    上のように記述すると、name=’kana’のinput要素を選択しますので、

    [javascript]$(“input[name=’kana’]”).val()[/javascript]

    とすれば値が取れるようになります。

    階層や前後関係のセレクタ

    [html]


    [/html]

    というHTMLに対して、

    [javascript]
    $(“#name”).next()
    [/javascript]

    とすると、idがkanaのinputフィールドを選択します。
    next()で次の要素、prev()で前の要素となります。

    フォームのセレクタ

    [javascript]$(“:input”)[/javascript]

    とすると、全てのinput要素を選択します。

    [javascript]$(“:input”).attr(‘readonly’,true);[/javascript]

    として、全てのinput要素をreadonly(読取専用)にしたり、逆に解除したりといった処理もまとめてできます。

    同じように、submit要素だけを選択するには、

    [javascript]$(“:submit”)[/javascript]

    いかがだったでしょうか?JQueryは実装サンプルも豊富なので、基礎を抑えずにサンプルを使っている人も多いのではと思います。よく利用するセレクタをしっかり覚えておくと開発力、応用力が高まると思います。