大破砂锅问到底的学习方式其实未尝不可！
这里拿jquery来说，我们学习中，应该想jquery的作者给我们提供了什么，已经为什么提供它们，存在必定有其存在的原因。
今天的内容是jquery里的"伪类":
选择器这部分的内容对于那些了解css选择器的人员来说应该不陌生。
Selector我们把他翻译成了选择器，还有作选择符。
无非做的工作就是查询，筛选我们的操作对象，这点有点像SQL里的那个select.
在众多的数据记录筛选出我们想要的记录条目这就是数据库的select;
xml里还有个xQuery;
用在css里面的筛选出我们想要施加样式的元素里就是css的选择器;
而jquery里面用来从众多元素中筛选出我们需要的对象的这就是jquery里的Seletor.
只有找到我们需要的元素，我们才能为他添加行为或效果。
好了，这里我们和css的作比较来学习容易些。
1.*这个css里的全局匹配符，jquery里也有，匹配所有。
css里: *{我们的样式}
jquery里: $("*").方法之类的
2.标签选择器
li{....}
$("li")
3.id选择器
#myDiv{.....}
$("#myDiv")
4.类选择器
.myClass{....}
$(".myClass")
5.上下文选择器(还有的叫情景选择器,是包含后代的关系)
div p{....} div里面的所有段落
$("div p")
6.逗号的
div,p,span,myClass{...}
$("div,p,span,myClass")
7.混合以上的用法
好了有了上面这些用法，我们就可以选择出我们要操作的对象，他们就会返回一个集合。但是和普通的数组不同，这个jquery对象允许我们调用一些jquery定义的方法。
但是只有上面这些还是不够的，我们可能不想要整个集合，只想要集合的一部分，这该这么办呢?
好在jquery给我们提供了一些伪类可以满足我们 要求:
1.:first
只要集合中的第一个元素。
如:jquery("ul li:first").
例子:
<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gbk" />
< title >Selector </title>
< script type ="text/javascript" src ="../jquery.js" > </script>
< style type ="text/css" >
ul{margin:0;padding:0;list-style:none;}
li{margin:5px 0;}
</style>
</head>
< body >
< ul >
< li >菜单1 </li>
< li >菜单2 </li>
< li >菜单3 </li>
</ul>
< ul >
< li >菜单4 </li>
< li >菜单5 </li>
< li >菜单6 </li>
</ul>
< script type ="text/javascript" >
$("ul li:first").css({border:"1px solid #F00"});
</script>
</body>
</html>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gbk" />
< title >Selector </title>
< script type ="text/javascript" src ="../jquery.js" > </script>
< style type ="text/css" >
ul{margin:0;padding:0;list-style:none;}
li{margin:5px 0;}
</style>
</head>
< body >
< ul >
< li >菜单1 </li>
< li >菜单2 </li>
< li >菜单3 </li>
</ul>
< ul >
< li >菜单4 </li>
< li >菜单5 </li>
< li >菜单6 </li>
</ul>
< script type ="text/javascript" >
$("ul li:first").css({border:"1px solid #F00"});
</script>
</body>
</html>
在这个例子中，如果我们只是:
$("ul li").css({border:"1px solid #f00"});
那么得到的集合如下
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
<li>菜单6</li>
这样这6个li都会有红色边线。
但是如果只要第一个(索引为0)那么用
$("ul li:first")
同样也有最后一个元素
$("ul li:last")
注意伪类不要放错了位置，$("ul:first li")和$("ul li:first")含义是不一样的。
2.好了，拿要是我想要第1-n中的任意一个怎么办，好了如下:
$("ul li:eq(0)")这个和$("ul li:first")是等同的。
$("ul li:eq(3)")这是第4个元素，索引是3
3.那要是我想要索引是0,2,4,6,8...这样的怎么办呢。
:even就是找出满足偶数关系的
$("ul li:even"),有了这个，做交替表格颜色应该不难了吧。
同样奇数的是:odd
4.同样照成满足一个大于小于关系的也是可以的
:lt(2)就是索引<2,也就是0，1
:gt(3)就是>3,就是4,5,....
本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/127171
，如需转载请自行联系原作者
