大破砂锅问到底的学习方式其实未尝不可！这里拿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>
在这个例子中，如果我们只是:$("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,....
共同学习，写下你的评论
评论加载中...
作者其他优质文章
