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

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

.first( )最初の要素を選択

構文

最初の要素を選択返値:jQueryオブジェクト
jQo.first( )ver1.4〜

機能

jQueryオブジェクトで指定した要素のうち最初の要素を選択します。

解説

最初の要素を選択します

サンプル(first/01.html)を開いてul要素が2つあり、それぞれli要素を5つ持っていることを確認して下さい。jQueryは以下の様に記述され、buttonをクリックするとli要素のうち、最初の要素を選択します。選択した要素はcssメソッドを利用して背景を赤くしています。

$("button").click(function(){
	$("li").first().css("background-color","#f99");
})

結果として、buttonをクリックすると最初のli要素が選択されます。

関連項目

指定したインデックス番号を持つ要素を選択したい場合はeqメソッドを利用します。
特定の範囲のインデックス番号を持つ要素を選択したい場合はsliceメソッドを利用します。
最後の要素を選択したい場合はlastメソッドを利用します。

メモ

セレクタにも似たものがあります

セレクタの:firstを利用すればfirstメソッドと同じようなことが可能です。サンプル(first/test01.html)を開いてbody内の構成がサンプルfirst/01.htmlと同じ事を確認してください。

jQueryはセレクタの部分をセレクタの:firstを利用したものに置き換えただけです。buttonをクリックするとサンプルfirst/01.htmlと同じ結果になることを確認して下さい。

$("button").click(function(){
	$("li:first").css("background-color","#f99");
})