代碼示例:
<!DOCTYPE html>
<html>
<head>
<title>selectorDemo3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//:contains(text)選擇含有文本内容為text的元素
//$("div:contains('John')").css({background:"red"});
//:empty選取不包含子元素或者文本為空的元素
//$("td:empty").css({background:"red"});
//:has(selector)選取含有選擇器比對的元素的元素
//$("div:has(#div1)").css({background:"red"});
//:parent選取含有子元素或者文本元素
$("td:parent").css({background:"red"});
});
</script>
</head>
<body>
<div>John Resig</div>
<div>George Marth</div>
<div>Malcom John Tom</div>
<table border="1px solid">
<tr>
<td></td>
<td>Value1</td>
</tr>
<tr>
<td>Value2</td>
<td></td>
</tr>
</table>
<div style="200px;height:200px;border:1px solid;">
<div id="div1" style="50px;height:50px;border:1px solid;background:green"></div>
</div>
</body>
</html>