jquery 筛选器

jQuery 筛选器

jQuery 筛选器用于从一组匹配的元素中进一步筛选出符合条件的子集。这些筛选器可以基于元素的位置、内容、属性或状态进行筛选。

基本筛选器

:first 选择第一个匹配的元素。
:last 选择最后一个匹配的元素。
:even 选择索引为偶数的元素（从 0 开始计数）。
:odd 选择索引为奇数的元素（从 0 开始计数）。
:eq(index) 选择指定索引位置的元素。
:gt(index) 选择索引大于指定值的元素。
:lt(index) 选择索引小于指定值的元素。
:not(selector) 选择不匹配给定选择器的元素。

$("li:first").css("color", "red"); // 选中第一个 li 元素
$("li:eq(2)").hide(); // 选中第三个 li 元素并隐藏
$("div:not(.highlight)").addClass("plain"); // 选中不包含 .highlight 类的 div 元素

内容筛选器

:contains(text) 选择包含指定文本的元素。
:empty 选择没有子元素或文本的空元素。
:has(selector) 选择至少包含一个匹配指定选择器的子元素的元素。
:parent 选择至少包含一个子元素或文本的元素。

$("p:contains('Hello')").addClass("highlight"); // 选中包含 "Hello" 文本的 p 元素
$("div:empty").remove(); // 删除所有空的 div 元素
$("ul:has(li.active)").css("border", "1px solid red"); // 选中包含 .active li 的 ul 元素

可见性筛选器

:visible 选择当前可见的元素。
:hidden 选择当前隐藏的元素。

$("div:visible").fadeOut(); // 隐藏所有可见的 div 元素
$("input:hidden").val("default"); // 设置所有隐藏 input 元素的值为 "default"

属性筛选器

[attribute] 选择具有指定属性的元素。
[attribute=value] 选择属性值等于指定值的元素。
[attribute!=value] 选择属性值不等于指定值的元素。
[attribute^=value] 选择属性值以指定值开头的元素。
[attribute$=value] 选择属性值以指定值结尾的元素。
[attribute*=value] 选择属性值包含指定值的元素。

$("a[target]").css("color", "blue"); // 选中带有 target 属性的 a 元素
$("input[type='text']").addClass("text-input"); // 选中 type 为 text 的 input 元素
$("img[src^='https']").attr("alt", "secure image"); // 选中 src 以 https 开头的 img 元素

子元素筛选器

:nth-child(n) 选择父元素下的第 n 个子元素。
:first-child 选择父元素下的第一个子元素。
:last-child 选择父元素下的最后一个子元素。
:only-child 选择父元素下唯一的子元素。

$("li:nth-child(2)").css("font-weight", "bold"); // 选中每个父元素下的第二个 li 元素
$("span:first-child").text("First!"); // 选中每个父元素下的第一个 span 元素

表单筛选器

:input 选择所有 input、textarea、select 和 button 元素。
:text 选择所有 type="text" 的 input 元素。
:password 选择所有 type="password" 的 input 元素。
:radio 选择所有 type="radio" 的 input 元素。
:checkbox 选择所有 type="checkbox" 的 input 元素。
:submit 选择所有 type="submit" 的 input 元素。
:reset 选择所有 type="reset" 的 input 元素。
:button 选择所有 type="button" 的 input 元素和 button 元素。
:checked 选择所有被选中的复选框或单选按钮。
:selected 选择所有被选中的 option 元素。
:enabled 选择所有启用的表单元素。
:disabled 选择所有禁用的表单元素。
:focus 选择当前获得焦点的表单元素。

$(":text").val(""); // 清空所有文本输入框
$(":checkbox:checked").closest("div").addClass("selected"); // 为包含选中复选框的 div 添加类
$("select option:selected").each(function() {
  console.log($(this).text());
}); // 输出所有被选中的 option 的文本

层级筛选器

parent > child 选择父元素下的直接子元素。
ancestor descendant 选择祖先元素下的所有后代元素。
prev + next 选择紧跟在 prev 元素后的 next 元素。
prev ~ siblings 选择 prev 元素之后的所有同级 siblings 元素。

$("ul > li").css("list-style", "none"); // 选中 ul 的直接子元素 li
$("div p").addClass("content"); // 选中 div 下的所有 p 元素
$("h2 + p").css("margin-top", "0"); // 选中紧跟在 h2 后的 p 元素
$("h1 ~ p").wrap("<div class='header-content'></div>"); // 选中 h1 之后的所有同级 p 元素