Tutorials /jquery1-3-2.js : http://docs.jquery.com/

Selectors/API/jQuery




[Basics:] ////////////////////////////////////////////////////////////////


□  #id
An ID to search for, specified via the id attribute of an element.
シャープ(#)で始まるセレクターは、id属性値で指定します。
idはHTML内で完全にユニークな値にしてください
idにピリオド(.)やコロン(:)を用いる場合は、バックスラッシュ(\)でエスケープする必要があります。

サンプル1
myDivというidを指定して、枠線を描きます。

Sample jquery
------------------------------------------------------
$("#myDiv").css("border", "3px solid red");


HTML
------------------------------------------------------
<div id="myDiv">hoge</div>

サンプル2
次のようなHTMLにあるidを指定する場合は、
エスケープして指定する必要があります。

Sample jquery
------------------------------------------------------
$("#myID\\.entry\\[1\\]").css("border", "3px solid red");


HTML
------------------------------------------------------
<div id="myID.entry[1]">hoge</div>




□  element
Matches all elements with the given name.
何もプレフィックスの付かないセレクターは、タグ名と合致します。

サンプル1
Document中から、全てのdiv要素に枠線を付けます。

Sample jquery
------------------------------------------------------
$(document).ready(function(){
   $("div").css("border", "3px solid red");
});


HTML
------------------------------------------------------
<div>ここには枠線が付きます</div>
<div>ここにも枠線が付きます</div>
<p>ここには枠線が付きません</p>




□  .class
Matches all elements with the given class.
ドット(.)で始まるセレクターは、クラス名と合致します。

サンプル1
Finds the element with the class "myClass".
myClassというクラスを持つエレメントにだけ枠線を付けます。

Sample jquery
------------------------------------------------------
$(".myClass").css("border", "3px solid red");


HTML
------------------------------------------------------
<div class="myClass">枠線が付きます</div>
<p class="myClass">枠線が付きます</p>
<div class="hisClass">枠線が付きません</div>
<div class="yourClass myClass">枠線が付きます</div>





□  *
Matches all elements.
全てのエレメントに合致します。

コンテキストと組み合わせた際に、最も効力を発揮します。

サンプル1
全ての要素に枠線が付きます。

Sample jquery
------------------------------------------------------
$("*").css("border", "3px solid red");




□  selector1, selector2, ..., selectorN
Matches the combined results of all the specified selectors.
指定された全てのセレクターの結果をあわせたものを返します。

幾つでもセレクターを指定して、結果をひとつにまとめて返すことができます。
その際のjQueryオブジェクトでのエレメントの並び順は、決まったルールには従っていませんので
順序はあてにしないようにしましょう。

サンプル1
div、spanもしくはpでmyClassというクラスを持つものだけに枠線を付けます。

Sample jquery
------------------------------------------------------
$("div,span,p.myClass").css("border", "3px solid red");


HTML
------------------------------------------------------
<div>ここには枠線が付きます</div>
<p>ここには枠線が付きません</p>
<p class="myClass">ここには枠線が付きます</p>
<span>ここにも枠線が付きます</span>





[Hierarchy:] ////////////////////////////////////////////////////////////////


□  ancestor descendant
Matches all descendant elements specified by "descendant" of elements specified by "ancestor".
階層関係を指定してエレメントを選択します。

descendant（子孫）はancestor（先祖）の子要素全てを指します。必ずしも直下である必要はありません。

サンプル1
formの中にあるinput要素にのみ、青い枠線をつけます。


Sample jquery
------------------------------------------------------
  $(document).ready(function(){

  $("form input").css("border", "2px dotted blue");

  });

HTML
------------------------------------------------------
<form>
    子要素: <input type="text" value="ここには枠線が付きます" />
  <div>
    孫要素: <input type="text" value="ここにも枠線が付きます" />
  </div>
</form>
<input type="text" value="ここはformの子孫要素ではないため、枠線は付きません" />




□  parent > child
Matches all child elements specified by "child" of elements specified by "parent".
親子関係を指定して、要素を選択します。

サンプル1
mainというidを持つ要素の、直下にある要素全てに枠線をつけます。


Sample jquery
------------------------------------------------------
$(document).ready(function(){

$("#main > *").css("border", "3px solid red");

  });


HTML
------------------------------------------------------
<div id="main">
  <div>ここには枠線がつきます</div>
  <span>ここにも枠線がつきます</span>
  <div>ここにも枠線がつきますが、<span>ここは孫関係になるのでつきません</span></div>
</div>
<div id="sub">
  ここはmainの兄弟であり子供ではないので、枠はつきません
</div>





□  prev + next
Matches all next elements specified by "next" that are next to elements specified by "prev".
前後関係を指定して要素を選択します。
prevで指定した要素の次にnextで指定した要素が来た場合にマッチします。


サンプル1

Sample jquery
------------------------------------------------------
  $(document).ready(function(){

$("label + input").css("color", "red");

  });


HTML
------------------------------------------------------
<form>
  <label>名前:</label>
  <input name="name" value="色が変わります" />
  <fieldset>
    <label>ニュース:</label>
    <input name="newsletter" value="色が変わります" />
  </fieldset>
</form>
<input name="none" value="labelの次では無いので変わりません" />




□  prev ~ siblings
Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.
兄弟関係を指定して要素を選択します。
prevで指定した要素以降に出てくる、兄弟関係にある全ての要素を選択します。

サンプル1
prevというidを持つ要素と兄弟関係にあるもののうち、div要素のみに枠線をつけます。

Sample jquery
------------------------------------------------------
$("#prev ~ div").css("border", "3px solid red");


HTML
------------------------------------------------------
<div>
  <div>ここはprevが出てくる前なので、枠線は付きません</div>
  <div id="prev">
    prevは出てきましたが、この要素自身は対象になりません
    <div>ここは親子関係であり兄弟関係ではないので、対象外です</div>
  </div>
  <div>ここに枠線がつきます</div>
  <div>ここにも枠線がつきますが、<div>ここは従兄弟にあたるので付きません</div></div>
  <p>ここも兄弟ですが、divではないので付きません</p>
  <div>ここには枠線がつきます</div>
</div>







[Basic Filters:] ////////////////////////////////////////////////////////////////




□  :first
Matches the first selected element.
要素集合のうち、最初のものを選択します。

サンプル1
リストの最初の行を斜体文字にします。

Sample jquery
------------------------------------------------------

$("li:first").css("font-style", "italic");


HTML
------------------------------------------------------
<ul>
  <li>この行が斜体文字になります</li>
  <li>この行は通常のままです</li>
  <li>この行も何もおきません</li>
</ul>




□  :last
Matches the last selected element.
要素集合のうち、最後のものを選択します。

サンプル1
リストの最後の行を斜体文字にします。


Sample jquery
------------------------------------------------------
$("li:last").css("font-style", "italic");


HTML
------------------------------------------------------
<ul>
  <li>この行は通常のままです</li>
  <li>この行も何もおきません</li>
  <li>この行が斜体文字になります</li>
</ul>




□  :not(selector)
Filters out all elements matching the given selector.
要素集合から指定したセレクターの要素を除外します。

jQuery 1.3からは、より複雑なセレクター記述もnot内で評価できるようになりました。
例えば :not(div a) や :not(div,a) のような指定も可能です。

サンプル1
チェックされていないinputの直ぐ後に出てくるlabelを黄色くハイライトします。

Sample jquery
------------------------------------------------------
$("input:not(:checked) + label").css("background-color", "yellow");


HTML
------------------------------------------------------
<input type="checkbox" /><label>ハイライトされます</label>
<input type="checkbox" checked="checked" /><label>ハイライトされません</label>
<input type="checkbox" /><label>ハイライトされます</label>




□  :even
Matches even elements, zero-indexed.
インデックスが偶数のものと合致します。

サンプル1
リストの偶数行（1,3,5行目をindexに直せば順に0,2,4）を太字にします。
Sample jquery
------------------------------------------------------
$("li:even").css("font-weight", "bold");


HTML
------------------------------------------------------
<ul>
  <li>太字</li>
  <li>通常</li>
  <li>太字</li>
  <li>通常</li>
  <li>太字</li>
</ul>




□  :odd
Matches odd elements, zero-indexed.
インデックスが奇数のものと合致します。

サンプル1
リストの奇数行（2,4行目をindexに直せば順に1,3）を太字にします。

Sample jquery
------------------------------------------------------
$("li:odd").css("font-weight", "bold");


HTML
------------------------------------------------------
<ul>
  <li>通常</li>
  <li>太字</li>
  <li>通常</li>
  <li>太字</li>
  <li>通常</li>
</ul>




□  :eq(index)
Matches a single element by its index.
集合要素から、インデックスを指定して単一のエレメントを抽出します。

サンプル1
3番目のtdを点滅させます。

Sample jquery
------------------------------------------------------
$("td:eq(2)").css("text-decoration", "blink");


HTML
------------------------------------------------------
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>




□  :gt(index)
Matches all elements with an index above the given one.
指定したインデックスよりも大きいインデックスを持つ要素を全て選択します。

サンプル1
インデックスが4よりも大きいセルを全て黄色くします。

Sample jquery
------------------------------------------------------
$("td:gt(4)").css("background-color", "yellow");


HTML
------------------------------------------------------
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>




□  :lt(index)
Matches all elements with an index below the given one.
指定したインデックスよりも小さいインデックスを持つ要素を全て選択します。

サンプル1
インデックスが4よりも小さいセルの文字を全て赤くします。

Sample jquery
------------------------------------------------------
$("td:lt(4)").css("color", "red");


HTML
------------------------------------------------------
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>




□  :header
Matches all elements that are headers, like h1, h2, h3 and so on.
h1, h2, h3などのheaderを選択します。

サンプル1
ヘッダを全て、灰色地で青い文字にします。

Sample jquery
------------------------------------------------------
$(":header").css({ background:'#CCC', color:'blue' });


HTML
------------------------------------------------------
<h1>ここはヘッダです</h1>
<div>
  <p>ここは違います</p>
  <h2>ここもヘッダです</h2>
  <p>ここは違います</p>
</div>




□  :animated
Matches all elements that are currently being animated.
現在アニメーション中の要素を抽出します。

サンプル1
アニメーション中のdivを緑色にします。

Sample jquery
------------------------------------------------------
$("#run").click(function(){
  $("div:animated").toggleClass("colored");
});
function animateIt() {
  $("#mover").slideToggle("slow", animateIt);
}
animateIt();

CSS
------------------------------------------------------
div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
div.colored { background:green; }


HTML
------------------------------------------------------
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>





[Content Filters:] ////////////////////////////////////////////////////////////////




□  :contains(text)
Matches elements which contain the given text.
Matches elements which contain the given text.
引数で渡された文字列を含む要素を抽出します。

サンプル1
“John”という文字列を含むdiv要素を下線付きにします。

Sample jquery
------------------------------------------------------
$("div:contains('John')").css("text-decoration", "underline");


HTML
------------------------------------------------------
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>




□  :empty
Matches all elements that have no children (including text nodes).
子要素を持たない要素だけを抽出します。
「子要素」には、テキストノードも含まれます。

サンプル1
空要素のtdを、背景色を赤くしてempty!と表示します。

Sample jquery
------------------------------------------------------
$("td:empty").text("empty!").css('background', 'rgb(255,220,200)');


HTML
------------------------------------------------------
<table border="1">
  <tr><td>TD #0</td><td></td></tr>
  <tr><td>TD #2</td><td></td></tr>
  <tr><td></td><td>TD#5</td></tr>
</table>




□  :has(selector)
Matches elements which contain at least one element that matches the specified selector.
引数で渡されたセレクターを子孫要素に持つ要素集合を選択します。

サンプル1
divのうち、strong要素を持つものに'important'というクラスを追加します。

Sample jquery
------------------------------------------------------
$("div:has(strong)").addClass("important");


CSS
------------------------------------------------------
.important{ border: 3px inset red; }


HTML
------------------------------------------------------
<div>このブロックは<strong>重要な</strong>要素を持っているのでimportantが追加されます。</div>
<div>このブロックは特になんでもありません。</div>
<div>
  このブロックは重要な要素を
  <div>
    <strong>孫要素として</strong>持っています。このdivも
  </div>
  このdivもimportantになります。
</div>





□  :parent
Matches all elements that are parents - they have child elements, including text.
:parent
何かの親要素である要素集合を抽出します。
テキストノードも含めて、何か子要素を持っていれば親要素と認められます。
:emptyの逆だと思ってください。

サンプル1
td要素のうち、親要素のものを半透明にします。

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    $("#run").click(function(){
      $("td:parent").fadeTo(1500, 0.3);
    });
  });


