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

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

>(子要素)子要素を選択

構文

親要素の子要素を選択
$("親要素 > 子要素")ver1.0〜

機能

要素を「>」で区切って記述することで、先に指定した親要素にある子要素を選択します。子要素とは直下の子孫要素のことです。子孫要素を選択したい場合は先祖 子孫を利用します。

「親要素>子要素」は親要素の直下にある要素しか調べないため、先祖 子孫に比べると高速に処理できます。

解説

子要素の選択

サンプル(child/01.html)を開いてbody内の構成を確認して下さい。b要素が2つありますが、1つはdiv要素の中にあり、もう1つはbody内に直接配置されています。

<div><b>test</b></div>
<b>test</b>

jQueryは以下の様に記述され、buttonをクリックするとdiv要素内にあるb要素を選択し(div要素の直下にb要素ないといけませんcssメソッドで赤枠を表示します。

$("button").click(function(){
	$("div>b").css("border","3px solid red");
});

結果として、buttonをクリックすると上の(div要素内にある)b要素に赤枠が表示されます。

子要素とは直下の子孫要素

>(子要素)では親要素の直下に要素が無くてはいけません。サンプル(child/01b.html)を開いてjQuery部分に変更がないことを確認して下さい。しかしbody内の要素は構成が変わっており、以下の様にdiv要素内にspan要素が追加されています。

<div><span><b>test</b></span></div>
<b>test</b>

その結果、b要素はdiv要素の直下ではなくなり、buttonをクリックしてもb要素は選択されません(b要素が赤いボーダーで囲まれません)。

メモ

Traversingのchildrenメソッドを利用

Traversingのchildrenメソッドを利用すれば「>(子要素)」と同じようなことが可能です。
サンプル(child/test01.html)を開いてhtmlの構成がサンプルchild/01.htmlと同じ事を確認してください。セレクタの部分をdiv要素のみにし、続けてTraversingのchildrenメソッドでdiv要素の直下にあるb要素を選択します。

$("button").click(function(){
	$("div").children("b").css("border","3px solid red");
});

結果としてサンプルchild/01.htmlと全く同じになります。Traversingを利用するメリットについてはchildrenメソッドのページの「個人的なメモ」の項目を確認してください。