jQuery结构（位置）伪类选择器

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

图 1：:first 和 :last 选择器的效果

$( 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 

 li HTML /li 

 li CSS /li 

 li JavaScript /li 

 li jQuery /li 

 li Vue.js /li 

 /ul 

 /body 

 /html 

程序执行效果如图 2 所示：

图 2：:odd 选择器的效果

$( 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 

 li HTML /li 

 li CSS /li 

 li JavaScript /li 

 li jQuery /li 

 li Vue.js /li 

 /ul 

 /body 

 /html 

程序执行效果如图 3 所示：

图 3：:eq(n) 选择器的效果

$( 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 

 li HTML /li 

 li CSS /li 

 li JavaScript /li 

 li jQuery /li 

 li Vue.js /li 

 /ul 

 /body 

 /html 

程序执行效果如图 4 所示：

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

23781.html

CSShtmljavaJavaScript