【Javascript】jQueryのセレクタ 基本

最近は、jQueryのすぐに使えるプラグインを紹介してきましたが、今回から、jQueryのAPI自体の使い方についても目配りしていきます。

jQueryの肝のひとつは、CSSふうのセレクタを使用して、極めて簡単にDOM要素を検索できる機能です。

今回はまず、そのjQueryセレクタの基本的なものから順番に試していきたいと思います。

• jQuery
  • jquey.jsのダウンロード
• jQuery ドキュメント API/1.2/Selectors
• 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セレクタを複数指定

では、 さっそく、次ページからひとつずつサンプルを作って試しましょう。