CSS
------------------------------------------------------
td { width:40px; background:green; }


HTML
------------------------------------------------------
<table border="1">
  <tr><td>Value 1</td><td></td></tr>
  <tr><td></td><td>Value 2</td></tr>
</table>






[Visibility Filters:] ////////////////////////////////////////////////////////////////


□  :hidden
Matches all elements that are hidden.
非表示になっている要素を抽出します。
また、input要素でtype=“hidden”のものも対象になります。

サンプル1
隠れている全要素を数え、divを再表示します。また、input要素のうちhiddenになっているものも別途数えます。

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    $("#show").click(function(){
      // in some browsers :hidden includes head, title, script, etc... so limit to body
      $("span:first").text("Found " + $(":hidden", document.body).length + 
                         " hidden elements total.");
      $("div:hidden").show(3000);
      $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
    });
  });


CSS
------------------------------------------------------
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }


HTML
------------------------------------------------------
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>
<form>
  <input type="hidden" />
  <input type="hidden" />
  <input type="hidden" />
</form>
<span></span>




□  :visible
Matches all elements that are visible.
:visible
表示されている要素を抽出します。

サンプル1
Documentがロードされた段階で表示されていたdivは、クリックすると黄色くなるようにイベントを設定します。
ボタンを押すと、隠れている要素が表示されるようにします。

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
    
    $("div:visible").click(function () {
      $(this).css("background", "yellow");
    });
    $("button").click(function () {
      $("div:hidden").show("fast");
    });
  });


