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 元素
