jquery 筛选

jQuery 筛选方法

jQuery 提供了多种筛选元素的方法，可以根据元素的位置、内容、属性等进行筛选。以下是一些常用的筛选方法：

基本筛选器

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

// 选择第一个 div 元素
$('div:first');

// 选择索引为偶数的所有 p 元素
$('p:even');

内容筛选器

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

// 选择包含 "hello" 文本的 div 元素
$('div:contains("hello")');

// 选择所有空的 span 元素
$('span:empty');

属性筛选器

[attribute] 选择具有指定属性的元素
[attribute=value] 选择属性值等于指定值的元素
[attribute!=value] 选择属性值不等于指定值的元素
[attribute^=value] 选择属性值以指定值开头的元素
[attribute$=value] 选择属性值以指定值结尾的元素
[attribute*=value] 选择属性值包含指定值的元素

// 选择所有具有 title 属性的 a 元素
$('a[title]');

// 选择所有 href 属性以 "https" 开头的 a 元素
$('a[href^="https"]');

子元素筛选器

:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:nth-child(index) 选择指定索引的子元素

// 选择每个 ul 的第一个 li 子元素
$('ul li:first-child');

// 选择每个 ul 的第三个 li 子元素
$('ul li:nth-child(3)');

表单筛选器

: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 元素
:image 选择所有 type="image" 的 input 元素
:file 选择所有 type="file" 的 input 元素
:enabled 选择所有启用的表单元素
:disabled 选择所有禁用的表单元素
:checked 选择所有被选中的复选框或单选按钮
:selected 选择所有被选中的 option 元素

// 选择所有禁用的 input 元素
$('input:disabled');

// 选择所有被选中的复选框
$('input:checked');

筛选方法

.filter(selector) 筛选出与指定选择器匹配的元素
.not(selector) 筛选出与指定选择器不匹配的元素
.has(selector) 筛选出包含指定子元素的元素
.eq(index) 筛选出指定索引的元素
.first() 筛选出第一个元素
.last() 筛选出最后一个元素

// 筛选出 class 为 "active" 的 div 元素
$('div').filter('.active');

// 筛选出没有 class 为 "hidden" 的 p 元素
$('p').not('.hidden');

这些筛选方法和选择器可以灵活组合使用，以满足不同的需求。