ひょんなことから毎月1回の計5回にわたって
連載を行うことになりました。

連載内容（予定）ですが、jQueryやJavascriptについてを記載し、
最終回には、これまでの内容を駆使したちょっとしたゲームを作成する予定です。

今回はjQueryのセレクタについての豆知識を記載します。

まず、jQueryの構文です。

// 書式
$(セレクタ).メソッド(引数);

// 例
$("div").text("あいうえお");

次にセレクタの主な指定方法を記載します。

// 指定されたHTML要素
$("要素")

// 指定されたid属性を持つ要素
$("#ID名")

// 指定されたclass属性を持つHTML要素
$(".クラス名")

// 要素1内にある要素2
$("要素1 要素2")

// 要素1と要素2
$("要素1,要素2")

属性に関する指定もすることができます。

// 指定された属性が指定された値を持つ要素
$("[属性="値"]")

// 指定された属性が指定された値を持たない要素
$("[属性!="値"]")

// 指定された属性が指定された値で始まる要素
$("[属性^="値"]")

// 指定された属性が指定された値で終わる要素
$("[属性$="値"]")

// 指定された属性が指定された値を含んでいる要素
$("[属性*="値"]")

特定の要素を取得したい場合は、下記のようなフィルタがあります。

// 指定された要素の最初の要素
$("要素:first")

// 指定された要素の最後の要素
$("要素:last")

// 指定された要素の偶数番目の要素
$("要素:even")

// 指定された要素の奇数番目の要素
$("要素:odd")

// 指定された要素の指定された番号の要素
$("要素:eq(番号)")

// 指定された要素の指定された番号より前の要素
$("要素:lt(番号)")

// 指定された要素の指定された番号より後の要素
$("要素:gt(番号)")

いろいろな指定ができるセレクタですが、
パフォーマンスを考慮するのであれば、下記のように指定して下さい。

●単一要素を取得する場合

・ID指定できる場合は、ID指定にする。

$("#ID名")

・ID指定できない場合は、要素で絞り込んだ上で、クラス名や属性を付ける。

$("要素.クラス名")
$("要素[属性="値"]")

・クラス名だけでの指定はなるべく避ける。

$(".クラス名") // この指定方法は避ける

●複数要素を取得する場合

・スペースで要素を絞り込むよりも、findメソッドを使用する。

$("#ID名 要素") // この指定方法は避ける

// 下記のように指定する
$("#ID名").find("要素")

●同一要素を使用する場合

・要素を変数にして使用するか、メソッドを「.（ドット）」でつなげる
メソッドチェーンを使用する。

$("セレクタ").メソッド1();
$("セレクタ").メソッド2();
$("セレクタ").メソッド3(); // この指定方法は避ける

// 下記のように指定する
var hoge = $("セレクタ");
hoge.メソッド1();
hoge.メソッド2();
hoge.メソッド3();

// メソッドチェーン
$("セレクタ").メソッド1()
            .メソッド2()
            .メソッド3();

次回からはゲームで使用するjQueryのメソッドについて記述したいと思います。

では、また来月お会いしましょう。。。