jQuery セレクタ

❮ 前章へ 次章へ ❯

jQuery セレクタ

いろいろなセレクタのデモに、jQuery セレクタ・テスタを使用しています。

セレクタ 選択
* $("*") 全要素
#id $("#lastname") id="lastname" を持つ要素
.class $(".intro") class="intro" を持つ全要素
.class,.class $(".intro,.demo") class "intro" か "demo" を持つ全要素
element $("p") 全ての <p> 要素
el1,el2,el3 $("h1,div,p") 全ての <h1>、<div>、<p> 要素
     
:first $("p:first") 最初の <p> 要素
:last $("p:last") 最後の <p> 要素
:even $("tr:even") 複数番目の全 <tr> 要素
:odd $("tr:odd") 奇数番目の全 <tr> 要素
     
:first-child $("p:first-child") 各親要素の最初の子である全 <p> 要素
:first-of-type $("p:first-of-type") 各親要素の最初の <p> 要素である全 <p> 要素
:last-child $("p:last-child") 各親要素の最後の子であるである全 <p> 要素
:last-of-type $("p:last-of-type") 各親要素の最後の <p> 要素である全 <p> 要素
:nth-child(n) $("p:nth-child(2)") 各親要素の 2 番目の子である全 <p> 要素
:nth-last-child(n) $("p:nth-last-child(2)") 各親要素の後から数えて 2 番目の子である全 <p> 要素
:nth-of-type(n) $("p:nth-of-type(2)") 各親要素の 2 番目の <p> 要素である全 <p> 要素
:nth-last-of-type(n) $("p:nth-last-of-type(2)") 各親要素の後から数えて 2 番目の <p> 要素である全 <p> 要素
:only-child $("p:only-child") 各親要素の 1 つだけの子要素である全 <p> 要素
:only-of-type $("p:only-of-type") 各親要素の、そのタイプの唯一の子である全 <p> 要素
     
parent > child $("div > p") <div> 要素の直接の子である全 <p> 要素
parent descendant $("div p") <div> 要素の子孫である全 <p> 要素
element + next $("div + p") 各 <div> 要素の直後の <p> 要素
element ~ siblings $("div ~ p") <div> 要素の兄弟である全 <p> 要素
     
:eq(index) $("ul li:eq(3)") リスト中の4番目の要素(インデクスは 0 で始まる)
:gt(no) $("ul li:gt(3)") 3 より大きいインデクスの li 要素
:lt(no) $("ul li:lt(3)") 3 より小さいインデクスの li 要素
:not(selector) $("input:not(:empty)") 空でない全 input 要素
     
:header $(":header") 全ヘッダ要素 <h1>, <h2> ...
:animated $(":animated") 全アニメーション要素
:focus $(":focus") 現在フォーカスが当たっている要素
:contains(text) $(":contains('Hello')") テキストに "Hello" が含まれる全要素
:has(selector) $("div:has(p)") <p> 要素 を持つ全 <div> 要素
:empty $(":empty") 全ての空要素
:parent $(":parent") 他要素の親となっている全要素
:hidden $("p:hidden") 非表示状態の全 <p> 要素
:visible $("table:visible") 表示している全テーブル
:root $(":root") 文書のルート要素
:lang(language) $("p:lang(de)") "de" で始まる lang 属性値を持つ全 <p> 要素
     
[attribute] $("[href]") href 属性を持つ全要素
[attribute=value] $("[href='default.htm']") href 属性値が "default.htm" に等しい全要素
[attribute!=value] $("[href!='default.htm']") href 属性値が "default.htm" と異なる全要素
[attribute$=value] $("[href$='.jpg']") href 属性値が ".jpg" で終わる全要素
[attribute|=value] $("[title|='Tomorrow']") title の属性値が "Tomorrow" または "Tomorrow-" に等しい全要素
[attribute^=value] $("[title^='Tom']") title の属性値が "Tom" で始まる全要素
[attribute~=value] $("[title~='hello']") title の属性値に、指定した単語として "hello" が含まれる全要素
[attribute*=value] $("[title*='hello']") title の属性値に、文字 "hello" が含まれる全要素
     
:input $(":input") 全 input 要素
:text $(":text") type="text" である全 input 要素
:password $(":password") type="password" である全 input 要素
:radio $(":radio") type="radio" である全 input 要素
:checkbox $(":checkbox") type="checkbox" である全 input 要素
:submit $(":submit") type="submit" である全 input 要素
:reset $(":reset") type="reset" である全 input 要素
:button $(":button") type="button" である全 input 要素
:image $(":image") type="image" である全 input 要素
:file $(":file") type="file" である全 input 要素
:enabled $(":enabled") 有効な全 input 要素
:disabled $(":disabled") 無効な全 input 要素
:selected $(":selected") selected が指定された全 input 要素
:checked $(":checked") checked が指定された全 input 要素

❮ 前章へ 次章へ ❯