jQueryを使えるようになるためには、まずセレクターの使用方法を覚えましょう。
CSSのセレクターと同じですから、HTMLコーダーさんはすぐに使えるようになります。
基本構文のところでも書きましたが、jQueryはセレクターで操作したいHTMLを指定して、メソッド（プロパティの場合もある）を操作して処理を行います。
以下セレクタの書き方とその内容のまとめです。jQueryというよりCSSの内容です。
| 名称 | 書式 | 指定対象 |
|---|---|---|
| 要素セレクター | $("要素名") | 要素名で指定 |
| IDセレクター | $("#ID名") | id属性で特定要素を指定 |
| classセレクター | $(".class名") | class属性を持つ要素を指定 |
| 子孫セレクター | $("要素1 要素２") | 要素１を親に持つ子要素２ |
| ユニバーサルセレクター | $("*") | すべての要素 |
| グループセレクター | $("セレクター１,セレクター２") | 複数のセレクター |
| CSS2.1 | ||
| 子セレクター | $("親要素名>子要素名") | 特定の要素の直下の子要素 |
| 隣接セレクター | $("要素１＋要素２") | 特定の要素の次の要素 |
| fiest-child疑似クラス | $("要素:first-child") | 同一要素内の最初の要素 |
| CSS3 | ||
| 間接セレクター | $("要素1~要素２") | 特定の要素の後に出現する要素 |
| 否定疑似クラス | $("要素１:not(要素２）") | 特定の要素のうち要素２の条件を除く要素 |
| empty疑似クラス | $("要素:empty") | 子要素やテキストを含まない要素 |
| nth-chid疑似クラス | $("要素:nth-child(番号）") | 要素内の指定した番号の要素 |
| last-child疑似クラス | $("要素:last-child") | 要素内の最後の要素 |
| only-child疑似クラス | $("要素:only-child") | 特定の要素が一つだけ含まれる要素 |
| nth-last疑似クラス | $("要素:nth-last-child(番号)") | 要素内を後ろから数えて指定した番号にある要素 |
| nth-of-type疑似クラス | $("要素:nth-of-type(番号)") | 同一要素で指定した番号にある要素 |
| nth-last-of-type疑似クラス | $("要素:nth-last-of-type(番号)") | 同一要素で後ろから数えて指定した番号にある要素 |
| first-of-type疑似クラス | $("要素:first-of-type(番号)") | 同一要素で最初にあたる要素 |
| last-of-type疑似クラス | $("要素:last-of-type(番号)") | 同一要素で最後にあたる要素 |
| only-of-type疑似クラス | $("要素:only-of-type(番号)") | 一つだけ存在する要素 |
| lang疑似クラス | $(":lang(言語)") | 特定の言語を指定された要素 |
| cssの属性セレクター | ||
| [attribute] | $("[属性名]") | 特定の属性を持つ要素 |
| [attribute=’value’] | $("[属性名=’値’]") | 特定の属性が指定した値を持つ要素 |
| [attribute!=’value’] | $("要素名[属性名!=”値"]) | 特定の属性が指定した値をもたない要素 |
| [attribute^=’value’] | $("[属性名^=’値’]") | 特定の属性が指定した値で始まっている要素 |
| [attribute$=’value’] | $("[属性名$=’値’]") | 特定の属性が指定した値で終わっている要素 |
| [attribute*=’value’] | $("[属性名*=’値’]") | 特定の属性が指定した値を含んでいる要素 |
|
[attributeFilter1] [attributeFilter2] |
$("[属性セレクター１][属性セレクター2]") | 複数の属性セレクターに該当する要素 |
| jQueryの独自セレクター | ||
| firstセレクター | $("要素:first") | 指定した要素の最初の要素 |
| lastセレクター | $("要素:last") | 指定した要素の最後の要素 |
| evenセレクター | $("要素:even") | 指定した要素の偶数番目の要素（０から数える） |
| oddセレクター | $("要素:odd") | 指定した要素の奇数番目の要素（０から数える） |
| eqセレクター | $("要素:eq(番号)") | 指定した番号の要素（番号は０から数える） |
| ltセレクター | $("要素:lt(番号)") | 指定した番号より前の要素（番号は０から数える） |
| gtセレクター | $("要素:gt(番号)") | 指定した番号より後の要素（番号は０から数える） |
| headerセレクター | $(":header") | h1〜h6までのheading要素 |
| containsセレクター | $("要素:contains(文字列)") | 特定の文字列が含まれている要素 |
| hasセレクター | $("要素１:has(要素２)") | 特定の要素が含まれている要素 |
| parentセレクター | $("要素:parent") | 子要素やテキストを含む要素 |
疑似クラスと疑似要素どっちがどっちだったか忘れがちですね。jQueryでは疑似クラスをセレクターで使用します。
擬似クラスは要素が特定の状態にある場合にスタイルを指定するものです。
擬似要素は要素内の特定の文字や行に対してスタイルを指定したり、そもそも無い文字や画像を追加することができます。
jQueryのセレクタでは使用しませんが、疑似要素の例
:first-letter
:first-line
:before
:after
