Атрибутные селекторы в jQuery 4

Селекторы атрибутов в jQuery 4. Выборка элементов страницы с помощью их атрибутов.

Внимание! Урок сложный, при первом прохождении курса, урок можно пропустить.

Пример HTML-кода, с которым будем работать (полный код смотрите в конце урока):

<a href="https://ya.ru" target="_blank" title="Переход на Яндекс">Yandex</a>

• $('[target]') — выбирает элементы по имени атрибута, в нашем случае выберутся все элементы у которых имеется атрибут target;
• $('[target="_blank"]') — выбирает элементы по значению атрибута, в нашем случае выберутся все элементы у которых имеется атрибут target со значением _blank;
• $('[target="_blank"][href^="https"]') — выбирает элементы по нескольким атрибутам, обратите внимание на подстроку href^=, она означает, что нужно выбрать элементы у которых есть атрибут href и его значение начинается с https (защищённый URL).

Если что-то не понятно, в будущем мы всё подробно изучим. Пока просто вы должны знать, что такая возможность имеется.

Перед селектором атрибута можно поставить другой селектор, например имя тега: $('a[target]'), теперь выборка будет идти не по всем элементам, а только по ссылкам a.

Операторы атрибутных селекторов

Далее будем выбирать элементы по атрибутам с помощью операторов атрибутных селекторов, похожих на регулярные выражения, всего их шесть (см. примеры ниже):

• ^= — циркумфлекс, выбирает элементы, у которых значение атрибута начинается с указанной подстроки;
• $= — знак доллара, выбирает элементы, у которых значение атрибута заканчивается указанной подстрокой;
• ~= — тильда, выбирает элементы, у которых значение атрибута содержит указанное слово, а само значение состоит из нескольких слов;
• *= — звездочка, выбирает элементы, у которых значение атрибута содержит указанную подстроку;
• != — восклицательный знак (не равно), выбирает элементы, у которых значение атрибута не равно указанному (восклицательный знак есть только в jQuery, в CSS его нет);
• |= — вертикальная черта, выбирает элементы, у которых значение атрибута равно указанному или начинается с него, после чего сразу идёт дефис -.

Рассмотрим примеры с операторами атрибутных селекторов и выберем нашу ссылку:

<a href="https://ya.ru" target="_blank" title="Переход на Яндекс">Yandex</a>

• $('a[href^="https"]') — выберет элементы, у которых значение атрибута href начинается с https;
• $('a[href$=".ru"]') — выберет элементы, у которых значение атрибута href заканчивается на .ru;
• $('a[title~="Яндекс"]') — выберет элементы, у которых значение атрибута title содержит слово Яндекс;
• $('a[title*="ере"]') — выберет элементы, у которых значение атрибута title содержит подстроку ере;
• $('a[href!="https://www.google.com"]') — выберет элементы, которые либо не имеют указанного атрибута, либо имеют указанный атрибут, но с другим значением;
• $('a[target="_blank"][href^="https"]') — выберет ссылки, которые одновременно имеют атрибут target со значением _blank и у которых атрибут href начинается с подстроки https.

Для примера с вертикальной чертой |= рассмотрим код с тремя ссылками, имеющими атрибут hreflang, со значениями указывающими на язык общий и региональный:

<a href="#de" hreflang="de">Немецкий</a>
<a href="#deat" hreflang="de-AT">Немецкий (Австрия)</a>
<a href="#enus" hreflang="en-US">Английский (США)</a>

$('a[hreflang|="de"]') — выберет элементы, у которых значение атрибута hreflang равно de или начинается с de-.

В нашем случае данный селектор атрибута с вертикальной чертой |= выберет первые две ссылки.

Пример кода:

<a href="#de" hreflang="de">Немецкий</a>
<a href="#deat" hreflang="de-AT">Немецкий (Австрия)</a>
<a href="#enus" hreflang="en-US">Английский (США)</a>

<!-- Подключаем библиотеку jQuery -->
<script src="jquery-4.0.0.js"></script>

<!-- Работаем с атрибутными селекторами  -->
<script>
  $(document).ready(function() {
    $('a[hreflang|="de"]').css('border', '2px solid #2ecc71');
  });
</script>

Что еще важно знать:

• Атрибутный селектор рассматривает значение атрибута как одну строку. Поэтому [rel="nofollow"] совпадёт с rel="nofollow" , но не с rel="nofollow external" — для него используйте ~=, например [rel~="nofollow"].

Кратко

• $('[attribute]') — выборка по атрибуту;
• $('sel[attribute]') — выборка по атрибуту с селектором;
• $('[attribute="value"]') — выборка по атрибуту и значению;
• $('sel[attribute="value"]') — выборка по атрибуту с селектором и значению;
• $('[attribute="value"][attribute="value"]') — выборка элементов сразу по нескольким атрибутам;
• Выборка с операторами атрибутных селекторов ^=, $=, ~=, *=, !=, |=.