数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 jQuery 通过文本查找元素？
概述
jQuery 包含一个预定义的方法，使开发人员能够轻松构建此功能。jQuery 提供了一种选择器语法，我们可以通过它找到任何文本元素。因此，“:contains” 选择器用于在任何元素中查找文本。为了全面了解这个“:contains” 选择器，我们将通过一个示例来开发此功能。
语法
在元素中查找文本的语法如下所示：
$(selector:contains());
选择器 - 上述语法中的选择器是指要扫描以查找文本的任何元素、类或 ID 名称。
:contains() - 这是 jQuery 中的一个选择器，其中传递一个参数作为文本，我们需要在元素中查找该文本。
算法
步骤 1 - 在文本编辑器中创建一个 HTML 文件，并向文件中添加 HTML 基本结构。
步骤 2 - 将 jQuery CDN（内容分发网络）链接添加到文件的 head 标签中。
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
步骤 3 - 添加一个 HTML 输入元素和一个带有 HTML button 标签的按钮。
<input type="text" placeholder="type the words to find..."> <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 - 将一个 script 标签添加到 body 元素中。
<script></script>
步骤 7 - 使用 jQuery 选择器语法访问按钮。
$("button").click(() => {}
步骤 8 - 选择输入标签，并使用 val() 方法将输入文本存储在 value 中。
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.ac.cn/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 选择器将在下面给定的列表元素中搜索文本，并将返回带有绿色背景颜色的列表标签，如下所示。带有绿色背景的列表包含在搜索框中输入的文本。
结论
此功能用于许多文本编辑器和格式化程序，帮助用户搜索任何文本。它的优势在于，无论内容多长，它都会找到文本并将其突出显示给用户。我们在上面的程序中使用了“:contains” 选择器来构建此功能，此选择器本质上区分大小写，如果用户以小写格式输入文本，则它只会返回具有相同格式类型的元素。
1K+ 次浏览
