通过过滤器("滤镜"),主要用来获取集合性的元素,尤其适用于需要操作的列表或表标签的情况下,通过("元素名:过滤器名")来使用这种方法
html代码
View Code
<
ul
>
< li > 第0个li元素变为红色 </ li >
< li >< h1 > 第1个li元素不变色 </ h1 ></ li >
< li > 第2个li元素不变色dd </ li >
< li > 第3个li元素不变色 </ li >
< li > 第4个li元素不变色 </ li >
< li > 第5个li元素不变色 </ li >
< li ></ li >
< li > aaaa < span > aaaaa </ span ></ li >
</ ul >
< li > 第0个li元素变为红色 </ li >
< li >< h1 > 第1个li元素不变色 </ h1 ></ li >
< li > 第2个li元素不变色dd </ li >
< li > 第3个li元素不变色 </ li >
< li > 第4个li元素不变色 </ li >
< li > 第5个li元素不变色 </ li >
< li ></ li >
< li > aaaa < span > aaaaa </ span ></ li >
</ ul >
1.获取第一个li元素
var li_query=$("li:first");
2.获取最后一个li元素
var li_query=$("li:last");
3.获取第指定li外元素
var li=$("li:not(:first)").css("fontSize","25");
4.获取偶数序号的元素
var li=$("li:even").css("color","blue");
5.获取奇数序号的元素
var li=$("li:odd").css("color","blue");
6.获取指定序号的元素
var li=$("li:eq(2)").css("fontSize","25");
7.获取指定序号后的元素
var li=$("li:gt(2)").css("fontSize","20");
8.获取指定序号前的元素
var li=$("li:lt(2)").css("fontSize","12");
9.获取页面所有<h>标题元素
var li=$("li:header").css("fontSize","30");
10.获取包含指定字符串的元素
var li=$("li:contains('dd')").css("color","blue");
11.获取空元素
var li=$("li:empty").text("空元素").css("color","red");
12.获取非空元素
var li=$("li:parent").css("color","red");
13.获取有子孙元素的元素
var li=$("li:has(span)").css("fontSize","50");
14.获取所有正在执行动画效果的元素
var li=$("li:animated");
上面是对li列表标签操作的,当然也可以对页面中的input,特别是表格进行操作,比如对表格的偶数行和奇数行显示不通的样色,为了区分页面中的表格,可以用id区分一下
View Code
<
table
id
="tt"
>
< tr >
< td > 第一个td </ td >
</ tr >
< tr >
< td > 第二个td </ td >
</ tr >
< tr >
< td > 第三个td </ td >
</ tr >
< tr >
< td > 第四个td </ td >
</ tr >
< tr >
< td > 第五个td </ td >
</ tr >
</ table >
< table >
< tr >
< td > 第一个td </ td >
</ tr >
< tr >
< td > 第二个td </ td >
</ tr >
< tr >
< td > 第三个td </ td >
</ tr >
< tr >
< td > 第四个td </ td >
</ tr >
< tr >
< td > 第五个td </ td >
</ tr >
</ table >
< tr >
< td > 第一个td </ td >
</ tr >
< tr >
< td > 第二个td </ td >
</ tr >
< tr >
< td > 第三个td </ td >
</ tr >
< tr >
< td > 第四个td </ td >
</ tr >
< tr >
< td > 第五个td </ td >
</ tr >
</ table >
< table >
< tr >
< td > 第一个td </ td >
</ tr >
< tr >
< td > 第二个td </ td >
</ tr >
< tr >
< td > 第三个td </ td >
</ tr >
< tr >
< td > 第四个td </ td >
</ tr >
< tr >
< td > 第五个td </ td >
</ tr >
</ table >
jquery:
$("#tt tr:even").css("background-color", "#bbbbff");
$("#tt tr:odd").css("background-color", "red");
$("#tt tr:odd").css("background-color", "red");