JQuery contains的选择器

当我们需要选择包含特定文本的元素时，我们可以使用JQuery选择器的contains选择器。这个选择器可以非常方便的帮助我们选择特定的元素。

1. 基本语法

在JQuery中，我们可以使用以下语法进行包含特定文本的元素选择。

$("*:contains('text')")

其中，'*'表示任意元素，'text'表示我们想要选择包含的文本。使用这个语法，我们就能够选择包含指定文本的所有元素。需要注意的是，contains选择器是区分大小写的。

2. 示例1

为了更好地理解contains选择器，我们来使用一个示例说明。比如说，在下面这个HTML代码中：

<div>
  <p>Hello World!</p>
  <p>Goodbye World!</p>
  <p>Hello John!</p>
</div>

我们想要选择包含“Hello”的所有p标签。我们可以使用以下代码进行选择：

$("p:contains('Hello')")

这个代码选择了包含“Hello”的第一个和第三个p标签。这样，我们就能够方便地选择包含特定文本的元素。

3. 示例2

除了选择单一的元素，我们也可以通过contains选择器选择多个元素。例如，我们有以下HTML代码：

<div>
  <p>Hello World!</p>
  <h1>Hello Universe!</h1>
  <p>Goodbye World!</p>
  <h2>Hello Earth!</h2>
  <p>Hello John!</p>
</div>

我们想要选择所有包含“Hello”的p标签和h标签。我们可以使用以下代码进行选择：

$("*:contains('Hello'):not(:has(*:contains('Hello')))").filter(function() {
  return $(this).find(":contains('Hello')").length == 1
})

这个代码选择了包含“Hello”的第一个p标签，第二个h标签，以及最后一个p标签。其中，contains选择器选出了所有包含“Hello”的元素，not选择器在这些元素中排除了包含子元素也包含“Hello”的元素，而filter函数排除了包含多个“Hello”的元素。这样，我们就能够方便地选择包含特定文本的元素，即使这些元素不属于同一种类型。