过滤选择器类似于CSS中的伪类选择器，以冒号开头。过滤选择器根据其过滤规则分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、以及表单对象属性过滤选择器。
1.基本过滤选择器
| 名称 | 说明 | 举例 |
| ：first | 匹配到第一个元素 | 查找表格的第一行：$("tr:first") |
| :last | 匹配到最后一个元素 | 查找表格的最后一行:$("tr:last") |
| :not(selector) | 去除所有与给定选择器相匹配的元素 | 查找所有未选中的input元素：$("input:not(:checked)") |
| :even | 匹配所有索引值为偶数的元素，从0开始计数 | 查找表格的1,3,5.....行：$("tr:even") |
| :odd | 匹配所有索引值为奇数的元素，从0开始计数 | 查找表格的2,4,6.....行：$("tr:odd") |
| :eq(index) | 匹配一个给定索引值得元素，从0开始计数 | 查找第二行：$("tr:eq(1)") |
| :gt(index) | 匹配所有大于给定索引值的元素，从0开始计数 | 查找第二行，第三行：$("tr:gt(0)") |
| :lt(index) | 匹配所有小于给定索引值的元素，从0开始计数 | 查找第一行，第二行：$("tr:lt(2)") |
| :header | 选择所有h1,h2,h3一类的header标签 | 给页面内所有标题加上背景色:$(":header").css("background","") |
| ：animated | 匹配所有正在执行动画效果的元素 | $("#fun").click(function(){$("div:not(:animated)")}).animated({left:"+=20"},1000);}); |
在日常工作中，基本过滤选择器通常用在表格中。
2.内容过滤选择器
主要用于对html文本进行过滤选择。
| 名称 | 说明 | 举例 |
| ：contains(text) | 匹配包含给定文本的元素 | 查找所有包含John的div元素：$("div:contains(‘John‘)") |
| :empty | 匹配所有不包含子元素或者文本的元素 | 查找所有不包含子元素或者文本的td元素：$("td:empty") |
| :has(selector) | 匹配所有选择器匹配的元素的元素 | 查找所有包含p元素的div元素：$("div:has(p)") |
| :parent | 匹配所有子元素或者文本的元素 |
查找所有子元素或者文本的td元素： $("td:parent") |
3.可见性过滤选择器
主要查找隐藏的元素和可见的元素
| 名称 | 说明 | 举例 |
| ：hidden | 匹配所有不可见的元素 | 查找所有不可见的tr元素：$("tr:hidden") |
| :visible | 匹配所有可见的元素 | 查找所有可见的tr元素：$("tr:visible") |
:hidden匹配如下几种格式的元素：
- 具有CSS属性display属性值为none的值
- HTML表单元素中的隐藏域
- 宽度和高度被显示的设置为0
- 由于祖先元素为隐藏而导致无法显示在页面上
：visible是指在屏幕上占用布局空间的元素，可见性元素的宽度和高度大于0
注意：CSS属性visibility:hidden或者是opactity被认为可见。
4.属性过滤选择器
基于HTML元素的属性，可以是不同的属性，也可以是相同属性的不同值
| 名称 | 说明 | 举例 |
| [attibute] | 匹配包含给定属性的元素 | 查找所有包含id属性的div元素：$("div[id]") |
| [attibute=value] | 匹配给定的属性是某个特定值得元素 | 查找所有name属性是newsletter的input元素：$("input[name=‘newsletter‘]") |
| [attribute!=value] | 匹配给定的元素不包含某个特定值得元素 | 查找所有name属性不是newsletter的input元素：$("input[name!=‘newsletter‘]") |
| [attribute^=value] | 匹配给定的属性是以某个特定值开始的元素 | $("input[name^=‘news‘]") |
| [attribute$=value] | 匹配给定的属性是以某个特定的值结尾的元素 | $("input[name$=‘letter‘]") |
| [attribute*=value] | 匹配给定的属性是包含某个特定值的元素 | $("input[name*=‘man‘]") |
|
[attributeFilter1] [attributeFilter2] [attributeFilter3] |
复合属性选择器，需要同时满足多个条件使用 |
找到所有包含id属性，并且它的name属性是以man结尾的input元素： $("input[id][name$=‘man‘]") |
5.子元素过滤器
这个过滤器是指根据父元素中的某些过滤规则来选择子元素的
时间： 2024-08-02 19:20:36