jquery选择器 - 作业 - php中文网博客

首页 > 博客列表 > jquery选择器

博主信息

博文 25

粉丝 0

访问量 35686

专题推荐

更多>

jquery中的选择器！

：first选择器 (选择多个相同元素中的第一个元素！)

:first伪类选择器相当于:eq(0)。它也可以写为:lt(1)。虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>学习笔记-Jquery</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div {
                width: 500px;
                height: 60px;
                border: 1px solid;
                border-color: #000000;
                margin: 15px auto 0 auto;
                text-align: center;
            }
            .addCss {
                border-color: orangered;
                background: red;
                color: #FFF;
                font-size: 30px;
            }
            p {
                width: 500px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                margin: 30px auto 0 auto;
                border: 1px solid #eee;
                background: #0356fa;
                cursor: pointer;
                color: #FFF;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <p type="button" onclick="clicks()">:first (点我选择第一个DIV)</p>
    </body>
    <script type="text/javascript">
        function clicks(){
            $('div:first').addClass('addCss');
        }
    </script>
</html>

：last选择器 (选择多个相同元素中的最后一个元素！)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>学习笔记-Jquery</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div {
                width: 500px;
                height: 60px;
                border: 1px solid;
                border-color: #000000;
                margin: 15px auto 0 auto;
                text-align: center;
            }
            .addCss {
                border-color: orangered;
                background: red;
                color: #FFF;
                font-size: 30px;
                line-height: 60px;
            }
            p {
                width: 500px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                margin: 30px auto 0 auto;
                border: 1px solid #eee;
                background: #0356fa;
                cursor: pointer;
                color: #FFF;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <p type="button" onclick="clicks()">$('div:last')(点我选择最后一个DIV)</p>
    </body>
    <script type="text/javascript">
        function clicks(){
            $('div:last').addClass('addCss');
        }
    </script>
</html>

：eq（）选择器 (选择多个相同元素中的指定的一个元素！从0开始)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>学习笔记-Jquery</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div {
                width: 500px;
                height: 60px;
                border: 1px solid;
                border-color: #000000;
                margin: 15px auto 0 auto;
                text-align: center;
            }
            .addCss {
                border-color: orangered;
                background: red;
                color: #FFF;
                font-size: 30px;
                line-height: 60px;
            }
            p {
                width: 500px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                margin: 30px auto 0 auto;
                border: 1px solid #eee;
                background: #0356fa;
                cursor: pointer;
                color: #FFF;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <p type="button" onclick="clicks()"> $('div:eq(2)')(点我选择) </p>
    </body>
    <script type="text/javascript">
        function clicks(){
            $('div:eq(2)').addClass('addCss');
        }
    </script>
</html>

：lt（index）选择器 (选择匹配集合中所有索引值小于给定index参数的元素。)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>学习笔记-Jquery</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div {
                width: 500px;
                height: 60px;
                border: 1px solid;
                border-color: #000000;
                margin: 15px auto 0 auto;
                text-align: center;
            }
            .addCss {
                border-color: orangered;
                background: red;
                color: #FFF;
                font-size: 30px;
                line-height: 60px;
            }
            p {
                width: 500px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                margin: 30px auto 0 auto;
                border: 1px solid #eee;
                background: #0356fa;
                cursor: pointer;
                color: #FFF;
            }
        </style>
    </head>
    <body>
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <p type="button" onclick="clicks()"> $('div:lt(2)')(点我选择) </p>
    </body>
    <script type="text/javascript">
        function clicks(){
            $('div:lt(2)').addClass('addCss');
        }
    </script>
</html>

：gt（index）选择器 (选择匹配集合中所有索引值大于给定index参数的元素。)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>学习笔记-Jquery</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div {
                width: 500px;
                height: 60px;
                border: 1px solid;
                border-color: #000000;
                margin: 15px auto 0 auto;
                text-align: center;
            }
            .addCss {
                border-color: orangered;
                background: red;
                color: #FFF;
                font-size: 30px;
                line-height: 60px;
            }
            p {
                width: 500px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                margin: 30px auto 0 auto;
                border: 1px solid #eee;
                background: #0356fa;
                cursor: pointer;
                color: #FFF;
            }
        </style>
    </head>
    <body>
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <p type="button" onclick="clicks()"> $('div:gt(0)')(点我选择) </p>
    </body>
    <script type="text/javascript">
        function clicks(){
            $('div:gt(0)').addClass('addCss');
        }
    </script>
</html>

：DIV[ID]选择所有具有指定属性的元素，该属性可以是任何值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>学习笔记-Jquery</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div {
                width: 500px;
                height: 60px;
                border: 1px solid;
                border-color: #000000;
                margin: 15px auto 0 auto;
                text-align: center;
            }
            .addCss {
                border-color: orangered;
                background: red;
                color: #FFF;
                font-size: 30px;
                line-height: 60px;
            }
            p {
                width: 500px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                margin: 30px auto 0 auto;
                border: 1px solid #eee;
                background: #0356fa;
                cursor: pointer;
                color: #FFF;
            }
        </style>
    </head>
    <body>
        <div id="a">0</div>
        <div id="b">1</div>
        <div id="c">2</div>
        <div class="d">3</div>
        <div id="e">4</div>
        <div class="f">5</div>
        <p type="button" onclick="clicks()"> $('div[id]')(点我选择有ID属性的DIV) </p>
    </body>
    <script type="text/javascript">
        function clicks(){
            $('div[id]').addClass('addCss');
        }
    </script>
</html>

批改老师：

西门大官人

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

当遇到困难时千万不要被情绪左右

1970-01-01 08:00:00