CSS
------------------------------------------------------
div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
.starthidden { display:none; }


HTML
------------------------------------------------------
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>







[Attribute Filters:] ////////////////////////////////////////////////////////////////

Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the '@' symbol from your selectors in order to make them work again.



□  [attribute]
Matches elements that have the specified attribute. Note the "@" before the attribute name was deprecated as of version 1.2.
指定した属性を持っている要素を抽出します。

サンプル1
id属性を持っている要素を抽出し、背景色を黄色くします。

Sample jquery
------------------------------------------------------
$("div[id]").css("background-color", "yellow");


HTML
------------------------------------------------------
<div>この要素にはidが無いので枠は付きません</div>
<div id="hoge">この要素は黄色くなります</div>
<div>この要素にid はありませんが
<div id="chome">ここにあるので内側は黄色くなります</div></div>




□  [attribute=value]
Matches elements that have the specified attribute with a certain value.
属性が特定の値を持っている要素を抽出します。

サンプル1
name属性が”newsletter”のものを抽出し、続く要素の背景色を黄色くします。

Sample jquery
------------------------------------------------------
$("input[name='newsletter']").next().css("background-color", "yellow");


HTML
------------------------------------------------------
<div>
<input type="radio" name="newsletter" value="Hot Fuzz" />
<span>Hot Fuzz</span>
</div>
<div>
<input type="radio" name="newsletter" value="Cold Fusion" />
<span>Cold Fusion</span>
</div>
<div>
<input type="radio" name="accept" value="Evil Plans" />
<span>Evil Plans</span>
</div>




