在前端开发中，我们经常需要使用 jQuery 选取 DOM 元素，并对其进行操作。而有时候我们需要根据元素中的文本内容来进行选取，比如选取包含某个关键词的 span 元素。本文将介绍如何使用 jQuery 实现这个功能。
1. jQuery 的选择器
在 jQuery 中，我们可以使用多种选择器来选取 DOM 元素。其中，最常用的是基于 CSS 选择器的方式。比如：
// 选取所有的 span 元素
$("span")
// 选取 class 为 red 的 span 元素
$(".red")
// 选取 id 为 my-span 的 span 元素
$("#my-span")更多的选择器可以参考 jQuery API 文档。
2. :contains() 选择器
在上面的例子中，我们可以通过类名或者 ID 来选取特定的元素。如果我们要根据文本内容来选取元素，那就需要使用 :contains() 选择器了。
:contains() 选择器可以匹配包含指定文本的元素，语法如下：
$(":contains(text)")其中，text 是要匹配的文本内容。比如：
// 选取包含 "Hello World" 文本的 span 元素
$("span:contains(Hello World)")需要注意的是，:contains() 选择器是区分大小写的。
3. 示例代码
下面是一个完整的例子，演示如何选取包含指定文本的 span 元素，并将其文本内容修改为另外一个值：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
------- -----------------------------------------------------------
--------
---------------------------- -
-- ---- ------ ------ --- ---- ------------- --------
---------------------- ------------------------
---
---------
-------
------
-------- ---- -------
----------- ------------
------------ ---- ---------
----------- -------------
-------
-------在这个例子中，我们先使用 $(document).ready() 函数来确保页面完全加载后再执行 jQuery 代码。然后，使用 $(":contains()") 选择器找到包含 "Hello World" 文本的 span 元素，并使用 .text() 方法将其文本内容修改为 "你好，世界！"。
4. 总结
通过本文的介绍，我们学习了如何使用 jQuery 选取包含指定文本值的 span 元素。在实际开发中，我们可以根据这个方法来选取相应的元素，并对其进行处理。同时，在使用 jQuery 选择器时，还需要注意选择器的语法和匹配规则，以免出现错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26491