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

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

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

jQuery синтаксис:

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

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

Селектор в CSS

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

Селектор атрибутов [attribute|='value'] — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p title="подсказка">Простой абзац</p>
<p title="подсказка-1">Простой абзац</p>
<p title="Подсказка">Простой абзац</p>
<p title="подсказка подсказка">Простой абзац</p>
<p title="-подсказка">Простой абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $("p[title|='подсказка']").css('color', 'red') // выбираем все HTML элементы <p>, которые имеют указанный атрибут со значением равным заданной строке, или значение начинается с этой строки и сразу после этой строки следует дефис и устанавливаем цвет текста - красный
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

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