学习 jQuery 5 筛选和过滤器

 
使用基本的过滤器

:first              第一个匹配的元素

:last               最后一个匹配的元素

:even             匹配的序号为偶数

:odd              匹配的序号为奇数

例如：

设置表格所有的偶数行的背景色

$("tr:even").css("background-color", "#bbbbff");

设置表格所有奇数行的背景色

$("tr:odd").css("background-color", "#bbbbff");

设置斑马线表格

$("tr:even").css("background-color", "#e7e7ff");

$("tr:odd").css("background-color", "#f7f7f7");

:not( 表达式 )          从匹配的集合中删除所有符合表达式的元素

例如：

选择紧接在没有被选中的复选框的后面的 lable ，将其背景色设置为黄色

$("input:not(:checked) + span").css("background-color", "yellow");

:eq                匹配元素在匹配集合中的索引号等于指定值的元素

:lt                  匹配元素在匹配集合中的索引号小于指定值的元素

:gt                 匹配元素在匹配集合中的索引号大于指定值的元素

例如：

将前 4 个格的颜色设置为红色

$("td:lt(4)").css("color", "red");

:header         匹配标题行，例如 h1, h2, h3 ……

例如：

设置所有标题的背景色，前景色

$(":header").css({ background:'#CCC', color:'blue' })

针对表单的筛选

:text                    匹配所有的 type 为 text 的输入项

例如：

将表单中所有 type 为 text 的输入项的背景色设置为红色

$(":text")").css({background:"red"})

:checkbox            匹配所有 type 为 checkbox 的输入项

例如：

将页面中所有的复选框设置为选中状态

$(":checkbox").each( function( ) {

       this.checked = true;

});

其它

:input                   匹配所有 input 元素

:text                    匹配所有 type 为 text 的输入项

:checkbox            匹配所有 type 为 checkbox 的输入项

:password            匹配所有 type 为 password 的输入项

:radio                   匹配所有 type 为 radio的输入项

:submit               匹配所有 type 为 submit的输入项

:image                  匹配所有 type 为 image的输入项

:reset                    匹配所有 type 为 reset的输入项

:button                 匹配所有 type 为 button的输入项

:file                     匹配所有 type 为 file的输入项

:hidden                匹配所有 type 为 hidden的输入项

针对输入项状态的条件

:enabled               匹配所有 type 为 hidden的输入项

:disabled              匹配所有被禁用的元素

:checked              匹配所有被选中的单选框和复选框

:selected             匹配所有被选中的元素

示例

将所有被禁用的元素背景设置为灰色

$("input:disabled").css({background:"grey"})