位置伪类选择器,指的是根据页面中的位置来选取元素。在jQuery中,常见的位置伪类选择器如下表所示。

位置伪类选择器
选择器 说明
:first 选取某种元素的第一个
:last 选取某种元素的最后一个
:odd 选取某种元素中序号为“奇数”的所有元素,序号从0开始
:even 选取某种元素中序号为“偶数”的所有元素,序号从0开始
:eq(n) 选取某种元素的第n个,n是一个整数,从0开始
:lt(n) 选取某种元素中小于n的所有元素,n是一个整数,从0开始
:gt(n) 选取某种元素中大于n的所有元素,n是一个整数,从0开始

举例::first、:last

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("li:first,li:last").css("color", "red"); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> </body> </html>

浏览器预览效果如图所示。

分析:

$("li:first,li:last")

上面这行代码表示选择第一个li元素和最后一个li元素。

举例::odd、:even

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("li:odd").css("color", "red"); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> </body> </html>

浏览器预览效果如图所示。

分析:

$("li:odd")表示选择序号为奇数的li元素。这里要注意一下,序号是从0开始,而不是从1开始的。也就是说“第1个选项”的li元素序号为0,“第2个选项”的li元素序号为1,以此类推。这个跟数组下标是一样的道理。

举例::eq(n)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("li:eq(3)").css("color", "red"); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> </body> </html>

浏览器预览效果如图所示。

分析:

$("li:eq(3)")表示选取序号为3的li元素,也就是第4个li元素,因为序号是从0开始的。

举例:lt(n)、gt(n)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("li:lt(3)").css("color", "red"); }) </script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> </body> </html>

浏览器预览效果如图所示。

分析:

$("li:lt(3)")表示选取序号小于3的所有li元素,序号是从0开始的。此外,lt表示“less than”,gt表示“greater than”,了解这两个方法的英文意思可以让我们更好地理解和记忆。