0Pricing
jQuery Academy · Урок

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

Изучите сложные селекторы атрибутов для выбора элементов по наличию, значению или частичному совпадению атрибутов и повысите точность выбора.

«Расширенные селекторы атрибутов» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Здравствуйте, селекторы атрибутов!

Добро пожаловать в мир мощных способов выбора элементов в jQuery! Мы подробно изучим селекторы атрибутов, которые позволяют выбирать элементы на основе их HTML-атрибутов.

Представьте атрибуты как дополнительные данные, прикреплённые к HTML-тегу, например id, class, href, data-* и другие.

Выбор по наличию атрибута

Самый простой селектор атрибута находит элементы, которые имеют определённый атрибут, независимо от его значения. Он записывается так: [attributeName].

Это особенно полезно, когда нужно лишь проверить, существует ли атрибут у элемента. Например, $('[title]') найдёт все элементы с атрибутом title.

Попробуйте: наличие атрибута

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

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

Сопоставление точных значений атрибутов

Чтобы выбрать элементы, у которых атрибут имеет точное значение, используйте [attributeName="value"].

Этот селектор работает точно: совпадение будет найдено только в том случае, если значение атрибута полностью совпадает с указанным, включая регистр (сопоставление значений атрибутов в jQuery чувствительно к регистру).

Точное совпадение на практике

Найдите элементы с атрибутом data-type, значение которого в точности равно "primary".

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

Значения атрибутов, начинающиеся с…

Селектор [attributeName^="value"] находит элементы, у которых значение атрибута начинается с определённой строки.

  • Он полезен для объединения элементов с похожими правилами именования.
  • Отлично подходит для фильтрации ссылок, например всех ссылок, начинающихся с /products.

Значения, заканчивающиеся на… и содержащие…

Эти селекторы обеспечивают большую гибкость при частичном совпадении:

  • [attributeName$="value"]: находит совпадение, если значение атрибута заканчивается указанной строкой.
  • [attributeName*="value"]: находит совпадение, если значение атрибута содержит указанную строку в любой позиции.

Практика: частичные совпадения

Посмотрите, как ^=, $= и *= выбирают разные элементы на основе частичных значений атрибута href.

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

Селекторы слов и дефисов

Рассмотрим ещё два специализированных селектора:

  • [attributeName~="value"]: находит совпадение, если значение атрибута содержит определённое слово, отделённое пробелами. Часто используется с атрибутами class.
  • [attributeName|="value"]: находит совпадение, если значение атрибута точно равно "value" или начинается с "value-" (за которым следует дефис). Обычно используется для кодов языков, например lang="en-US".

Быстрая проверка: селекторы

Какой селектор или какие селекторы jQuery правильно выберут расположенный ниже элемент <div>?

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

Итоги: селекторы атрибутов

Отличная работа! Вы освоили расширенные селекторы атрибутов:

  • [attr]: проверяет наличие атрибута.
  • [attr="val"]: находит точные значения.
  • [attr^="val"]: находит значения, начинающиеся с указанной строки.
  • [attr$="val"]: находит значения, заканчивающиеся указанной строкой.
  • [attr*="val"]: находит значения, содержащие указанную строку.
  • [attr~="val"]: находит значения, содержащие слово, отделённое пробелами.
  • [attr|="val"]: находит значения, точно равные указанному или начинающиеся с «val-».

Используйте их, чтобы писать точный и эффективный код jQuery!

Часто задаваемые вопросы

Урок «Расширенные селекторы атрибутов» бесплатный?

Да — полный текст урока «Расширенные селекторы атрибутов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Расширенные селекторы атрибутов»?

Изучите сложные селекторы атрибутов для выбора элементов по наличию, значению или частичному совпадению атрибутов и повысите точность выбора. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Расширенные селекторы атрибутов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Расширенные селекторы атрибутов
  2. Псевдоклассы и пользовательские селекторы
  3. Эффективные методы обхода DOM
← Назад к jQuery Academy