jquery селектор по классу

Выбрать jquery селектор по классу

jquery селектор по классу

0 Число голосов: 41
4.8
5
1
41

Несколько примеров того, как можно, используя селекторы в JQuery, выбрать элементы по их CSS классам и идентификаторам.

Пример 1. Окрашиваем зеленым цветом все элементы на веб-странице идентификаторы которых начинаются с приставки chart:

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>JQuery селекторы по классам и идентификаторам</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    </head>

    <body>



        <div id="chart1">Раз</div>

        <div id="chart--2">Два</div>

        <strong id="chart3">Три</strong>

        <div id="otherId">Что-то другое</div>



        <script type="text/javascript">

            $("[id^='chart']").css({'color': 'green'});

        </script>

    </body>

</html>

Пример 2. Окрашиваем красным цветом все элементы на веб-странице классы которых начинаются с приставки example:

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>JQuery селекторы по классам и идентификаторам</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    </head>

    <body>


        <div class="example1">Раз</div>

        <div class="example--2">Два</div>

        <strong class="example-3">Три</strong>

        <div class="otherClass">Что-то другое</div>


        <script type="text/javascript">

            $("[class^='example']").css({'color': 'red'});

        </script>

    </body>

</html>

Пример 3. Окрашиваем синим цветом все элементы на веб-странице идентификаторы которых оканчиваются на сочетание theEnd:

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>JQuery селекторы по классам и идентификаторам</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    </head>

    <body>


        <div class="example1--theEnd">Раз</div>

        <div class="example2theEnd">Два</div>

        <strong class="exampletheEnd">Три</strong>

        <div class="otherClass">Что-то другое</div>


        <script type="text/javascript">

            $("[class$='theEnd']").css({'color': 'blue'});

        </script>

    </body>

</html>

Вот так просто можно управлять селекторами по классу

Комментарии