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>

输出:

jQuery :has() 选择器

实例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>