)ver1.0〜機能jQueryオブジェクトで指定した要素の「子」要素でセレクタにマッチする要素を選択します。子要素とは階層構造(入れ子構造)において直下にある要素のことです。引数のセレクタは省略可能で、省略した場合は指定したjQueryオブジェクトの子要素が全て選択されます。引数にセレクタを設定サンプル(children/01.html)を開いてbody内にdiv要素が2つあり、下のdiv要素内にはp要素があることを確認して下さい。<div>div要素だけです</div><div><p>div要素内にあるp要素です</p></div>jQueryは以下の様に記述され、buttonをクリックするとdiv要素の子要素からp要素を選択しています。cssメソッドを利用して背景色を緑に変更しています。$("button").click(function(){$("div").children("p").css("background-color","#cfc");})結果として、buttonをクリックすると下のdiv要素内にあるp要素の背景が緑になります。div要素ではなく子要素であるp要素が選択されることに注意してください。孫要素は選択されませんchildrenメソッドは引数で指定した子要素しか選択せず孫要素などは選択しません(jQueryでは親要素の直下の要素を子要素「children」と読んでおり、それより深い要素は子孫要素「descendant」と呼び区別しています)。サンプル(children/02.html)を開いて下のdiv要素内を確認して下さい。サンプルchildren/01.htmlのhtml構成をすこし変更し、以下の様に下のdiv要素内にb要素を追加しています。<div>div要素だけです</div><div><b><p>div要素とp要素の間にb要素があります</p></b></div>そのためp要素はdiv要素の子要素ではなくなっています(孫要素です)。結果として、buttonをクリックしてもp要素は選択されません(jQueryはサンプルchildren/01.htmlから変更有りません)。引数を省略childrenメソッドは引数を省略すると子要素すべてを選択します。サンプル(children/03.html)を開いてdiv要素が4つあることを確認して下さい。1番上のdiv要素内には何もありませんが、それ以外のdiv要素内にはb要素、span要素、p要素があります。jQueryは以下の様に記述され、childrenメソッドの引数になにも設定されていません。red");});引数に何も設定されていない場合は、すべての子要素を選択するので、buttonをクリックするとb要素、span要素、p要素ともに選択されcssメソッドによって背景色が緑になります。findメソッドを利用します。contentsメソッドを利用してください。メモTraversingのメリットセレクタ:>(子要素)を利用すればchildrenメソッドと同じようなことが可能です。サンプル(children/test01.html)を開いてhtmlの構成がサンプルchildren/03.htmlと同じ事を確認してください。セレクタ:>(子要素)に置き換えただけです(*「すべての要素」を合わせて利用することで引数を利用しないchildrenメソッドと同じ効果になります)。*").css("background-color","#cfc");});buttonをクリックするとサンプルchildren/03.htmlと同じ結果になることを確認して下さい。Traversingの項目にあるメソッドの多くはセレクタでも似たようなことが可能です。Traversingのメリットとしては、ユーザーが捜査した対象から辿った要素を操作できる点です。これは以下の使い方で説明しているので確認してください。→参考:使い方「thisから辿る」サンプル(children/test02.html)を開いてbody内が以下の様な構成になっていることを確認してください。class="textArea">いろは...せすん</div></div>続いてjQueryが以下の様に変更されているのを確認して下さい。childrenメソッドをthis(クリックされた要素)に利用することで、その子要素をすべて選択して操作しています。実際に青い領域(グレーの子要素もOK)をクリックして、子要素(グレーの要素)が操作されることを確認してください。(){$(this).children().slideToggle();});このような操作はセレクタにはできないのでトラバースのメリットといえるでしょう。簡易クイズに利用できるかもサンプル(children/test03.html)を開いてbody内にclass属性がclickAreaのdiv要素が2つあり、それぞれ内部にclass属性がseikaiのdiv要素を持っていることを確認して下さい。class="kaisetu">apple</div></div>続いてjQueryを確認して下さい。hideメソッドで消しているため表示されません。showメソッドで表示するようにしました。結果として、青いdiv要素をクリックすると解説が表示されます。