大破砂鍋問到底的學習方式其實未嘗不可！
這裡拿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>
<li>菜單4</li>
<li>菜單5</li>
<li>菜單6</li>
<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，如需轉載請自行聯系原作者
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)