jQuery為我們提供了大量的偽類選擇器，其中最常用的偽類選擇器，我們稱為“簡單偽類選擇器”。
在jQuery中，簡單偽類選擇器如下：
舉例：:not(selector)
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默認的padding和margin*/
*{padding:0;margin:0}
/*去除列表項默認符號*/
ul{list-style-type:none;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("li:not(#myLi)").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>第1個選項</li>
<li>第2個選項</li>
<li id="myLi">第3個選項</li>
<li>第4個選項</li>
<li>第5個選項</li>
<li>第6個選項</li>
</ul>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("li:not(#myLi)")表示選擇除了id為myLi之外的其他li元素。
舉例：:first、:last
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默認的padding和margin*/
*{padding:0;margin:0}
/*去除列表項默認符號*/
ul{list-style-type:none;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("li:first,li:last").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>第1個選項</li>
<li>第2個選項</li>
<li>第3個選項</li>
<li>第4個選項</li>
<li>第5個選項</li>
<li>第6個選項</li>
</ul>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("li:first,li:last")是一個群組選擇器，表示選擇第一個li元素和最後一個li元素。
舉例：:odd、:even、:eq(index)、:lt(index)、:gt(index)
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默認的padding和margin*/
*{padding:0;margin:0}
/*去除列表項默認符號*/
ul{list-style-type:none;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("li:odd").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>第1個選項</li>
<li>第2個選項</li>
<li>第3個選項</li>
<li>第4個選項</li>
<li>第5個選項</li>
<li>第6個選項</li>
</ul>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("li:odd")表示選擇索引值為奇數的li元素，這裡要注意一下，索引值是從0開始，而不是從1開始的。也就是說“第1個選項”的li元素索引值為0，“第2個選項”的li元素索引值為1，以此類推。
在上面例子，我們可以嘗試一下使用:even、:eq(index)、:lt(index)、:gt(index)這幾種選擇器測試一下，大家在在線測試中自行修改測試效果。
舉例：:header
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默認的padding和margin*/
*{padding:0;margin:0}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script src="jquery.color.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":header").css("color", "red");
})
</script>
</head>
<body>
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>
</body>
</html>
在浏覽器預覽效果如下：
分析：
此外，還有:animated、:root和:target這3個偽類選擇器。對於:animated，我們在後面的jQuery動畫中會詳細給大家介紹，在這裡就不用實際例子來講解，以免大伙看不懂。而:root和:target這2個偽類選擇器在jQuery中用得極少，就不展示講解，不過大家可以查看一下CSS3教程。