jquery 过滤

jQuery 过滤方法

jQuery 提供了多种过滤方法，可以根据不同的条件筛选元素。以下是常用的过滤方法：

过滤选择器

• :first：选择第一个匹配的元素
• :last：选择最后一个匹配的元素
• :even：选择索引为偶数的元素
• :odd：选择索引为奇数的元素
• :eq(index)：选择指定索引的元素
• :gt(index)：选择索引大于指定值的元素
• :lt(index)：选择索引小于指定值的元素

示例代码

$('li:first').css('color', 'red');  // 第一个li元素变为红色
$('li:even').hide();  // 隐藏所有偶数索引的li元素

内容过滤方法

根据内容过滤

• :contains(text)：选择包含指定文本的元素
• :has(selector)：选择包含特定子元素的元素
• :empty：选择没有子元素的元素
• :parent：选择有子元素的元素

示例代码

$('div:contains("Hello")').addClass('highlight');  // 包含"Hello"的div添加高亮类
$('ul:has(li.active)').css('border', '1px solid red');  // 包含.active li的ul添加边框

可见性过滤

根据可见性过滤

• :visible：选择可见的元素
• :hidden：选择隐藏的元素

示例代码

$('div:hidden').show();  // 显示所有隐藏的div
$('input:visible').val('');  // 清空所有可见input的值

表单元素过滤

表单相关过滤

• :input：选择所有input元素
• :text：选择所有文本输入框
• :checkbox：选择所有复选框
• :radio：选择所有单选按钮
• :selected：选择所有被选中的选项
• :checked：选择所有被选中的复选框或单选按钮

示例代码

$('input:text').addClass('text-input');  // 为所有文本输入框添加类
$('input:checked').closest('label').addClass('selected');  // 为选中项的label添加类

过滤方法链式调用

jQuery允许链式调用过滤方法：

$('li')
  .filter(':even')
  .css('color', 'blue')
  .end()
  .filter(':odd')
  .css('color', 'green');

自定义过滤函数

可以使用.filter()方法传入自定义函数：

$('div').filter(function() {
  return $(this).css('font-size') === '16px';
}).addClass('medium-text');

这些过滤方法可以组合使用，实现复杂的选择逻辑。