主页/jQuery教程/jQuery 选择器/jQuery过滤选择器

jQuery教程

jQuery过滤选择器

7,270字
31–46 分钟

在掌握了基本选择器与层次选择器之后，开发者往往需要根据元素更具体的特征，如索引位置、内容、可见状态或包含的特定属性来筛选元素。jQuery过滤选择器正是为此类精确筛选而设计，它允许开发者从已选中的元素集合中，通过特定的过滤规则筛选出所需的DOM元素。所有的过滤选择器均以冒号（:）开头，其语法与CSS中的伪类选择器相似。本章将详细分类并逐一解析各类jQuery过滤选择器的用法，并通过完整示例演示其功能。

目录

基本过滤选择器

基本过滤选择器主要根据元素在集合中的索引位置或特定状态进行筛选。这类选择器在处理列表、表格等结构化数据时非常实用。

表：基本过滤选择器

选择器说明
:first匹配找到的第一个元素。
:last匹配找到的最后一个元素。
:not(selector)去除所有与给定选择器匹配的元素。
:even匹配所有索引值为偶数的元素，索引从0开始。
:odd匹配所有索引值为奇数的元素。
:eq(index)匹配一个给定索引值的元素。
:gt(index)匹配所有大于给定索引值的元素。
:lt(index)匹配所有小于给定索引值的元素。
:header匹配所有标题元素，如h1, h2, h3等。

示例：基本过滤选择器

