Выбор элемента по href в jQuery и JavaScript: примеры

Быстрый ответ

Для быстрого поиска якорного элемента по атрибуту href в jQuery применяется селектор совпадения атрибута $('a[href="URL"]'):

// Вам больше не понадобится GPS, вы обнаружили необходимый якорь 🧭
var element = $('a[href="https://example.com"]');

Изучаем атрибут href с помощью jQuery

Точное значение href

// Мы ценим точность! И вот он, ваш элемент.
var linksToGoogle = $('a[href="https://google.com"]');

Этот код возвратит якорный тег, точно соответствующий href https://google.com.

Подробнее об этом расскажет наш спикер на видео

Начинается с определённого URL

Чтобы выбрать элементы, атрибут href которых начинается с определённого URL, примените селектор начала атрибута ^=.

// Будьте предельно внимательны в поисках URL-адресов!🕵️
var allLinksToGoogle = $('a[href^="https://google.com"]');

Содержит строку

Если нужно найти элементы с href, содержащими определённую последовательность символов, используйте селектор содержания атрибута *=.

// Теперь поиск Google в вашем коде! // Поиск внутри поиска!😄
var hrefWithGoogle = $('a[href*="google.com"]');

Сложные кейсы и эффективные селекторы!

Комбинация селекторов атрибутов

Вы сможете использовать несколько селекторов, чтобы получить более точный результат.

// Когда под одно условие не подходит...
var specificLinks = $('a[href*="example.com"][data-analytics]');

Исключение элементов с помощью селектора :not

Псевдокласс :not может быть крайне полезен, когда требуется исключить определённые элементы:

// Все, не вы, ссылки на PDF...
var notPDFs = $('a:not([href$=".pdf"])');

В данном примере мы преднамеренно игнорируем все ссылки на PDF документы.

Обработка динамических сред

Работа с асинхронно загружаемым контентом

Когда контент загружается асинхронно, простые запросы могут оказаться неэффективными. В этом случае применяют делегирование событий с помощью .on():

// Отправляемся в путешествие во времени с jQuery!⏱️
$(document).on('click', 'a[href="https://example.com"]', function() {
  // Здесь можно реализовать ваш функционал
});

Учёт чувствительности к регистру в URL

Браузеры могут изменять регистр URL, в то время как jQuery селекторы атрибутов строго чувствительны к регистру. Используйте следующий метод для обхода данной проблемы:

// Как ни странно, но jQuery справляется и с чувствительностью к регистру
var caseInsensitive = $('a').filter(function() {
  return this.href.toLowerCase() === "https://example.com".toLowerCase();
});

Визуализация

Представим наглядный пример процесса поиска и выбора элемента по атрибуту href в jQuery:

Библиотека 📚:
- Книга A 🏷️: 'chapter-1'
- Книга B 🏷️: 'chapter-2' // Эту книгу выбираем!
- Книга C 🏷️: 'appendix'

$('a[href="chapter-2"]');

Вы её нашли! 📖: Книга B

Максимизация производительности

Ограничение области поиска в jQuery

Ограничьте область для поиска, так как прямой поиск по атрибутам может быть нагрузочным:

// Вообразите, что мы играем в прятки 🙈
var navElements = $('#navbar a[href="https://example.com"]');

Используйте кэширование результатов

Сохраняйте результаты поиска в переменных, если планируете повторное их использование:

// Сохранение элемента для последующего использования. 📥
var cachedElement = $('a[href="https://example.com"]');

Полезные материалы

1. [Селектор атрибутов равенства [name=”value”] | Документация jQuery API](https://api.jquery.com/attribute-equals-selector/) — Здесь описано всё о селекторе совпадения атрибута.
2. 999 Код ошибки на HEAD запрос к LinkedIn – Stack Overflow (php) — Пример использования селектора jQuery, обсуждаемый в несвязанной теме на Stack Overflow.
3. Селекторы атрибутов | CSS-Tricks — Статья, посвящённая различным селекторам атрибутов.
4. Селекторы атрибутов – каскадные таблицы стилей CSS | MDN — Детальное руководство по селекторам атрибутов CSS от MDN.
5. Селекторы jQuery — Обширный обзор селекторов jQuery от w3schools.
6. Выбор элементов | Руководство по jQuery — Здесь описан процесс выбора элементов с использованием различных атрибутов.