本章节将介绍 jQuery 选择器中的内容选择器。
选取包含指定文本内容（text）的元素，文本匹配不区分大小写，只要元素内部（包括子元素）包含该文本即会被选中。例如：
<ul>
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>运行代码，将选择如下元素：
<li>擅长编写代码</li>选取不包含任何子元素（包括文本节点、空格）的空元素，仅元素本身无内容时才会被选中。例如：
<ul>
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>运行代码，将选择如下元素：
<li></li>选取包含匹配指定选择器（selector）的子元素的元素，只要元素的后代中存在符合该选择器的元素，就会被选中。例如：
<ul>
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>
<p>我的缺点：</p>
<ul></ul>运行代码，将选择如下元素：
<ul>
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>与 :empty 相反，选取包含子元素（包括文本节点、空格）的非空元素，只要元素内有内容（哪怕仅一个空格）即会被选中。例如：
<ul>
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>运行代码，将选择如下元素：
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>下面通过一个示例演示各个选择器的含义，通过为选中的元素添加样式，直观查看个基本选择器的效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程：选择器</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
div { margin:20px; }
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
sup {color: red; font-size: 12px; background: transparent !important;}
ul li { margin: 3px 0;}
h3 { font-size: 18px; }
/* 效果样式 */
.myClass {
box-shadow: inset 0 0 5px red;
}
</style>
</head>
<body>
<div class="app">
<h3>内容选择器</h3>
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input id="myName" type="text" name="name" placeholder="你的姓名" />
</p>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" /> <label>运动</label>
<input type="checkbox" title="看书" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" /> <label>旅行</label>
</fieldset>
<p>我的特长：</p>
<ul>
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li></li>
</ul>
<p>我的缺点：</p>
<ul></ul>
</form>
</div>
<div>
<!-- :contains(text) 匹配包含给定文本的元素 $("div:contains('John')") -->
<button type="button" onclick="
reset();
// 匹配内容包含 “写代码” 的元素
$('li:contains(\'写代码\')').addClass('myClass');
">li:contains('写代码')</button>
<!-- :empty 匹配所有不包含子元素或者文本的空元素 $("div:empty") -->
<button type="button" onclick="
reset();
// 匹配包含所有 li 空的元素
$('li:empty').addClass('myClass');
">li:empty</button>
<!-- :has(selector) 匹配含有选择器所匹配的元素的元素 $("div:has(p)") -->
<button type="button" onclick="
reset();
// 匹配拥有子元素 li 的 ul 元素
$('ul:has(li)').addClass('myClass');
">ul:has(li)</button>
<!-- :parent 匹配含有子元素或者文本的元素 -->
<button type="button" onclick="
reset();
// 匹配内容包含子元素或者文本的 li 元素
$('li:parent').addClass('myClass');
">li:parent</button>
</div>
<script>
function reset() {
$('*').removeClass('myClass');
}
</script>
</body>
</html>运行示例，点击“$('li:contains(\'写代码\')')”按钮，效果如下图：
你可以点击其他按钮，查看其他选择器的效果。
更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098