jQueryの肝のひとつは、CSSふうのセレクタを使用して、極めて簡単にDOM要素を検索できる機能です。
今回はまず、そのjQueryセレクタの基本的なものから順番に試していきたいと思います。
セレクタについて
これまで、たとえば、次のような書式でjQueryを使ってきました。
$('#test0').jQchart(setting);
$('.test1').dropShadow(setting);
最初のコードは、「#test0というID名の要素へjQchartというプラグインでグラフを出力する」という意味で、次のコードは、 「.test1というクラス名の要素へdropShadowというプラグインでドロップシャドウを出力する」という意味でした。 つまり、jQueryの$関数(あるいはjQuery関数)の引数に書かれた値(#test0や.test1)でDOM要素を検索し、それに続くメソッドを実行しているわけです。
jQueryは、概ねこういうスタイルで、処理を行うのですが、この場合の$関数の引数部分(#test0や.test1)を「セレクタ」と呼びます。
jQueryのセレクタとしてデフォルトで使えるものは次の9種類で、今回はBasicsセレクタを試します。
| セレクタの種類 | 機能 |
| Basics | 基本 |
| Hierarchy | 階層 |
| Basic Filters | 基本 フィルタ |
| Content Filters | コンテンツ フィルタ |
| Visibility Filters | 可視 フィルタ |
| Attribute Filters | 属性 フィルタ |
| Child Filters | 子要素 フィルタ |
| Forms | フォーム |
| Form Filters | フォーム フィルタ |
Basicsセレクタは、ID名やClass名、エレメントオブジェクトなどの基本的な文字列やオブジェクトによるDOM検索をサポートしています。
jQueryバージョン1.2.3現在、Basicsセレクタには、次の5種類があります。
| Basicsセレクタの種類 | 機能 |
| #id | ID名にマッチする要素 |
| .class | クラス名にマッチする要素 |
| element | 要素(タグ)名にマッチする要素 |
| * | すべての要素 |
| selector1, selector2, selectorN | カンマ区切りでjQueryセレクタを複数指定 |
では、 さっそく、次ページからひとつずつサンプルを作って試しましょう。
