デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

#id名(ID属性)指定したid属性を持つ要素を選択

構文

指定したid属性を持つ要素を選択
$("#id名")ver1.0〜

機能

#(シャープ)の後ろにid名をつけると、任意のid属性を持つ要素を選択します。セレクタの.class(クラス)よりも高速に要素を選択できるので、1つしかない要素にはclassではなくidを付けるようにしましょう。
→参考:使い方「jQueryの高速化」

解説

任意のid属性を選択

サンプル(id/01.html)を開いてbody内のタグを確認して下さい。div要素とspan要素が2つづつありますが、1つだけ(上から2番目のdiv要素)id属性にtestと設定してあります。

jQueryは以下の様に記述され、id属性がtestの要素を選択しcssメソッドを利用して背景色を緑にします。

$("button").click(function(){
	$("#test").css("background-color","#9f9");
});

その結果、buttonをクリックすると(id属性にtestと設定された)上から2番目の要素の背景色が緑になります。