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>
// 扩展jQuery对象，添加showTagInfo()方法
// 用于将jQuery对象所有匹配元素的标识信息追加到body元素内
// 每个元素的标识信息形如："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个元素
$("#n1 p").showTagInfo();

// 匹配p元素的所有后代span元素
// 选择了id分别为n3、n5、n6的3个元素
$("p span").showTagInfo();

// 匹配id为n1的元素的后代中
// 选择了id为n6的一个元素
$("#n1 p.detail span.c").showTagInfo();
</script>