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

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

:first最初の要素を選択

構文

最初の要素を選択
$(":first")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてfirstを設定すると最初の要素を選択します。

解説

単独では利用しません

サンプル(first/01.html)を開いてbody内にdiv要素が4つあることを確認してください。jQueryは以下の様に記述され、buttonをクリックすると最初の要素を選択するようにしています。選択された要素はcssメソッドを利用して赤枠を表示しています。

$("button").click(function(){
	$(":first").css("border","3px solid red");
});

documentの最初の要素はhtml要素になるため、buttonをクリックするとhtml要素にボーダーが描かれます。ですのでほとんどの場合、他のセレクタと組みあわせて利用されます。

他のセレクタと組みあわせる

サンプル(first/02.html)を開いてbody内の構成がfirst/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、buttonをクリックすると複数のセレクタ(and)を利用してdiv要素で最初の要素を選択します。選択された要素はcssメソッドを利用して背景色を緑にします。

$("button").click(function(){
	$("div:first").css("background-color","#9F9");
});

結果として、buttonをクリックすると最初のdiv要素が選択され背景色が緑になります。

ページ全体を通しての最初です

要素はページ内を通してインデックス番号で管理されます。
サンプル(first/03.html)を開いてbody内にol要素とul要素の2つのリストがあることを確認して下さい。各リストにはli要素が5つづつあります。

jQueryは以下の様に記述され、buttonをクリックするとli要素の最初の要素を選択しcssメソッドを利用して背景色をピンクにします。

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

ul要素とol要素は異なるリストですが、li要素はulとolで共通のためul/olを通して連続したインデックス番号が設定されます。その結果、buttonをクリックするとol要素の最初のli要素が選択され、背景色がピンクになります。

ul要素内にある最初のli要素を選択するには?

ではul要素の中にある最初のli要素を選択したい場合はどうすればよいのでしょうか?
サンプル(first/04.html)を開いてbody内の構成を確認してください。li要素のテキストが異なるだけで、それ以外はサンプルfirst/03.htmlと同じになっています。

jQueryは以下の様に記述され、buttonをクリックすると>(子要素)を利用して、ul要素の子要素であるli要素の最初の要素を選択するようにしました。

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

サンプルfirst/04.htmlではul要素内にli要素しかないので、liの記述は省略しても同じです。
サンプル(first/04b.html)を開いてjQueryが以下の様に変更されていることを確認して下さい。しかし選択される要素はサンプルfirst/04.htmlと同じになります。

$("button").click(function(){
	$("ul>:first").css("background-color","#FCC");
});

関連項目

最後の要素を選択する:lastと合わせて覚えると良いでしょう。
要素ごとに最初の要素を選択したい場合(サンプルではolとulの最初のliを両方まとめて選択したい場合)は:first-childを利用すると便利です。

メモ

他のセレクタと:firstの組合せ

+(直近の後要素)を利用すると直後の要素を選択できますが、指定した要素が直後でない場合は選択されません。サンプル(first/test01.html)を開いてbody内を確認して、以下の様にh2要素の後にh3要素とp要素があることを確認して下さい。

<h2>見出し2</h2>
<h3>見出し3</h3>
<p>段落</p>
<p>段落</p>
<p>段落</p>

続いてjQueryを確認して、セレクタが「h2+p」と記述されていることを確認して下さい。この場合はh2要素の直後にあるp要素を選択しますが、直後はh3要素のためbuttonをクリックしても、何も選択されません。

$("button").click(function(){
	$("h2+p").css("background-color","#FCC");
});

とはいえ~(後要素)を利用すると、1つだけでなく全てのp要素が選択されてしまいます。
→サンプル(first/test01b.html

$("button").click(function(){
	$("h2~p").css("background-color","#FCC");
});

そこで利用するのが:firstです。サンプル(first/test02.html)を開いて、セレクタが以下の様に変更されているのを確認して下さい。first/test01b.htmlの記述に:firstを追加することで、最初のp要素だけを選択します。

$("button").click(function(){
	$("h2~p:first").css("background-color","#FCC");
});

結果として、buttonをクリックするとh2要素に一番近いp要素を選択できるようになります。