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

这些筛选方法和函数可以组合使用，实现灵活的元素选择与操作。