jQuery 子要素の取得

1. 子要素を取得しましょう
子要素の取得①find
<section>
<h1 id="title">今日のレッスン</h1>
<div id="lesson">
<p>第1章</p>
<div>
<p>はじめに</p>
<p>次に</p>
</div>
</div>
</section>
今日のレッスン
第1章
はじめに
次に

2. 子要素を取得しましょう
<section>
<h1 id="title">今日のレッスン</h1>
<div id="lesson">
<p>第1章</p>
<div>
<p>はじめに</p>
<p>次に</p>
</div>
</div>
</section>
$('#lesson').find('p').css('color','red');
今日のレッスン
第1章
はじめに
次に
？
子要素の取得①find
全ての子孫要素か
ら指定したセレクタの
要素を取得

3. 子要素を取得しましょう
<section>
<h1 id="title">今日のレッスン</h1>
<div id="lesson">
<p>第1章</p>
<div>
<p>はじめに</p>
<p>次に</p>
</div>
</div>
</section>
$('#lesson').find('p').css('color','red');
今日のレッスン
第1章
はじめに
次に
子要素の取得①find

4. 子要素を取得しましょう
子要素の取得②children
<section>
<h1 id="title">今日のレッスン</h1>
<div id="lesson">
<p>第1章</p>
<div>
<p>はじめに</p>
<p>次に</p>
</div>
</div>
</section>
今日のレッスン
第1章
はじめに
次に

5. 子要素を取得しましょう
<section>
<h1 id="title">今日のレッスン</h1>
<div id="lesson">
<p>第1章</p>
<div>
<p>はじめに</p>
<p>次に</p>
</div>
</div>
</section>
$(‘#lesson').children('p').css('color','red');
今日のレッスン
第1章
はじめに
次に
？
子要素の取得②children
子要素（１階層だ
け下）から指定したセ
レクタの要素を取得

6. 子要素を取得しましょう
<section>
<h1 id="title">今日のレッスン</h1>
<div id="lesson">
<p>第1章</p>
<div>
<p>はじめに</p>
<p>次に</p>
</div>
</div>
</section>
$(‘#lesson').children('p').css('color','red');
今日のレッスン
第1章
はじめに
次に
子要素の取得②children