jQuery select.jsを使ってセレクター指定のチェック。
左側の[toggle]ボタンをクリックすると、右側のダミーの各要素に、下の「Toggle Button」で指定した効果(黄色でハイライト、右へ10pxスライド)を与えます。セレクター指定がどの部分に影響を及ぼすか確認できます。なお、右側のダミー要素は、fixedで位置固定です。
オリジナル:http://www.learningjquery.com/ & http://www.codylindley.com/

Toggle Button = $('selector').addClass('highlight').animate({ marginLeft: 10}, 'fast');

この文章は次のような "div"要素の中に。 <div id="myid">. この部分は水平方向の続き。

この段落は、<p> </p>のタグに包まれています。 そして、その "p" タグであることを表示するため、
次のような"code"タグ<code>を使っています。

  • こちらはリスト要素最初。右のタグ使用 (<li>) "li"要素の親要素は順不同リストの (<ul>).
  • こちらは2番目のリスト要素。リンク link を含んでいます。
  • こちらは3番目のリスト要素。次のclass 名 "myclass otherclass"を指定しています。
  • こちらは3番目のリスト要素。strong のテキストと emを使った斜体のテキストを使用しています。
    • second-level(第2階層)のリスト要素その1
    • second-level(第2階層)のリスト要素その2

<p class="myclass">別の段落です。class="myclass" を指定しているだけで、他に特別 なものはありません。

この段落は、 <p></p> で囲まれています。この"p" タグをを表示するため、 <code>を使っています。

セレクターを入力してチェック ( 例: li:nth-child(2) )

Basics

$('code')
$('#myid')
$('.myclass')
$('*')
$('code, #myid, .myclass')

Hierarchy

$('div code')
$('li > ul')
$('strong + em')
$('strong ~ em')

Basic Filters

$('li:first')
$('li:last')
$('li:not(li:first)')
$('li:even')
$('li:odd')
$('li:eq(1)')
$('li:gt(2)')
$('li:lt(2)')
$(':header')

Content Filters

$('li:contains(second-level)')
$(':empty')
$('li:has(a)')
$('p:parent')

Visibility Filters

$(':hidden')
$(':visible')

Attribute Filters

$('li[class]')
$('a[rel="self"]')
$('a[rel!="nofollow"]')
$('[class^="my"]')
$('a[title$="blog"]')
$('a[href*="zip"]')
$('a[rel][href][title$="blog"]')

Child Filters

$('li:nth-child(even)')
$('li:nth-child(odd)')
$('li:nth-child(2)')
$('li:nth-child(2n)')
$('li:first-child')
$('li:last-child')
$('code:only-child')

Forms

$(':input')
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':submit')
$(':image')
$(':reset')
$(':button')
$(':file')
$(':hidden')

Form Filters

$('input:enabled')
$(':disabled')
$(':checked')
$(':selected')