□  [attribute!=value]
Matches elements that either don't have the specified attribute or do have the specified attribute but not with a certain value.
属性が特定の値を持っていない要素を抽出します。

サンプル1
name属性が”newsletter”ではないものを抽出し、続く要素の背景色を黄色くします。

Sample jquery
------------------------------------------------------
$("input[name!='newsletter']").next().css("background-color", "yellow");


HTML
------------------------------------------------------
<div>
  <input type="radio" name="newsletter" value="Hot Fuzz" />
  <span>Hot Fuzz</span>
</div>
<div>
  <input type="radio" name="newsletter" value="Cold Fusion" />
  <span>Cold Fusion</span>
</div>
<div>
  <input type="radio" name="accept" value="Evil Plans" />
  <span>Evil Plans</span>
</div>




□  [attribute^=value]
Matches elements that have the specified attribute and it starts with a certain value.
属性が特定の文字列から始まる要素を抽出します。

サンプル1
name属性が”news”で始まるinput要素を抽出し、値を”news here!”とします。

Sample jquery
------------------------------------------------------
$("input[name^='news']").val("news here!");


HTML
------------------------------------------------------
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />




□  [attribute$=value]
Matches elements that have the specified attribute and it ends with a certain value.
属性が特定の文字列で終わる要素を抽出します。

