HTML元素的父子關係

例如

$('div p') 為選擇所有父元素div內的p都會有效果

$('div > p')為選擇所有父元素div的p子元素有效果

$('div + ul')為選擇所有div緊接再後的ul元素有效果

程式範例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML父子關係之變色效果</title>
<style type="text/css">
    .red{color:red;}
    .blue{color:blue;}
    .green{color: green;}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script language="javascript">
    $(document).ready(function(){
        $('div p').addClass('blue');
        $('div > p').addClass('red');
        $('div + ul').addClass('green');
        
    });
    
</script>
<body>
<p>以下div + ul效果：</p>
<ul><p>在div前沒效果</p></ul>
<div><p>此為div</p></div>
<ul><p>緊接div之後的ul的效果</p></ul>

<p>以下為div p，只要是div內的p都會有效果</p>
<div>
<p>父元素div的子元素p</p>
<b><p>父元素div，其子孫元素p</p></b>
<ul><p>父元素div之後的p元素</p></ul>
</div>

<p>沒有div p則用div > p</p>
<div>
<p>是紅色的</p>
</div>

</body>
</html>

創作者介紹
創作者 學習資訊部落 的頭像
小甲學習地

學習資訊部落

小甲學習地 發表在 痞客邦 留言(0) 人氣( 101 )

▲top

請先 登入 以發表留言。

Recommended

你可能也喜歡

為你精選 3 篇值得延伸閱讀的內容

載入推薦文章中...
目前沒有推薦文章