jQuery селектор атрибутов [attribute~='value']

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

jQuery селектор атрибутов [attribute~='value'] выбирает каждый элемент с определенным атрибутом, значение которого, содержит определенное слово (слово может быть разделено пробелами).

jQuery синтаксис:

$("[attribute~='value']")

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

1.0

Селектор в CSS

CSS селектор атрибута [attribute ~ = value] (значение содержит определенное слово).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора атрибутов [attribute~='value']</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	  $("p[title~='подсказка']").css("color", "red"); // выбираем все HTML элементы <p>, которые имеют определенный атрибут, значение которого, содержит определенное слово и устанавливаем цвет текста - красный
	});
		</script>
	</head>
	<body>
		<p title = "подсказка">Простой абзац</p>
		<p title = "подсказка-1">Простой абзац</p>
		<p title = "Подсказка">Простой абзац</p>
		<p title = "-подсказка подсказка">Простой абзац</p>
		<p title = "-подсказка">Простой абзац</p>
	</body>
</html>

В этом примере с использованием jQuery селектора атрибутов [attribute~='value'] мы выбрали все элементы <p> в документе, которые имеют глобальный атрибут title со значением, которое содержит определенное слово, и стилизовали их с использованием CSS свойства color (цвет текста)

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

Пример использования jQuery селектора атрибутов [attribute~='value'] (значение содержит определенное слово).

jQuery селекторы