我们可以对选择的结果做一点基本的过滤 … 比如我们只想选择第一个 img 元素 … 再给它添加一个 css 类 … 可以这样 …

$( 'img:first’').addClass( 'img-circle');

在选择器的后面，加上一个冒号 … 后面再加上一个 first … first 就是第一的意思 …. 这里就表示，找到页面上的第一个 img 元素 …

你会看到，页面上只有第一个图像是圆形的 … Command + R ... 选中最后一个 … 可以把 first 换成 last … last 是最后一个的意思 …

$( 'img:last').addClass( 'img-circle');

现在，页面上只有最后一个图像也是圆形的 …

:odd 与 :even

使用 odd 和 even ， 可以选择结果里面的奇数项目或者偶数项目 …

先按一下 command + R … windows 用户可以使用 ctrl + R … 刷新一下页面 … 这样可以彻底请除掉在控制台上输入的东西 …

$( ’img:odd‘ ).addClass( ‘img-circle‘);

在选择器里加上 :odd … 可以选择结果里面的奇数项 …

不过我们要注意的是，结果里面排第一个的是 0 ，不是 1 … 0 是一个偶数 … 所以，在页面上，是从第二个图像开始变成圆形的 …

因为第二个图像在结果的索引里面，它的索引号是 1 … 1 是一个奇数 …

刷新一下 …. 再试试 even …

$( ‘img:even’ ).addClass( ‘img-circle’ );

现在，所有索引号是偶数的项目会变成圆的 …

:eq , :lt, :gt

使用 :eq 可以指定具体的结果 … eq 应该是 equal 的缩写 … 意思是等于 … 比如我们想让页面上第二个图像变成圆的 … 可以这样

$( ‘img:eq( 1 )’ ).addClass( ‘img-circle’ );

eq 的后面加上一个括号 … 括号里可以指定具体的索引号 … 索引是从零开始的 … 所以页面上的第二个图像的索引号是 1 …

:lt 可以指定小于某个索引号的结果 .. lt 是 less than 的缩写 .. 意思就是 小于 …. 跟它对应的还有 :gt …. Greater than … 表示大于 …

$( 'img:lt( 3 )' ).addClass( 'img-circle' );

这个选择器会选择小于 3 这个索引号的结果 … 也就是 0，1，2 这几个项目 …

再试一下 :gt … 大于指定索引号的结果 …

$( 'img:gt( 5 )' ).addClass( 'img-circle' );

选择大于 5 这个索引号的结果 … 页面上从第7个图像开始之后的所有的图像会变成圆形 …