jQuery как получить список атрибутов селектора

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

Как узнать какие есть атрибуты у селектора при помощи jQuery

Вы наверняка уже знаете, что выбор селекторов по атрибуту значительно упрощает работу со страницей. Взять хотя бы:

Простое CSS правило, но вам уже не нужно прописывать всем своим инпутам классы и искать их по всему проекту. Или, выбрать только те ссылки, которые ведут на PDF файлы:

Но, что если у нашего селектора уже есть атрибуты необходимые для работы. Это могут быть и слайдеры, и таблицы да и вообще все что угодно. Атрибуты, которые не входят в стандартный набор (у каждого тега есть список общих и уникальных атрибутов, которые работают только для него, такие как href — для ссылок), принято создавать через «data-«, и тогда даже валидатор W3C не будет ругаться.

У нас есть спан, с 2 атрибутами data-time и data-params, значения атрибутов всегда записываются как строка. Давайте получим список наших атрибутов, и их значения при помощи jQuery:

В консоли у нас появится запись:


Как видите, выбирать все спаны на странице не очень удобно, поэтому добавьте родительский селектор:

В эти атрибуты мы можем записывать разную полезную информацию, которая не будет видна пользователям, но облегчит жизнь лично вам. Конкретно я когда-то сделал слайдер, который брал всю информацию из атрибутов data, мой html код приблизительно выглядел так:

В итоге вы можете написать смену background-image по таймауту, а значения будут браться только если атрибут начинается с «data-» (и мы не возьмем атрибут class — хотя проще просто добавить родительский тег, как в примере выше).

Кроме того, не обязательно использовать each function — вы можете брать параметры только при клике, или при наведении, или при загрузке — событий ведь довольно много, и придумать можно все что угодно 🙂 . К тому же, вас никто не заставляет помещать всё в даты, чаще всего вам понадобятся значения из src или href — просто когда у вас неизвестное число атрибутов, и эти атрибуты не стандартны, то на помощь придет jQuery 🙂 .

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *