jQuery :has() 选择器
jQuery :has() 选择器在jQuery中是用来选择所有的元素,这些元素里面有一个或多个符合指定选择器的元素。
语法:
$(":has(selector)")
参数:该选择器包含单参数选择器,这是必须的,用于指定要选择的元素。它也需要接受任何种类的选择器。
例子1:本例使用:has选择器来选择 <h2>
span元素来创建纯绿色的边框。
<!DOCTYPE html>
<html>
<head>
<title>jQuery :has() Selector</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to use :has selector -->
<script>
(document).ready(function () {
("h2:has(span)").css("border", "solid green");
});
</script>
</head>
<body>
<center>
<h1 id="geeks1" style="color:green;">GeeksForGeeks</h1>
<h2 id="geeks2"><span>jQuery :has() Selector</span></h2>
</center>
</body>
</html>
输出:
实例2:本例使用:has选择器来选择元素并创建边框。
<!DOCTYPE html>
<html>
<head>
<title>jQuery :has() Selector</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to use :has selector -->
<script>
(document).ready(function () {
("body:has(h1, span)").css("border", "solid green");
});
</script>
</head>
<body>
<center>
<h1 id="geeks1" style="color:green;">GeeksForGeeks</h1>
<h2 id="geeks2"><span>jQuery :has() Selector</span></h2>
</center>
</body>
</html>
输出: