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

Несколько примеров того, как можно, используя селекторы в 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>

Строчки на которые читателям следует обращать внимание выделены цветом.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.