jQuery селектор class

jQuery селекторы

Определение и применение

jQuery селектор class выбирает элементы, глобальный атрибут class которых, имеет указанное значение.


Обращаю Ваше внимание, что для поиска элемента с указанным классом, библиотека jQuery использует функцию JavaScript document.getElementByClassName(), вследствие чего, поиск элементов происходит быстро.


Обратите внимание на следующие общие правила, которые необходимо соблюдать при работе с селекторами класса:

jQuery синтаксис:

$(".class")

Добавлен в версии jQuery

1.0

Селектор в CSS

CSS селектор класса.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора class</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	  $(".test").css({ // выбираем элементы с указанным классом
	    "color": "red", // задаем цвет текста
	    "background-color": "orange"}); // задаем цвет заднего фона
	});
		</script>
	</head>
	<body>
		<p class = "test">Абзац, который имеет глобальный атрибут class со значением test.</p>
	</body>
</html>

Результат нашего примера:

Пример использования jQuery селектора class.
Пример использования jQuery селектора class.

Рассмотрим пример в котором используем селектор, который найдет элемент, который имеет одновременно два класса, которые мы укажем.

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора class</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	  $(".test.test2").css({ // выбираем элементы у которых встречаются указанные  классы
	    "color": "red", // устанавливаем цвет текста
	    "background-color": "orange"}); // задаем цвет заднего фона
	});
		</script>
	</head>
	<body>
		<p class = "test">Абзац, который имеет глобальный атрибут class со значением test.</p>
		<p class = "test test2">Абзац, который имеет глобальный атрибут class со значением test и test2.</p>
	</body>
</html>

Результат нашего примера:

Пример поиска элемента с несколькими классами.
Пример поиска элемента с несколькими классами.
jQuery селекторы