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

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

:focusフォーカスされている要素を選択

構文

フォーカスされている要素を選択
$(":focus")ver1.6〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてfocusを設定するとフォーカスされている要素を選択します。

解説

フォーカスされている要素を選択します

サンプル(focus/01.html)を開いてbody内の構成を確認してください。type属性がtextのinput要素が5つ配置されています。jQueryは以下の様に記述され、document(ブラウザ内)がクリックされるとフォーカスされている要素の背景色をcssメソッドを利用してピンクに変更しています(以下2行目)。そしてフォーカスされていない要素は:notセレクタを利用して選択し、背景色を白に戻しています(以下3行目)。

$(document).click(function(){
	$(":focus").css("background-color","#FCC");
	$(":not(':focus')").css("background-color","#FFF");
})

結果として、選択したinput要素の背景色がピンク色になります。

関連項目

forcusイベントを利用すれば、要素にフォーカスした時の処理を設定することができます。