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

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

先祖 子孫子孫要素を選択

構文

先祖要素内の子孫要素を選択
$("先祖 子孫")ver1.0〜
※先祖と子孫の間には半角スペースが必要です。

機能

要素を半角スペースで区切って記述することで、先祖要素に含まれる子孫要素を選択します。子孫の要素は先祖要素の直下の階層にある必要はありません(jQueryでは直下の子孫要素のことを子要素と呼びます)。

直下の要素のみを選択したい場合は >(子要素)を利用します。 これは直下の要素しか調査しないため、より高速に処理できます。

解説

子孫要素の選択

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

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

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

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

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

セレクタにはhtml要素だけでなくクラスやID属性も設定できます。サンプル(descendant/02.html)を開いてbody内の要素を確認して下さい。testのクラス属性を持つspan要素が2つあり、1つはdiv要素内にあります。

<div><span class="test">test</span></div>
<span class="test">test</span>

jQueryは以下の様に記述され、buttonをクリックするとdiv要素内にあるtestのclass属性を持つ要素を選択しcssメソッドで赤枠を表示します。

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

結果として、buttonをクリックするとdiv要素内にあるtestのclass属性を持った要素に赤枠が表示されます。

注意点

注意点としては、複数のセレクタ(and)とにている点です。半角スペースを忘れてしまうと「複数のセレクタ(and)」となります。

サンプル(descendant/02b.html)を開いてbody内の構成に変更がないことを確認して下さい。しかしjQueryのセレクタ部分は以下の様に半角スペースが無くdivと.testが連結して記述されています
この場合は複数のセレクタ(and)の表記となり「testのクラス属性を持つdiv要素」の意味になります。そのため、buttonをクリックしても何も選択されません。間違えないように気を付けましょう。

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

メモ

jQueryメソッドのコンテキストを利用

セレクタの「先祖 子孫」と似た機能を持つものとして、 jQuery(selector)のコンテキストの利用があります。

サンプル(descendant/test01.html)を開いてbody内の構成がdescendant/01.htmlと同じ事を確認してください。jQueryはセレクタの部分が以下の様に変更され、第2引数(コンテキスト)にdiv要素が指定されています。これでもb要素が選択されますがdiv要素内のものに限定されます。

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

結果としてサンプルdescendant/01.htmlと全く同じになります。

Traversingのfindメソッドを利用

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

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

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