Live
<p class="select">class="select"</p><div id="father"> john的父親(父層) <p class="find">class="find"</p> <div class="select" id="tom">tom (john的哥哥)</div> <p class="select" id="john">john</p> <p id="joy">joy (john的<b class="select">弟弟或妹妹</b>)</p> <p class="find">class="find"</p></div><p class="select">class="select"</p>
Live
x
#father .select { background-color: orange;}div #joy { background-color: gray;}/* 分辨各tag層級 */div { border:black 3px solid;}div > * { margin-left: 10px;}
Live
xxxxxxxxxx18
$("#father .select").click(function () { alert("orange");});/* 點擊文字"弟弟或妹妹" 會發現先跳出orange再跳出gray，這是JS的事件冒泡，可以使用 event.stopPropagation() 來阻止這個情況 *//* $("#father .select").click(function() { alert("orange"); event.stopPropagation()}); */$("div #joy").click(function () { alert("gray");});// jquery 可以使用 .find() 來選取同一家族內的指定元素$("#father").find('.find').click(function () { alert("find");});
External CSS
This Pen doesn't use any external CSS resources.