• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

3.2 简单伪类选择器

jQuery为我们提供了大量的伪类选择器,其中最常用的伪类选择器,我们称为“简单伪类选择器”。

在jQuery中,简单伪类选择器如下:

jQuery简单伪类选择器
伪类选择器 说明
:not(selector) 选择除了某个选择器之外的所有元素
:first或first() 选择某元素的第一个元素(非子元素)
:last或last() 选择某元素的最后一个元素(非子元素)
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素,索引值index是一个整数,从0开始
:lt(index) 选择所有小于索引值的元素,索引值index是一个整数,从0开始
:gt(index) 选择所有大于索引值的元素,索引值index是一个整数,从0开始
:header 选择h1~h6的标题元素
:animated 选择所有正在执行动画效果的元素
:root 选择页面的根元素
:target 选择当前活动的目标元素(锚点)

举例::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教程

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部