以下示例演示了如何使用基本过滤选择器来改变不同列表项的背景色。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery基本过滤选择器示例</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        li { width: 100px; height: 30px; margin: 5px; border: 1px solid #ccc; list-style: none; }
    </style>
    <script>
        $(function () {
            $("#btnFirst").click(function () {
                $("li:first").css("background-color", "#FF9600");
            });
            $("#btnLast").click(function () {
                $("li:last").css("background-color", "#FF9600");
            });
            $("#btnEven").click(function () {
                $("li:even").css("background-color", "#FF9600");
            });
            $("#btnEq2").click(function () {
                $("li:eq(2)").css("background-color", "#FF9600");
            });
            $("#btnGt2").click(function () {
                $("li:gt(2)").css("background-color", "#FF9600");
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>列表项 0 (索引0)</li>
        <li>列表项 1 (索引1)</li>
        <li>列表项 2 (索引2)</li>
        <li>列表项 3 (索引3)</li>
        <li>列表项 4 (索引4)</li>
    </ul>
    <button id="btnFirst">选中:first</button>
    <button id="btnLast">选中:last</button>
    <button id="btnEven">选中:even</button>
    <button id="btnEq2">选中:eq(2)</button>
    <button id="btnGt2">选中:gt(2)</button>
</body>
</html>

内容过滤选择器

内容过滤选择器的过滤规则主要依据元素所包含的子元素或文本内容。通过它，可以找到包含特定文本或特定结构的元素。

表：内容过滤选择器

选择器说明
:contains(text)匹配包含给定文本的元素。
:empty匹配所有不包含子元素或文本的空元素。
:has(selector)匹配含有选择器所匹配的元素的元素。
:parent匹配含有子元素或文本元素的元素，与:empty相反。

示例：内容过滤选择器

本例将根据按钮点击，为包含特定文字或含有特定子标签的<div>元素设置背景色。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery内容过滤选择器示例</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        div { width: 200px; height: 50px; border: 1px solid red; margin: 5px; }
    </style>
    <script>
        $(function () {
            $("#btnContains").click(function () {
                $("div:contains('内容二')").css("backgroundColor", "green");
            });
            $("#btnHas").click(function () {
                $("div:has(span)").css("backgroundColor", "pink");
            });
            $("#btnEmpty").click(function () {
                $("div:empty").css("backgroundColor", "yellow");
            });
        });
    </script>
</head>
<body>
    <button id="btnContains">包含"内容二"</button>
    <button id="btnHas">包含span元素</button>
    <button id="btnEmpty">空元素</button>
    <br/><br/>

    <div>这是内容一</div>
    <div>这是内容二</div>
    <div></div>
    <div><span>这是span内的内容</span></div>
</body>
</html>

可见性过滤选择器

可见性过滤选择器根据元素在页面上的可见或隐藏状态进行筛选。值得注意的是，:hidden选择器不仅匹配样式属性display为none的元素，也匹配类型为hidden的<input>元素以及visibility: hidden的元素。

表：可见性过滤选择器

选择器说明
:visible匹配所有可见的元素。
:hidden匹配所有不可见的元素。

示例：可见性过滤选择器

本例演示了如何操作可见与不可见的元素，包括修改可见元素的样式以及将隐藏元素显示出来。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery可见性过滤选择器示例</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        div { width: 250px; height: 50px; border: 1px solid blue; margin: 5px; }
    </style>
    <script>
        $(function () {
            $("#btnVisible").click(function () {
                $("div:visible").css("background", "lightblue");
            });
            $("#btnHidden").click(function () {
                $("div:hidden").show(1000).css("background", "lightgreen");
            });
        });
    </script>
</head>
<body>
    <h3>可见性过滤选择器</h3>
    <button id="btnVisible">改变可见div背景色</button>
    <button id="btnHidden">显示隐藏div</button>
    <br/><br/>
    <div>我是可见的div</div>
    <div style="display:none;">我是隐藏的div (display:none)</div>
    <input type="hidden" value="我是隐藏域">
</body>
</html>

属性过滤选择器

属性过滤选择器通过元素的属性及其值来筛选元素。它提供了灵活的匹配模式，如完全等于、包含或以特定字符串开头/结尾等。

表：属性过滤选择器

选择器说明
[attribute]匹配包含给定属性的元素。
[attribute=value]匹配给定属性等于特定值的元素。
[attribute!=value]匹配给定属性不等于特定值的元素（包含没有该属性的元素）。
[attribute^=value]匹配给定属性是以特定值开头的元素。
[attribute$=value]匹配给定属性是以特定值结尾的元素。
[attribute*=value]匹配给定属性包含特定值的元素。
[selector1][selector2]复合属性选择器，匹配同时满足多个属性条件的元素。

示例：属性过滤选择器

以下代码展示了如何通过<a>标签的title属性以及href属性的特征来筛选元素并修改其样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性过滤选择器示例</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnTitle").click(function () {
                $("a[title]").css({ "color": "#FF9600", "font-size": "16px" });
            });
            $("#btnHrefStartsWith").click(function () {
                $("a[href^='https']").css("border", "2px solid green");
            });
            $("#btnHrefContains").click(function () {
                $("a[href*='example']").css("background-color", "yellow");
            });
        });
    </script>
</head>
<body>
    <button id="btnTitle">含title属性的链接</button>
    <button id="btnHrefStartsWith">href以https开头的链接</button>
    <button id="btnHrefContains">href包含'example'的链接</button>
    <br/><br/>
    <a href="#" title="第一个链接">链接1 (有title)</a><br/>
    <a href="https://www.example.com">链接2 (https)</a><br/>
    <a href="http://www.test.com/example/page.html">链接3 (包含example)</a><br/>
    <a href="#">链接4 (无特殊属性)</a>
</body>
</html>

子元素过滤选择器

子元素过滤选择器与基本过滤选择器不同，它在每个父元素的子元素集合中独立进行索引和筛选。例如，:first-child选取的是每个父元素下的第一个子元素，而不是整个匹配集中的第一个。

表：子元素过滤选择器

选择器说明
:first-child获取每个父元素下的第一个子元素。
:last-child获取每个父元素下的最后一个子元素。
:nth-child(n)获取每个父元素下的第n个子元素。n可以是数字、even或odd。
:only-child获取父元素中唯一的子元素（该父元素仅有一个子元素）。

示例：子元素过滤选择器

本例将展示如何为不同列表中的偶数项和首个列表项设置背景色，以突出子元素过滤器的特点。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery子元素过滤选择器示例</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        ul { float: left; margin-right: 50px; }
        li { width: 80px; height: 25px; border: 1px solid #aaa; list-style: none; margin: 2px; }
    </style>
    <script>
        $(function () {
            $("#btnNthChild").click(function () {
                $("ul li:nth-child(even)").css("background-color", "#FF9600");
            });
            $("#btnFirstChild").click(function () {
                $("ul li:first-child").css("background-color", "lightblue");
            });
        });
    </script>
</head>
<body>
    <button id="btnNthChild">高亮每个列表中的偶数项</button>
    <button id="btnFirstChild">高亮每个列表中的第一项</button>
    <br/><br/>
    <ul>
        <li>列表A-1</li>
        <li>列表A-2</li>
        <li>列表A-3</li>
    </ul>
    <ul>
        <li>列表B-1</li>
        <li>列表B-2</li>
        <li>列表B-3</li>
        <li>列表B-4</li>
    </ul>
</body>
</html>

表单对象属性过滤选择器

此类选择器专门针对表单元素的特定状态进行筛选，如可用、禁用、选中或选择状态。

表：表单对象属性过滤选择器

选择器说明
:enabled匹配所有可用的元素。
:disabled匹配所有不可用的元素。
:checked匹配所有被选中的元素（单选按钮、复选框）。
:selected匹配所有被选中的选项元素（下拉列表）。

示例：表单对象属性过滤选择器

本示例演示如何获取并操作表单中处于不同状态（如选中、禁用）的元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery表单对象属性过滤选择器</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btnGetChecked").click(function () {
                let checkedValues = [];
                $("input:checked").each(function () {
                    checkedValues.push($(this).val());
                });
                alert("选中的复选框值: " + checkedValues.join(", "));
            });

            $("#btnGetSelected").click(function () {
                let selectedText = $("#citySelect option:selected").text();
                alert("下拉框选中的是: " + selectedText);
            });

            $("#btnDisableInputs").click(function () {
                $("input:text:enabled").prop("disabled", true);
            });
        });
    </script>
</head>
<body>
    <form>
        爱好:
        <input type="checkbox" name="hobby" value="读书" checked> 读书
        <input type="checkbox" name="hobby" value="运动"> 运动
        <input type="checkbox" name="hobby" value="音乐" checked> 音乐
        <br/><br/>
        城市:
        <select id="citySelect">
            <option value="北京">北京</option>
            <option value="上海" selected>上海</option>
            <option value="广州">广州</option>
        </select>
        <br/><br/>
        用户名: <input type="text" value="张三"><br/>
        备注: <input type="text" value="可用状态" disabled>
        <br/><br/>
    </form>
    <button id="btnGetChecked">获取选中的复选框</button>
    <button id="btnGetSelected">获取下拉框选中项</button>
    <button id="btnDisableInputs">禁用所有可用的文本框</button>
</body>
</html>

通过本章的学习可以看出，jQuery过滤选择器提供了一套功能强大且语义清晰的筛选机制，使得开发者能够精准地从DOM树中定位到满足特定条件的元素。熟练运用这些选择器，是编写高效、简洁的jQuery代码的关键，能够极大地提升前端开发的效率和代码的可读性。

最新发布