jquery 筛选
jQuery 筛选方法
jQuery 提供了多种筛选元素的方法，可以根据不同的需求选择合适的方式。以下是常用的筛选方法：
基本筛选器
:first选择第一个元素$("div:first")选中第一个 div 元素:last选择最后一个元素$("div:last")选中最后一个 div 元素:even选择索引为偶数的元素$("tr:even")选中表格中偶数行的 tr 元素:odd选择索引为奇数的元素$("tr:odd")选中表格中奇数行的 tr 元素
内容筛选器
:contains(text)选择包含指定文本的元素$("div:contains('Hello')")选中包含 "Hello" 文本的 div 元素:empty选择没有子元素或文本的空元素$("td:empty")选中空的 td 单元格:has(selector)选择包含匹配选择器的子元素的元素$("div:has(p)")选中包含 p 元素的 div 元素
属性筛选器
[attribute]选择具有指定属性的元素$("a[href]")选中带有 href 属性的 a 元素[attribute=value]选择属性值等于指定值的元素$("input[type='text']")选中 type 为 text 的 input 元素[attribute!=value]选择属性值不等于指定值的元素$("input[type!='text']")选中 type 不为 text 的 input 元素
子元素筛选器
:nth-child(n)选择父元素的第 n 个子元素$("ul li:nth-child(2)")选中 ul 中第二个 li 元素:first-child选择父元素的第一个子元素$("ul li:first-child")选中 ul 中第一个 li 元素:last-child选择父元素的最后一个子元素$("ul li:last-child")选中 ul 中最后一个 li 元素
表单筛选器
:input选择所有 input、textarea、select 和 button 元素$(":input")选中所有表单元素:text选择 type 为 text 的 input 元素$(":text")选中所有文本输入框:checked选择被选中的复选框或单选按钮$(":checked")选中所有被选中的表单元素
筛选方法链式调用
jQuery 的筛选方法可以链式调用，逐步缩小选择范围：
$("div").filter(".active").find("p").css("color", "red");上述代码先选中所有 div 元素，然后筛选出 class 为 active 的 div，再查找其中的 p 元素，最后将它们的文字颜色设置为红色。
常用筛选函数
.filter()筛选出匹配指定选择器或函数的元素$("div").filter(".active")选中 class 为 active 的 div.not()排除匹配指定选择器或函数的元素$("div").not(".inactive")选中 class 不为 inactive 的 div.has()保留包含匹配选择器的子元素的元素$("div").has("p")选中包含 p 元素的 div.eq()选择指定索引位置的元素$("li").eq(2)选中第三个 li 元素.slice()选择指定范围内的元素$("li").slice(1, 3)选中第二个到第三个 li 元素
筛选 DOM 遍历方法
.find()查找匹配选择器的后代元素$("div").find("p")查找 div 中的所有 p 元素.children()查找直接子元素$("ul").children("li")查找 ul 的直接子元素 li.parent()查找直接父元素$("span").parent()查找 span 的直接父元素.parents()查找所有祖先元素$("span").parents("div")查找 span 的所有 div 祖先元素.siblings()查找所有兄弟元素$("li.active").siblings()查找与 active li 同级的其他 li
这些筛选方法和函数可以组合使用，实现灵活的元素选择与操作。