サンプル1
name属性が”letter”で終わるinput要素を抽出し、値を”a letter”とします。

Sample jquery
------------------------------------------------------
$("input[name$='letter']").val("a letter");


HTML
------------------------------------------------------
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />




□  [attribute*=value]
Matches elements that have the specified attribute and it contains a certain value.
属性が特定の文字列を含む要素を抽出します。

サンプル1
name属性に”man”を含むinput要素を抽出し、値を”has man in it!”とします。

Sample jquery
------------------------------------------------------
$("input[name*='man']").val("has man in it!");


HTML
------------------------------------------------------
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />




□  [attributeFilter1][attributeFilter2][attributeFilterN]
Matches elements that match all of the specified attribute filters.
属性セレクターを複数指定します。
全てに合致する要素集合が返されます。

サンプル1
inpout要素のうちid属性を持ち、name属性が”man”で終わる要素を抽出します。

Sample jquery
------------------------------------------------------
$("input[id][name$='man']").val("only this one");


HTML
------------------------------------------------------
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />







[Child Filters:] ////////////////////////////////////////////////////////////////


□  :nth-child(index/even/odd/equation)
Matches all elements that are the nth-child of their parent or that are the parent's even or odd children.
各親要素に対してn番目の子要素を抽出します。
n番目だけでなく、n個おき、偶数、奇数などの指定も可能です。

:eq(index)が要素をひとつだけ返すのに対して
:nth-childは親要素毎の抽出を行うので結果として複数の要素を取ることができます。
奇数、偶数などの指定に関しても同様です。

:eq()がゼロから始まる番号を取るのに対し
:nth-childでは1から始まる番号になるので注意してください。

サンプル1
各ul要素の、2番目のli要素を黄色くします。
真ん中のul要素には2番目が存在しないので何も取得されません。
（:nth-childではゼロからではなく1から始まる番号を使用します）

Sample jquery
------------------------------------------------------
$("ul li:nth-child(2)").css("background-color", "yellow");


HTML
------------------------------------------------------
<div><ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul></div>
<div><ul>
  <li>Sam</li>
</ul></div>
<div><ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
  <li>David</li>
</ul></div>




□  :first-child
Matches all elements that are the first child of their parent.
各親要素の最初の子要素を選択します。

:firstセレクターが要素集合のうちから先頭のひとつだけを選択するのに対し
:first-childは親要素毎に最初の子要素を選択します。

サンプル1
div要素内にある最初のspan要素に対して下線を付けるなどします。
※ :firstセレクターで選択された要素に対しては背景を黄色くします。

Sample jquery
------------------------------------------------------
$("div span:first-child")
    .css("text-decoration", "underline")
    .hover(function () {
          $(this).addClass("sogreen");
        }, function () {
          $(this).removeClass("sogreen");
        });
 
$("div span:first")
    .css("background-color", "yellow");

