jQuery リファレンス：first

索引

Core：コアとなる仕組み

Selectors：セレクタ

Attributes：属性

Traversing：対象の変更

Manipulation：操作

CSS：スタイルシート

Events：イベント

Effects：演出効果

└ 目次
基礎
├ .hide()
├ .show()
└ .toggle()
スライド
├ .slideUp()
├ .slideDown()
└ .slideToggle()
フェード
├ .fadeOut()
├ .fadeIn()
├ .fadeTo()
└ .fadeToggle()
カスタム
├ .animate(prop)
├ .animate(prop,opt...
├ .stop()
├ .delay()
├ .queue()
├ .dequeue()
├ .clearQueue()
├ .finish()
├ jQuery.queue()
├ jQuery.dequeue()
├ jQuery.fx.interval
└ jQuery.fx.off

Ajax：xml等との連携

└ 目次
簡易メソッド
├ .load()
├ jQuery.get()
├ jQuery.getJSON()
├ jQuery.getScript()
└ jQuery.post()
グローバルイベントハンドラ
├ .ajaxComplete()
├ .ajaxSuccess()
├ .ajaxError()
├ .ajaxSend()
├ .ajaxStart()
└ .ajaxStop()
低レベル・インターフェイス
├ jQuery.ajax()
├ jQuery.ajaxSetup()
└ jQuery.ajaxPrefilt...
お助け機能
├ jQuery.param()
├ .serialize()
└ .serializeArray()

Utilities：ユーティリティ

Data：データ

Miscellaneous：諸々

├ 目次
├ .index()
├ .get()
├ .toArray()
├ .length
└ .size()

Deferred：処理管理

└ 目次
deferredの作成
└ jQuery.deferred()
promiseの作成
├ jQuery.when()
├ .promise()
└ deferred.promise()
コールバックの設定
├ deferred.done()
├ deferred.fail()
├ deferred.always()
├ deferred.progress()
├ deferred.then()
└ deferred.pipe()
状態の取得
├ deferred.state()
├ deferred.isReso...
└ deferred.isReje...
状態の変更
├ deferred.resolve()
├ deferred.resolveW...
├ deferred.reject()
├ deferred.rejectW...
├ deferred.notify()
└ deferred.notifyW...

Callbacks：コールバック

Internals：内部処理

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

構文

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

機能

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

解説

最初の要素を選択します

サンプル（first/01.html）を開いてul要素が２つあり、それぞれ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");
})

次のページ： last()