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