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>
留言列表
程式語法 (11)
