jQuery セレクタ

jQuery セレクタは、jQuery ライブラリの最も重要な部分の一つです。

jQuery セレクタは、HTML 要素の選択と操作を可能にします。

jQuery セレクタは、HTML 要素の名前、id、class、type、属性、属性値などに基づいて、HTML 要素を"検索"（または選択）するために使用します。これは、既存の CSS セレクタに基づいていますが、いくつかの独自のカスタムセレクタが加えられています。

jQuery における全てのセレクタは、ドル記号で始まり、次に括弧がきます: $().

element セレクタ

jQuery の element セレクタは、要素名に基づき要素を選択します。

ページ内の全 <p> をするには、次のように指定します:

$("p")

例

ボタンをクリックすると、全ての <p> 要素が表示されなくなります:

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

jQuery の #id セレクタは、指定の要素を検索するために HTML タグの id 属性を使用します。

id は、ページ内でユニークでなければならないので、単一のユニークな要素を検索するために #id セレクタを使用します。

指定の id を持つ要素を検索するには、# に続けて要素の id を記述します:

$("#test")

例

ボタンをクリックすると、id="test" である要素が非表示になります:

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});

jQuery class セレクタは、指定のクラスを持つ要素を検索します。

指定の class を持つ要素を検索するには、ピリオドに続けてクラス名を記述します:

$(".test")

例

ボタンをクリックすると、class="test" である要素が非表示になります:

$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});

構文	説明	例
$("*")	全要素を選択	Try it
$(this)	現在の HTML 要素を選択	Try it
$("p.intro")	class="intro" をもつ全 <p> 要素を選択	Try it
$("p:first")	最初の <p> 要素を選択	Try it
$("ul li:first")	最初の <ul> における最初の <li> 要素を選択	Try it
$("ul li:first-child")	全ての <ul> における最初の <li> 要素を選択	Try it
$("[href]")	href 属性を持つ全要素を選択	Try it
$("a[target='_blank']")	target 属性の値が "_blank" である全 <a> 要素を選択	Try it
$("a[target!='_blank']")	target 属性の値が "_blank" でない全 <a> 要素を選択	Try it
$(":button")	全 <button> 要素と type="button" である <input> 要素を選択	Try it
$("tr:even")	偶数番目の全 <tr> 要素を選択	Try it
$("tr:odd")	奇数番目の全 <tr> 要素を選択	Try it

様々なセレクタのデモには、jQuery Selector Tester を使用しています。

全 jQuery セレクタの完全なリファレンスについては、jQuery セレクタリファレンスをご覧ください。

web サイトには多数のページが含まれており、jQuery 関数の保守を容易にしたい場合は、 jQuery 関数を .js ファイルとし、分離し格納することができます。

このチュートリアルでの jQuery デモの場合、関数は <head> セクションに直接記述しています。しかし、時には以下のように別ファイルに配置することが望ましい場合があります（.js ファイルを参照するには src 属性を使用します）: