jquery过滤选择器
jQuery 过滤选择器
jQuery 提供了一系列过滤选择器，用于从匹配的元素集合中筛选出符合条件的子集。这些选择器通常基于元素的位置、状态或内容进行过滤。
基本过滤选择器
:first
选择匹配的第一个元素。
示例：$("div:first") 选择文档中的第一个 <div> 元素。
:last
选择匹配的最后一个元素。
示例：$("div:last") 选择文档中的最后一个 <div> 元素。
:even
选择索引为偶数的元素（索引从 0 开始）。
示例：$("tr:even") 选择表格中偶数行的 <tr> 元素。
:odd
选择索引为奇数的元素（索引从 0 开始）。
示例：$("tr:odd") 选择表格中奇数行的 <tr> 元素。
:eq(index)
选择指定索引位置的元素。
示例：$("li:eq(2)") 选择第三个 <li> 元素（索引为 2）。
:gt(index)
选择索引大于指定值的元素。
示例：$("li:gt(1)") 选择索引大于 1 的所有 <li> 元素。
:lt(index)
选择索引小于指定值的元素。
示例：$("li:lt(3)") 选择索引小于 3 的所有 <li> 元素。
:not(selector)
选择不匹配指定选择器的元素。
示例：$("input:not(:checked)") 选择未选中的 <input> 元素。
内容过滤选择器
:contains(text)
选择包含指定文本的元素（区分大小写）。
示例：$("div:contains('Hello')") 选择包含文本 "Hello" 的 <div> 元素。
:empty
选择没有子元素或文本的空元素。
示例：$("td:empty") 选择空的 <td> 元素。
:has(selector)
选择至少包含一个匹配指定选择器的子元素的元素。
示例：$("div:has(p)") 选择包含 <p> 元素的 <div> 元素。
:parent
选择至少包含一个子元素或文本的非空元素。
示例：$("td:parent") 选择非空的 <td> 元素。
可见性过滤选择器
:hidden
选择所有隐藏的元素（包括 display: none、visibility: hidden 或表单元素类型为 hidden）。
示例：$("div:hidden") 选择所有隐藏的 <div> 元素。
:visible
选择所有可见的元素（不包含 display: none 或 visibility: hidden）。
示例：$("div:visible") 选择所有可见的 <div> 元素。
子元素过滤选择器
:nth-child(n)
选择父元素下的第 n 个子元素（从 1 开始计数）。
示例：$("ul li:nth-child(2)") 选择每个 <ul> 的第二个 <li> 子元素。
:first-child
选择父元素下的第一个子元素。
示例：$("ul li:first-child") 选择每个 <ul> 的第一个 <li> 子元素。
:last-child
选择父元素下的最后一个子元素。
示例：$("ul li:last-child") 选择每个 <ul> 的最后一个 <li> 子元素。
:only-child
选择父元素下唯一的子元素。
示例：$("div span:only-child") 选择作为 <div> 唯一子元素的 <span>。
表单过滤选择器
:input
选择所有表单元素（包括 <input>、<select>、<textarea> 和 <button>）。
示例：$(":input") 选择所有表单元素。
:text
选择类型为 text 的 <input> 元素。
示例：$("input:text") 选择所有文本输入框。
:checkbox
选择类型为 checkbox 的 <input> 元素。
示例：$("input:checkbox") 选择所有复选框。
:radio
选择类型为 radio 的 <input> 元素。
示例：$("input:radio") 选择所有单选按钮。
:password
选择类型为 password 的 <input> 元素。
示例：$("input:password") 选择所有密码输入框。
:submit
选择类型为 submit 的 <input> 或 <button> 元素。
示例：$(":submit") 选择所有提交按钮。
:reset
选择类型为 reset 的 <input> 或 <button> 元素。
示例：$(":reset") 选择所有重置按钮。
:button
选择类型为 button 的 <input> 或 <button> 元素。
示例：$(":button") 选择所有普通按钮。
:image
选择类型为 image 的 <input> 元素。
示例：$("input:image") 选择所有图像按钮。
:file
选择类型为 file 的 <input> 元素。
示例：$("input:file") 选择所有文件上传输入框。
表单状态过滤选择器
:enabled
选择所有启用的表单元素。
示例：$("input:enabled") 选择所有启用的 <input> 元素。
:disabled
选择所有禁用的表单元素。
示例：$("input:disabled") 选择所有禁用的 <input> 元素。
:checked
选择所有选中的复选框或单选按钮。
示例：$("input:checked") 选择所有选中的复选框或单选按钮。
:selected
选择所有选中的 <option> 元素。
示例：$("option:selected") 选择所有选中的下拉选项。
使用示例
// 选择表格中的偶数行并设置背景色
$("tr:even").css("background-color", "#f2f2f2");
// 选择所有包含 "error" 文本的 div 并添加类
$("div:contains('error')").addClass("error-highlight");
// 选择所有隐藏的表单元素并显示
$("form :hidden").show();
// 选择所有未选中的复选框
$("input:checkbox:not(:checked)").prop("disabled", true);这些过滤选择器可以单独使用，也可以与其他选择器组合，实现更灵活的 DOM 操作。
