jQuery :has() 选择器

实例

1、选取所有包含有 <span> 元素在其内的 <p> 元素:

$("p:has(span)")
 
 
 
2、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div:has(p,span,li)").css("border","solid red");
});
</script>
</head>
<body>

<div>
<p> div 中的 p 元素
<span>这是 span 元素</span>
</p>
<li>div 中的列表项</li>
</div><br>

<div>这个 div 元素没有 p, span 或 li 元素。</div>

</body>
</html>
 
 
 
 
 
3、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div:not(:has(h1))").css("background-color","yellow");
});
</script>
</head>
<body>

<div>
<h1>这是一个标题 (h1)</h1>
<p>这是一个段落。</p>
</div>

<div>
<h2>这是一个标题 (h2)</h2>
<p>这是一个段落。</p>
</div>

<div>
<h3>这是一个标题 (h3)</h3>
<p>这是一个段落。</p>
</div>

</body>
</html>
原文地址:https://www.cnblogs.com/jianxingjianyuan/p/6544060.html