jQuery :has() 选择器

最新推荐文章于 2024-03-25 14:02:38 发布

寸寸时光

最新推荐文章于 2024-03-25 14:02:38 发布

阅读量1.6k

点赞数

文章标签： jquery

选取所有包含有元素在其内的

元素：
$(“p:has(span)”)。
举例：

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

<p><span>p 元素中的 span 元素</span></p>
<p>这个 p 元素没有 span 元素</p>

</body>
</html>

这里写图片描述

定义和用法
:has() 选择器选取所有包含一个或多个元素在其内的元素，匹配指定的选择器。
提示：为了选取包含有多个元素在其内的元素，请使用逗号（参见下面的实例）。
语法
$(“:has(selector)”)、
参数selector
描述必需。规定要选取的元素。
该参数接受任何类型的选择器。

选取包含有多个元素在内的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="http://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>

这里写图片描述

选取不含有指定元素在内的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="http://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>

这里写图片描述

寸寸时光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery :has() 选择器

选取所有包含有元素在其内的元素： $(“p:has(span)”)。举例：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.mi
复制链接

扫一扫