jQueryを使用するとき、必ずと言っていいほど、セレクタを使用します。
この記事では、jQueryセレクタについて説明します。
jQueryのセレクタとは？
jQueryのセレクタとは、操作対象のHTMLの要素を特定するものです。特定の要素や要素のグループを選択するために使用されます。jQueryセレクタを使うことで、特定の要素に対して操作を行ったり、情報を取得したりすることができます。
セレクタの記述方法
セレクタは以下のように記述します。
$('要素')
エイリアス（$）が頭についています。このエイリアス（$）がjQueryを指しています。$()という関数の引数に、HTML要素をいれることで、その要素をセレクタとして使用することができます。
例えば、全ての<p>要素を選択するには、次のように記述します。
セレクタの種類
セレクタの種類は、大きく分けると以下のようになります。
・基本セレクタ
・階層セレクタ
・属性セレクタ
基本セレクタ
HTMLの要素名、id、class名などを指定したセレクタを基本セレクタと言います。基本セレクタには、主に以下の種類があります。
| 種類 | 記述方法 | 例 |
| 要素セレクタ | $(‘要素名’) | $(‘p’) |
| クラスセレクタ | $(‘#id名’) | $(‘#title’) |
| idセレクタ | $(‘.class名’) | $(‘.myClass’) |
| グループセレクタ | $(‘要素名1, 要素名2, ・・・’) | $(‘p, h1’) |
| ユニバーサルセレクタ | $(‘*’) | $(‘*’) |
階層セレクタ
親要素とその子孫要素を指定して要素を選択のように、階層で指定するセレクタを階層セレクタと言います。階層セレクタには、主に以下の種類があります。
| 種類 | 記述方法 | 例 |
| 子セレクタ | $(‘親要素 > 子要素’) | $(‘div > spain’) |
| 子孫セレクタ | $(‘要素 子要素’) | $(‘div p’) |
| 隣接セレクタ | $(‘直前の要素 + 隣接する要素’) | $(‘#elemant1 + P’) |
| 兄弟セレクタ | $(‘直前の要素 ~ 要素’) | $(‘#elemant1 ~ P’) |
属性セレクタ
属性を指定したセレクタを、属性セレクタと言います。以下に例を挙げます。
$('セレクタ[属性名]')
指定した属性名をもつ要素を選択します。
$('セレクタ[属性名] = [属性値]')
属性名に対して、属性値を指定することもできます。
$('セレクタ[属性名] != [属性値]')
属性名が、属性値と異なる要素を選択します。
$('セレクタ[属性名] *= [属性値]')
属性名が、属性値を含む要素を選択します。
参考：
セレクタを使用するときの注意点
１．できるだけtag指定しない
セレクタはできるだけid指定をします。タグを入れてしまうと、検索対象にタグが入るため、処理が遅くなります。
$(div#id) ×この場合、div要素が検索対象に入るため、処理が遅くなる $(#id) ○できるだけid指定をする
２．変数を生成してセレクタを格納する
セレクタを使用する場合は、jQueryへの悪背薄をできるだけ少なくすることが、処理の向上に役立ちます。
そのため、１つのセレクタを複数使用する場合は、変数を生成し、セレクタを格納します。
例：
var txt =$('#txt'); // 変数txtにセレクタを格納する
txt.css('width', '50px');
まとめ
この記事では、jQueryセレクタについて説明しました。
