如何使用 jQuery 通过文本查找元素?

jqueryweb developmentfront end technology更新于 2026/2/9 12:22:17

概述

JQuery 包含一个预定义的方法，方便开发者轻松构建此功能。JQuery 提供了一个选择器语法，可以用来查找任何文本元素。例如，":contains"选择器可用于查找任何元素中的文本。为了全面了解":contains"选择器，我们将通过一个示例来开发此功能。

语法

查找元素中文本的语法如下 -

$(selector:contains());

选择器 − 上述语法中的选择器是指任何需要扫描以查找文本的元素、类或 ID 名称。
:contains() − 这是 Jquery 中的一个选择器，它将一个文本参数传递给它，我们需要在元素中找到该文本。

算法

步骤 1 − 在文本编辑器中创建一个 HTML 文件，并向该文件添加 HTML 样板代码。
步骤 2 − 现在将 Jquery CDN(内容分发网络)链接添加到文件的 head 标签。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

步骤 3 − 现在添加一个 HTML 输入元素和一个带有 HTML 按钮标签的按钮。

<input type="text" placeholder="输入要查找的单词...">
<button>Check</button>

步骤 4 − 现在创建一个无序列表，其中包含一些要在元素上搜索的列表点。

<ul>
   <li>Tutorialspoint provides best variety of courses.</li>
   <li>I am  a Java Developer.</li>
   <li>HTML stands for Hypertext markup language.</li>
   <li>JavaScript is a scripting language.</li>
   <li>Web application provides are the best in terms of storage.</li>
   <li>Tutorialspoint is a best platform to learn.</li>
</ul>

步骤 5 − 添加内部样式标签来制作页面布局。

<style>
   ul{
      display: flex;
      flex-direction: column;
   }
   li{
      margin: 0.5rem 0;
   }
</style>

第 6 步 − 现在向 body 元素添加一个 script 标签。

<script></script>

步骤 7 - 使用 Jquery 选择器语法访问按钮。

$("button").click(() => {}

步骤 8 - 现在选择输入标签，并使用 val() 方法将输入文本存储在值中。

var val = $("input").val();

步骤 9 - 使用选择器通过 ":contains()" 选择器选择列表标签，并传递 "val" 变量以查找输入的内容文本。

$(`li:contains(`+val+`)`).css({"backgroundColor":"green","color":"white"});

步骤 10 - 通过文本查找元素已成功创建。

示例

在此示例中，我们将创建一个包含一般要点列表的无序列表。我们还将创建一个用于搜索的输入框和一个按钮。在此示例中，我们将动态搜索列表标签中存在的任何单词。

<html>
<head>
   <title> find the element by text </title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
   <style>
      ul{
         display: flex;
         flex-direction: column;
      }
      li{
         margin: 0.5rem 0;
      }
   </style>
</head>
<body>
   <h3>Type the words and check it in an element.</h3>
   <input type="text" placeholder="type the words to find..."><button>Check</button>
   <ul>
      <li> Tutorialspoint provides best variety of courses.</li>
      <li> I am  a Java Developer.</li>
      <li> HTML stands for Hypertext markup language.</li>
      <li> JavaScript is a scripting language.</li>
      <li> Web application provides are the best in terms of storage.</li>
      <li> Tutorialspoint is a best platform to learn.</li>
   </ul>
   <script>
      $("button").click(() => {
         var val = $("input").val();
         $(`li:contains(`+val+`)`).css({"backgroundColor":"green","color":"white"})
      })
   </script>
</body>
</html>

下图展示了上述示例的输出，其中浏览器窗口加载了一个输入框，用于在框内输入文本，以及一个触发搜索功能的按钮。当用户在搜索框中输入文本"Tutorialspoint"并点击"检查"按钮时，contains 选择器将在下面给出的列表元素中搜索文本，并返回带有绿色背景的列表标签，如下所示。绿色背景的列表包含在搜索框中输入的文本。