信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

2012

21

9月

jQueryとJavaScript1

テクログ

ひょんなことから毎月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のメソッドについて記述したいと思います。
では、また来月お会いしましょう。。。

この記事を書いた人

マスオさん

coretech

所 属:
WEBインテグレーション事業部
出身地:
渋谷
仕事内容:
Web制作