CSS
------------------------------------------------------
span { color:#008; }
span.sogreen { color:green; font-weight: bolder; }

HTML
------------------------------------------------------
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph</span>
</div>




□  :last-child
Matches all elements that are the last child of their parent.
各親要素の最後の子要素を選択します。

:lastセレクターが要素集合のうちから最後のひとつだけを選択するのに対し
:last-childは親要素毎の最後の子要素を選択します。

サンプル1
div要素内にある最後のspan要素の文字を赤くするなどします。
※ :lastセレクターで選択された要素に対しては背景を黒くします。

Sample jquery
------------------------------------------------------
$("div span:last-child")
    .css({color:"red", fontSize:"80%"})
    .hover(function () {
          $(this).addClass("solast");
        }, function () {
          $(this).removeClass("solast");
        });
 
$("div span:last")
    .css("background-color", "black");


CSS
------------------------------------------------------
span.solast { text-decoration:line-through; }


HTML
------------------------------------------------------
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon,</span>
  <span>Sam</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph,</span>
  <span>David</span>
</div>




□  :only-child
Matches all elements that are the only child of their parent.
各親要素が子要素を1つだけ持つ場合に、その子要素を選択します。

複数の子要素を持つ要素からは、何も選択されません。
また、子要素が無い場合も何も選択されません。
この場合の子要素にテキストノードは含まれません。

サンプル1
幾つかのbutton要素が入ったdivがあります。
:only-childセレクターで選択できたものは、buttonではなく
textに置き換えて”Alone”と表示するようにします。

Sample jquery
------------------------------------------------------
$("div button:only-child").text("Alone").css("border", "2px blue solid");

CSS
------------------------------------------------------
HTML
------------------------------------------------------
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
<div>
  <button>Sibling!</button>
</div>
<div>
  None
</div>
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
<div>
  <button>Sibling!</button>
</div>






[Forms:] ////////////////////////////////////////////////////////////////




□  :input
Matches all input, textarea, select and button elements.
全てのinput, textarea, select, button要素を選択します。

サンプル1
単純にinput要素を並べて、その数を数えています。
表示されていないhidden要素も含めて取得されていることに注意してください。

Sample jquery
------------------------------------------------------
var allInputs = $(":input");
var formChildren = $("form > *");
$("div")
  .text("Found " + allInputs.length + " inputs and the form has " + formChildren.length + " children.")
  .css("color", "red");
$("form")
  .submit(function () { return false; }); // so it won't submit


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" />
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" />
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option</option></select>
  <textarea></textarea>
  <button>Button</button>
</form>




□  :text
Matches all input elements of type text.
全てのtext要素を選択します。

サンプル1
:textセレクターで選択される要素が赤枠で表示されます。

Sample jquery
------------------------------------------------------
var input = $(":text").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" />
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" />
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option</option></select>
  <textarea></textarea>
  <button>Button</button>
</form>

>>For this type jQuery found 1.




□  :password
Matches all input elements of type password.
全てのpassword要素を選択します。

サンプル1
:passwordセレクターで選択される要素が赤枠で表示されます。

Sample jquery
------------------------------------------------------
var input = $(":password").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" />
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" />
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option</option></select>
  <textarea></textarea>
  <button>Button</button>
</form>




□  :radio
Matches all input elements of type radio.
全てのradio要素を選択します。

サンプル1
:radioセレクターで選択される要素の次の要素が赤枠で表示されます。

Sample jquery
------------------------------------------------------
var input = $(":radio").next().css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" />
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" name="asdf" /><label>a</label>
  <input type="radio" name="asdf" /><label>b</label>
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option<option/></select>
  <textarea></textarea>
  <button>Button</button>
</form>




□  :checkbox
Matches all input elements of type checkbox.
全てのcheckbox要素を選択します。

サンプル1
:checkboxセレクターで選択される要素の次の要素が赤枠で表示されます。

Sample jquery
------------------------------------------------------
var input = $(":checkbox").next().css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" /><label>a</label>
  <input type="checkbox" /><label>b</label>
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" /><label>c</label>
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option<option/></select>
  <textarea></textarea>
  <button>Button</button>
</form>




□  :submit
Matches all input elements of type submit.
全てのsubmit要素を選択します。
image要素もsubmitに含まれることに注意してください。

サンプル1
:submitセレクターで選択される要素が赤枠で表示されます。

Sample jquery
------------------------------------------------------
var input = $(":submit").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" />
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" />
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option<option/></select>
  <textarea></textarea>
  <button>Button</button>
</form>




□  :image
Matches all input elements of type image.
全てのimage要素を選択します。

サンプル1
:imageセレクターで選択される要素が赤枠で表示されます。

Sample jquery
------------------------------------------------------
var input = $(":image").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" />
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" />
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option<option/></select>
  <textarea></textarea>
  <button>Button</button>
</form>




□  :reset
Matches all input elements of type reset.
全てのreset要素を選択します。

サンプル1
:resetセレクターで選択される要素が赤枠で表示されます。

Sample jquery
------------------------------------------------------
var input = $(":reset").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" />
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" />
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option<option/></select>
  <textarea></textarea>
  <button>Button</button>
</form>




□  :button
Matches all button elements and input elements of type button.
全てのbutton要素を選択します。
button属性を持つinput要素も同時に選択されます。

サンプル1
:buttonセレクターで選択される要素が赤枠で表示されます。

Sample jquery
------------------------------------------------------
var input = $(":button").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" />
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" />
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option<option/></select>
  <textarea></textarea>
  <button>Button</button>
</form>




□  :file
Matches all input elements of type file.
全てのfile要素を選択します。

サンプル1
:fileセレクターで選択される要素が赤枠で表示されます。

Sample jquery
------------------------------------------------------
var input = $(":file").css({background:"yellow", border:"3px red solid"});
$("div").text("For this type jQuery found " + input.length + ".")
        .css("color", "red");
$("form").submit(function () { return false; }); // so it won't submit

CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input type="button" value="Input Button"/>
  <input type="checkbox" />
  <input type="file" />
  <input type="hidden" />
  <input type="image" />
  <input type="password" />
  <input type="radio" />
  <input type="reset" />
  <input type="submit" />
  <input type="text" />
  <select><option>Option<option/></select>
  <textarea></textarea>
  <button>Button</button>
</form>




□  :hidden
Matches all elements that are hidden.
非表示になっている要素を抽出します。
また、input要素でtype=“hidden”のものも対象になります。

サンプル1
隠れている全要素を数え、divを再表示します。また、input要素のうちhiddenになっているものも別途数えます。

Sample jquery
------------------------------------------------------
  $(document).ready(function(){
   $("#show").click(function(){
      // in some browsers :hidden includes head, title, script, etc... so limit to body
      $("span:first").text("Found " + $(":hidden", document.body).length + 
                         " hidden elements total.");
      $("div:hidden").show(3000);
      $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
    });
  });

CSS
------------------------------------------------------
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }

