)ver1.0〜機能jQueryオブジェクトで指定した要素の「親」要素でセレクタにマッチする要素を選択します。親要素とは階層構造(入れ子構造)において直上にある要素のことです。引数のセレクタは省略可能で、省略した場合は指定したjQueryオブジェクトの親要素は何でも選択されます。parentsメソッドはparentメソッドと異なり「先祖」要素も選択します。引数を利用する引数にセレクタを指定すると、親要素が指定したセレクタのときだけ選択します。サンプル(parent/01.html)を開いて2つのdiv要素があることを確認してください。下のdiv要素内にはb要素しかありませんが、上のdiv要素にはp要素が追加され入れ子構造になっています。<div><p>これは<b>jQuery</b>のサンプルです</p></div><div>これは<b>jQuery</b>のサンプルです</div>jQueryは以下の様に記述され、buttonをクリックするとparentメソッドによってb要素の「親要素でp要素のもの」を選択します。cssメソッドを利用して赤枠を表示しています。red");});結果として、buttonをクリックすると上のdiv要素内にあるp要素だけが選択されます。下のdiv要素ではb要素の親要素がdiv要素でありp要素ではないので選択されません。引数を省略するparentメソッドは引数を省略すると親要素すべてを選択します。サンプル(parent/02.html)を開いてbody内の構成はサンプルparent/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、buttonをクリックするとparentメソッドによってb要素の「親要素は何でも」選択します。cssメソッドを利用して赤枠を表示しています。red");})b要素の親要素は上のdiv要素ではp要素、下のdiv要素ではdiv要素となっているので、buttonをクリックすると上のdivではp要素、下のdiv要素ではdiv要素が選択され赤枠が付きます。先祖要素は選択しませんparentメソッドは親要素しか選択せず先祖要素は選択しません(jQueryでは子要素の直上の要素を親要素「parent」と読んでおり、それより上の要素は先祖要素「ancestor」と呼び区別しています)。サンプル(parent/03.html)を開いてhtml構成はサンプルparent/01.htmlと同じ事を確認してください。jQueryは以下の様に記述されparentメソッドの引数としてdiv要素が設定されています。red");});結果として、buttonをクリックすると下のdiv要素しか選択されません。上のdiv要素ではb要素の親要素はp要素でありdiv要素ではないからです(このb要素にとってdiv要素は、親ではなく祖父にあたります)。childrenメソッドも合わせて覚えておきましょう。parentsメソッドを利用します。closestメソッドを利用します。メモフォームの装飾に利用できますラジオボタンやチェックボックスは、それ自身に背景色やボーダーなどの装飾をすることができません。サンプル(parent/test01.html)を開いてチェックボックスがあることを確認して下さい。チェックボックスはすべてlabel要素で囲んでいます。C</label>続いてjQueryが以下の様に変更されているのを確認して下さい。toggleClassメソッドを利用してselectedのクラス属性を付けたり外したりしています。$("input").click(function(){$(this).toggleClass("selected");});selectedのクラス属性は以下の様に設定されているので、チェックボックスをクリックすると背景色が緑になるはずですが、クリックしても変化しません。これはチェックボックス自身に背景色を設定できないためです。toggleClassメソッドを利用するようにします。サンプル(parent/test01b.html)を開いてjQueryが以下の様に変更されているのを確認して下さい。これでクリックした要素の親要素であるlabel要素にたいしてselectedクラスを付けたり外したりできるようになります。$("input").click(function(){$(this).parent().toggleClass("selected");});結果と捨て、チェックボックスにチェックを入れると背景色が緑色になります。