Jaye的碎碎念

一、階層式選取

<h1>Where do you want to go?</h1>
<h2>Travel Destinations</h2>
     <p>Plan your next adventure.</p>
           <ul id="destinations">
                  <li>Paris</li>
                  <li>Rome</li>
                  <li class='promo'>Rio</li>
</ul>

僅需選取黃色標籤時，用Parent&Child概念

$("#destinations li");

二、直屬Child

<h1>Where do you want to go?</h1>
<h2>Travel Destinations</h2>
<p>Plan your next adventure.</p>
<ul id="destinations">
    <li>Rome</li>
    <li>
        <ul id="france">
            <li>Paris</li>  (非直屬)
        </ul>
    </li>
    <li class = 'promo'>Rio</li>
</ul>

於這種情況下的話如果使用$("#destinations li");會將三行<li>都選起來

如果僅想選取黃色標籤時，要加直屬

$("#destinations > li");

三、多重選取

<h1>Where do you want to go?</h1>
<h2>Travel Destinations</h2> 
<p>Plan your next adventure.</p>
<ul id="destinations">
    <li>Rome</li>
    <li>
        <ul id="france">
            <li>Paris</li>
        </ul>
    </li>
    <li class = 'promo'>Rio</li>
</ul>

如果要同時選取可使用

$(".promo, #france");

四、順序選取

$("#destinations li:first");=>  第一個li

$("#destinations li:last");=>  最後一個li

※※※※※※※※※※※

$("#destinations li:odd");=> 基數li

$("#destinations li:even"); =>偶數 li

這邊要特別注意基數偶數數字是從0、1、2、3算起

----------------------------------------------------------------------------------------------------------------

課堂練習

<div id="tours-wrapper">
<h1>Guided Tours</h1>
<ul id="tours">
<correct><li class="america">
<h2>New York, New York</h2>
<span class="details">$1,899 for 7 nights</span>
<ul class="vote"><correct><li><a href="#">↑</a></li></correct><correct><li><a href="#">↓</a></li></correct></ul>
</li></correct>
<correct><li class="europe">
<h2>Paris, France</h2>
<span class="details">$2,499 for 7 nights</span>
<ul class="vote"><correct><li><a href="#">↑</a></li></correct><correct><li><a href="#">↓</a></li></correct></ul>
</li></correct>
<correct><li class="europe sale">
<h2>Madrid, Spain</h2>
<span class="details">$1,577 for 5 nights</span>
<ul class="vote"><correct><li><a href="#">↑</a></li></correct><correct><li><a href="#">↓</a></li></correct></ul>
</li></correct>
<correct><li class="asia">
<h2>Tokyo, Japan</h2>
<span class="details">$1,999 for 5 nights</span>
<ul class="vote"><correct><li><a href="#">↑</a></li></correct><correct><li><a href="#">↓</a></li></correct></ul>
</li></correct>
</ul>

<ul class="sorting">
<li><a href="#">America</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Asia</a></li>
</ul>
</div>

Q1: 選<ul id="tours">下的標籤

A1: $("#tours li");

Q2: 選<ul id="tours">下的直屬li

A2: $("#tours>li");

Q3: 直屬基數!

A3: $("#tours>li:odd");

Q4: 第一

A4: $("#tours li:first");

Q5: 直屬偶數

A5:  $("#tours>li:even");