jQuery 選擇器 (ancestor descendant)

/* HTML代碼 */
<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Welcome</span>
    </p>
    <p id="n4" class="detail">
        <span id="n5" class="b codeplayer">To
            <span id="n6" class="c">w3cschool.cn</span>
        </span>
    </p>
</div>

/* jQuery代碼 */
<script>
// 擴(kuò)展jQuery對(duì)象，添加showTagInfo()方法
// 用于將jQuery對(duì)象所有匹配元素的標(biāo)識(shí)信息追加到body元素內(nèi)
// 每個(gè)元素的標(biāo)識(shí)信息形如："tagName"或"tagName#id"
jQuery.fn.showTagInfo = function(){
var tags = this.map( function(){
return this.tagName + ( this.id ? "#" + this.id : "" ); 
} ).get();
$("body").append( tags.join("<br>") + "<br><br>" );
};

// 選擇了id分別為n2、n4的2個(gè)元素
$("#n1 p").showTagInfo();

// 匹配p元素的所有后代span元素
// 選擇了id分別為n3、n5、n6的3個(gè)元素
$("p span").showTagInfo();

// 匹配id為n1的元素的后代中
// 選擇了id為n6的一個(gè)元素
$("#n1 p.detail span.c").showTagInfo();
</script>