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

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

.find( )子孫要素を選択

構文

引数で指定した子孫要素を選択する返値:jQueryオブジェクト
jQo.find( セレクタ )ver1.0〜
jQo.find( jQo/DOM )ver1.6〜

機能

jQueryオブジェクトで指定した要素の「子孫」要素でセレクタにマッチする要素を選択します。ver1.6から引数にjQueryオブジェクトやDOM要素を指定できるようになりました。

名前からは想像しにくいのですがchildrenメソッドの仲間で、childrenメソッドと異なり子要素だけでなく、子孫要素まで選択します。調査範囲が広い分childrenメソッドよりも負荷がかかります。子要素しか選択しない場合はchildrenメソッドを利用しましょう。

解説

引数にセレクタを設定

サンプル(find/01.html)を開いてbody内にdiv要素が2つあり、下のdiv要素内にはb要素があり、その中にp要素があることを確認して下さい。

<div>div要素だけです</div>
<div><b><p>div要素とp要素の間にb要素があります</p></b></div>

jQueryは以下の様に記述され、buttonをクリックするとdiv要素内の子孫要素からp要素を選択します。選択した要素はcssメソッドを利用して背景色を緑に変更しています。

$("button").click(function(){
	$("div").find("p").css("background-color","#cfc");
})

結果として、buttonをクリックすると下のdiv要素内にあるp要素の背景色が緑に変わります。div要素ではなく子孫要素であるp要素が選択されることに注意してください。

childrenメソッドの場合は子要素しか選択しないため、同じ構成のサンプルでp要素が選択されることはありません。サンプル(children/02.html)と比較して違いを確認しましょう。

引数を省略することはできません

childrenメソッドでは引数を省略して、子要素すべてを選択することができましたが、findメソッドでは引数を省略して子孫要素すべてを選択することはできません。

サンプル(find/01b.html)を開いて、ほとんどfind/01.htmlと同じ事を確認してください。異なるのは以下の様に、findメソッドの引数が省略されている点だけです。

$("button").click(function(){
	$("div").find().css("background-color","#cfc");
})

結果として正常に機能せず、buttonをクリックしても何も選択されません。

引数にjQueryオブジェクトを設定

ver1.6から引数にjQueryオブジェクトを利用できるようになりました。jQueryは要素の選択に負荷が掛かるので、すでに作成されているjQueryオブジェクトを流用することで高速化が図れるのです。
→参考:使い方「jQueryの高速化:jQueryはオブジェクトに記憶しておく」

サンプル(find/02.html)をbody内の構成がサンプルfind/01.htmlから変更がないことを確認して下さい。jQueryは以下の様に記述されています。1行目でp要素のjQueryオブジェクトが作成され、それをfindメソッドの引数に利用しています。

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

結果としてはサンプルfind/01.htmlと全く同じになります。このサンプルでは3行目のためだけにpObjを作成しているので高速化はないのですが、他で利用しているjQueryオブジェクトがあり、それを流用できるときは引数に利用しましょう。

引数にDOM要素を設定

ver1.6から引数にDOM要素を利用できるようになりました。これもjQueryオブジェクトを引数に利用するのと同じように高速化の役に立ちます。

サンプル(find/03.html)をhtmlの構成がサンプルfind/01.htmlから変更がないことを確認して下さい。jQueryは以下の様に記述されています。1行目でjavaScriptのgetElementsByTagNameメソッドによってp要素のノードを取得し、その0番目のp要素を変数pObjに代入しています。この変数pObjをfindメソッドの引数に利用しました。

var pObj = document.getElementsByTagName("p")[0];			
$("button").click(function(){
	$("div").find(pObj).css("border","3px solid red");
})

結果としてはサンプルfind/01.htmlと全く同じになります。また1行目の最後の[0]を外してp要素のノードごと引数に設定してもOKです。→サンプル(find/03b.html

関連項目

子要素だけを選択したい場合はchildrenメソッドを利用します(こちらの方が高速です)。
内容(テキストノード)によって選択したい場合はcontentsメソッドを利用してください。

メモ

Traversingのメリット

セレクタ:先祖 子孫を利用すればfindメソッドと同じようなことが可能です。
サンプル(find/test01.html)を開いてbody内の構成がサンプルfind/01.htmlと同じ事を確認してください。セレクタの部分をセレクタ:先祖 子孫に置き換えただけです。

$("button").click(function(){
	$("div p").css("background-color","#cfc");
})

buttonをクリックするとサンプルfind/01.htmlと同じ結果になることを確認して下さい。

Traversingの項目にあるメソッドの多くはセレクタでも似たようなことが可能です。しかしTraversingのメリットとしては、ユーザーが捜査した対象から辿った要素を操作できる点です。これは以下の使い方で説明しているので確認してください。 →参考:使い方「thisから辿る」

また似た機能であるトラバースの.children( )のメモにはサンプルも載せたので確認してください。.children( )メソッドとの違いは子要素だけか否かです。