jQuery使用contains过滤器实现精确匹配方法详解

什么是contains过滤器？

contains是jQuery中的一个过滤器，用于匹配元素的文本内容。它可以根据指定的字符串来查找相应的元素。contains过滤器可以配合其他选择器使用，实现更精确的元素查找。

contains过滤器的语法

contains过滤器的语法格式如下：

$("element:contains(text)")

其中，element表示要查找的元素，text表示要匹配的字符串。

contains过滤器的使用方法

contains过滤器可以用于查找包含指定字符串的元素，并将它们选中。下面是一个简单的示例：

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li class="selected">Orange</li>
  <li>Pineapple</li>
</ul>

我们可以使用以下代码来选中文本内容中包含"Orange"字符串的元素：

$("li:contains('Orange')").addClass("selected");

在上述代码中，我们使用contains过滤器来匹配包含"Orange"字符串的元素，并使用addClass方法将它们选中并添加类名"selected"。

我们还可以通过与其他选择器一起使用contains过滤器，实现更加精确的元素查找。例如，我们想选中class为"fruit"的元素中文本内容中包含"orange"的所有元素，可以使用以下代码：

$(".fruit:contains('orange')").removeClass("hidden");

在上述代码中，我们使用了类选择器 .fruit 选中class为"fruit"的元素，并结合contains过滤器来匹配包含"orange"字符串的元素，并使用removeClass方法将它们选中并移除类名"hidden"。

示例说明

示例一

<div id="content">
  <h1>Title</h1>
  <p class="text">This is a paragraph.</p>
  <p class="text">This is another paragraph contain word "example".</p>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li class="selected">Orange</li>
    <li>Pineapple</li>
  </ul>
</div>

实现功能：选中文本包含"example"字符串的所有段落元素，并改变它们的字体颜色。

代码：

$("p:contains('example')").css("color", "red");

在上述代码中，我们使用contains过滤器来选中所有文本包含"example"字符串的段落元素，并用css()方法来改变它们的字体颜色。

示例二

<div id="content">
  <h1>Title</h1>
  <div class="fruit">
    <h2>Fruit</h2>
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li class="selected">Orange</li>
      <li>Pineapple</li>
    </ul>
  </div>
  <div class="vegetable">
    <h2>Vegetable</h2>
    <ul>
      <li>Carrot</li>
      <li>Potato</li>
      <li>Spinach</li>
      <li class="hidden">Broccoli</li>
    </ul>
  </div>
</div>

实现功能：选中class为"fruit"的元素中文本内容中包含"orange"的所有元素，并移除它们的.hidden类名。

代码：

$(".fruit:contains('orange') li").removeClass("hidden");

在上述代码中，我们使用了类选择器 .fruit 选中class为"fruit"的元素，并结合contains过滤器来匹配包含"orange"字符串的元素，在此基础上选中其所有的li子元素，并使用removeClass方法将它们选中并移除类名"hidden"。