HTML
------------------------------------------------------
<input type="button" id="show" value="Show" />

<span></span>

<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>

<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>

<span></span>








[Form Filters:] ////////////////////////////////////////////////////////////////



□  :enabled
Matches all elements that are enabled.
利用可能な状態にある全ての要素を選択します。

サンプル1
利用可能な状態にある要素の値を”this is it”に変えます。

Sample jquery
------------------------------------------------------
$("input:enabled").val("this is it");


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>




□  :disabled
Matches all elements that are disabled.
利用不可な状態にある全ての要素を選択します。

サンプル1
利用不可な状態にある要素の値を”this is it”に変えます。

Sample jquery
------------------------------------------------------
$("input:disabled").val("this is it");


CSS
------------------------------------------------------
HTML
------------------------------------------------------
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>




□  :checked
Matches all elements that are checked.
チェックの入っている全ての要素を選択します。

サンプル1
チェックボックスがクリックされる度に、チェックの入っているボックスの数を取得して表示します。

Sample jquery
------------------------------------------------------
  $(document).ready(function(){

    function countChecked() {
      var n = $("input:checked").length;
      $("div").text(n + (n == 1 ? " is" : " are") + " checked!");
    }
    countChecked();
    $(":checkbox").click(countChecked);

  });


CSS
------------------------------------------------------
div { color:red; }

HTML
------------------------------------------------------
  <form>
    <input type="checkbox" name="newsletter" checked="checked" value="Hourly" />

    <input type="checkbox" name="newsletter" value="Daily" />
    <input type="checkbox" name="newsletter" value="Weekly" />
    <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    <input type="checkbox" name="newsletter" value="Yearly" />
  </form>
  <div></div>

　※1 is checked! 〜 4 are checked!




□  :selected
Matches all elements that are selected.
選択状態にある全ての要素を選択します。

サンプル1
リストボックスの選択状態が変わる度に、選択されているアイテム名を表示します。

Sample jquery
------------------------------------------------------
  $(document).ready(function(){

    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .trigger('change');

  });


CSS
------------------------------------------------------
div { color:red; }

HTML
------------------------------------------------------
<select name="garden" multiple="multiple">
<option>Flowers</option>

<option selected="selected">Shrubs</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
  </select>

<div></div>






[ Special characters in selectors ]

If you wish to use any of the meta-characters described above as a literal part of a name, you must escape the character with two backslashes (\\).

For example:

#foo\\:bar
#foo\\[bar\\]
#foo\\.bar

The full list of characters that need to be escaped: #;&,.+*~':"!^$[]()=>|/