jquery 筛选

jQuery筛选元素方法

jQuery提供了多种筛选元素的方法，可以通过选择器、过滤器或遍历函数来精确匹配DOM元素。以下是常用的筛选方式：

基本筛选器 使用:first、:last、:even、:odd等伪类选择器快速定位元素：

$("li:first") // 选择第一个<li>元素
$("tr:odd")   // 选择表格奇数行

内容筛选器 根据元素内容或子元素状态筛选：

$("div:contains('text')") // 选择包含特定文本的div
$("ul:has(li.active)")    // 选择包含特定子元素的ul

可见性筛选器 :visible和:hidden可根据显示状态筛选：

$("input:hidden") // 选择所有隐藏的input元素

属性筛选器 通过属性值进行筛选：

$("[data-role='tab']")       // 选择具有特定属性值的元素
$("input[type!='checkbox']") // 排除特定类型的input

jQuery筛选函数

.filter()方法可缩小匹配范围：

$("div").filter(".active") // 从所有div中筛选出带.active类的

.not()实现反向筛选：

$("p").not(".comment") // 选择所有不包含.comment类的<p>

.has()筛选包含特定后代的元素：

$("ul").has("li.red") // 选择包含红色列表项的ul

链式筛选操作

jQuery支持方法链式调用实现多级筛选：

$("table")
  .find("tr")
  .eq(2)
  .css("background", "yellow");

表单元素筛选

针对表单控件的专用筛选器：

$(":checked")       // 所有被选中的复选框/单选框
$("input:disabled") // 所有禁用的输入框

性能优化建议

对于复杂筛选，优先使用原生CSS选择器而非jQuery自定义选择器：

// 性能较差
$("div:has(p:contains('Warning'))")

// 优化方案
$("div").has("p:contains('Warning')")