jquery过滤选择器
jQuery过滤选择器用法
jQuery过滤选择器用于从匹配的元素集合中进一步筛选特定元素，主要通过位置、内容或状态进行过滤。以下是常用过滤选择器的分类与示例：
基础过滤选择器
-
:first
选取第一个匹配元素$("div:first")选择文档中第一个<div> -
:last
选取最后一个匹配元素$("div:last")选择文档中最后一个<div> -
:even/:odd
选取偶数或奇数索引元素（索引从0开始）$("tr:even")选择表格中偶数行 -
:eq(index)
选取指定索引位置的元素$("li:eq(2)")选择第三个<li> -
:gt(index)/:lt(index)
选取大于或小于指定索引的元素$("td:gt(3)")选择索引大于3的所有<td>
内容过滤选择器
-
:contains(text)
选取包含指定文本的元素$("p:contains('Hello')")选择包含"Hello"的<p> -
:empty
选取没有子元素的空元素$("div:empty")选择所有空的<div>
-
:has(selector)
选取包含特定子元素的元素$("div:has(p)")选择包含<p>的<div> -
:parent
选取含有子元素或文本的元素$("td:parent")选择非空的<td>
可见性过滤选择器
-
:hidden
选取所有隐藏元素（包括display:none或表单隐藏域）$("input:hidden") -
:visible
选取所有可见元素$("div:visible")
子元素过滤选择器
-
:nth-child
按子元素位置筛选$("ul li:nth-child(2)")选择每个<ul>的第二个<li>
-
:first-child/:last-child
选取作为父元素第一个或最后一个子元素的节点$("span:first-child")
表单过滤选择器
-
:input
选取所有表单元素（input/select/textarea/button）$(":input") -
:checked
选取被选中的复选框或单选按钮$("input:checked") -
:selected
选取被选中的下拉选项$("option:selected") -
:disabled/:enabled
选取禁用或启用的表单元素$("input:enabled")
组合使用示例
// 选择表格中可见的偶数行且包含"重要"文本的tr
$("tr:visible:even:contains('重要')")
// 选择表单中所有非隐藏的文本输入框
$("input[type=text]:not(:hidden)")性能优化建议
- 优先使用原生CSS选择器（如
$("div.class")），过滤选择器会增加开销 - 缓存重复使用的选择器结果
var $items = $(".list-item"); $items.filter(":visible") - 链式操作时，将范围缩小的选择器放在前面
