jQuery API の children( [selector] ) は、マッチした要素の子要素のうち、selectorにマッチした要素を、取得するメソッド。
記述方法
jQuery( セレクター１ ) . children( セレクター２ );
「セレクター１」にマッチした要素の子要素のうち、「セレクター２」にマッチする要素を取得。
記述例
jQuery( '#sample' ) . children();
idが「sample」である要素の子要素を取得。
jQuery( '#sample' ) . children( '.sample-children');
idが「sample」である要素の子要素のうち、クラス名が「sample-children」である要素を取得。
実装例（サンプル）
p要素１。
p要素２。
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、「p要素１」と「p要素２」の背景色を黄色にし、「p要素２」の枠線を赤色にする。
「toggle」ボタンを再度クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample' )
. children()
. css( 'backgroundColor', 'yellow' );
jQuery( '#jquery-sample' )
. children( '.jquery-sample-children' )
. css( 'border', '3px solid red' );
},
function() {
jQuery( '#jquery-sample' )
. children()
. css( 'backgroundColor', 'pink' );
jQuery( '#jquery-sample' )
. children( '.jquery-sample-children' )
. css( 'border', '3px solid gray' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample' )
. children()
. css( 'backgroundColor', 'yellow' );
jQuery( '#jquery-sample' )
. children( '.jquery-sample-children' )
. css( 'border', '3px solid red' );
},
function() {
jQuery( '#jquery-sample' )
. children()
. css( 'backgroundColor', 'pink' );
jQuery( '#jquery-sample' )
. children( '.jquery-sample-children' )
. css( 'border', '3px solid gray' );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px;
padding: 20px;
background-color: pink;
border: 3px solid gray;
border-radius: 10px;
}
#jquery-sample p {
margin: 10px;
padding: 20px;
background-color: pink;
border: 3px solid gray;
border-radius: 10px;
color: #303030;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
padding: 20px;
background-color: pink;
border: 3px solid gray;
border-radius: 10px;
}
#jquery-sample p {
margin: 10px;
padding: 20px;
background-color: pink;
border: 3px solid gray;
border-radius: 10px;
color: #303030;
}
-->
</style>
HTML
<button id="jquery-sample-button">toggle</button>
<div id="jquery-sample">
<p>p要素１。</p>
<p class="jquery-sample-children">p要素２。</p>
</div>
<div id="jquery-sample">
<p>p要素１。</p>
<p class="jquery-sample-children">p要素２。</p>
</div>