Jquery вывести значение атрибута

Работа с атрибутами

Материал из JQuery

$(«div»).attr(«class»)	вернет имя класса у первого div-элемента на странице
$(«div»).attr(«class», «divEl»)	класс всех div-элементов на странице станет равным divEl
$(«div»).attr(<"class":"divEl", "title":"Див">)	класс div-элементов станет равен divEl, а title — «Див»
$(«.rool»).attr(«title»)	вернет подсказку элемента с классом rool. Если таких элементов на странице несколько — вернет первого из них.

Замечание 1: важно отметить, что используя метод .attr(name), вы получите значения атрибута только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().

Замечание 2: IE не позволяет менять атрибут type у элементов input и button.

Изменения в jQuery-1.6

Начиная с версии jQuery-1.6, при попытке получить значение атрибута, которым элемент не обладает, метод attr(attrName) вернет undefined. В более ранних версиях, вместо этого, в некоторых случаях, возвращалась пустая строка. Кроме того, начиная с версии jQuery-1.6 в jQuery разделены способы работы с атрибутами и свойствами DOM-объектов (разница между атрибутами и свойствами) и для последних стоит использовать prop(propName). В частности, разница при работе с атрибутами и свойствами существенна, когда идет речь об атрибутах не требующих указания значений (checked и disabled в input-элементах): допустим у нас есть элемент , а в переменной elem хранится его DOM-объект. В этом случае, работа со значением checked будет иметь следующие результаты:

elem.checked	true
$(elem).prop(«checked»)	true
elem.getAttribute(«checked»)	пустая строка.
$(elem).attr(«checked»)	пустая строка для jQuery-1.6+ и true для более ранних версий.

В действии

найдем элемент с идентификатором newsBlock и поместим в него, значение его же класса:

Ссылки

От автора jquery.page2page.ru

Мини-игра про поход за продуктами во время карантина.

Твой уникальный шанс напинать короновирусу буквально.

Источник

Получить и изменить значение атрибута на jQuery

На этом уроке мы научимся работать с data атрибутами у изображений (img src), используя библиотеку jQuery. В ходе урока, постараемся не сильно углубляться в теорию, количество которой и так зашкаливает в интернете. А лучше сосредоточимся на практической стороне.

Перед нами стоит задача: Написать на jQuery небольшой скрипт выбора товара по цвету. Имеется 5 футболок разного цвета, выбирая квадратик с нужным цветом, на странице будет появляться одна футболка с соответствующим цветом.

HTML разметка

Создадим одну обертку для блока с изображением, а другую для цветных квадратиков. На скриншоте, для наглядности, обе обертки-родителя имеют красную рамку. Элементы с черной рамкой — это дети.

По умолчанию установлена белая футболка. В коде сразу задаем классы с осмысленными названиями, следующим шагом пропишем для них CSS стили. Так же сразу добавим data атрибуты — привяжем к определённому цвету, подходящее изображение. К установленным атрибутам, вернемся чуть позже.

CSS код

Используем технологию флексбоксов, исключительно для выравнивания по центру. Для этого, зададим родителям (блоки с красной рамкой) свойства flex.

.imageWrap <
display: flex;
justify-content: center;
>

.colorWrap <
display: flex;
justify-content: center;
>

Далее работаем с дочерними элементами. В классе .color, прописываем нужные отступы, указываем размеры кнопок и делаем курсор в виде руки (приглашая сделать клик). Данный набор стилей одинаковый для всех кнопок, поэтому добавим этот класс ко всем кнопкам.

.color <
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
width: 50px;
height: 50px;
cursor: pointer;
>

Создадим классы-модификаторы, отличающиеся от друга цветом фона. Каждый квадратик получит общий класс .color и индивидуальный класс-модификатор (цвета).

.black <
background: #000;
>
.blue <
background: #a3bfd5;
>
.gray <
background: #e9e9e9;
>
.pink <
background: #f6a4bb;
>

Подключим библиотеку jQuery.

Получить значение атрибута по img src на jQuery

Сначала получим картинку по значению атрибута. Обратимся к тегу img, через его родителя — получим селектор (.imagePlace img). При помощи метода attr, вытащим значение атрибута src, то есть картинку из HTML-разметки (jquery_data_white.jpg).

let srcValue = $(‘.imagePlace img’).attr(‘src’);

Присвоим значение атрибута переменной srcValue и убедимся, что переменная действительно ссылается на картинку. Выведем переменную в консоли или в модальном окне.

Если в консоли вы увидите название изображения (jquery_data_white.jpg), значит все в порядке и можно двигаться дальше.

Это была небольшая разминка. Переменная srcValue создавалась в учебных целях, для демонстрации получения элемента по img src.

Изменить значение атрибута по img src на jQuery

По событию клика по селектору, который выбирает текущую картинку, запустится callback функция. Функция выбирает тот же самый селектор. Метод attr возвращает первым параметром значене атрибута src, а вторым параметром указываем новое значение (другую картинку). Теперь при клике по белой футболке, произойдет замена на черную.

$(‘.imagePlace img’).on(‘click’, function() <
$(‘.imagePlace img’).attr(‘src’, ‘jquery_data_black.jpg’);
>);

Мы научились получать и изменять значение атрибута на jQuery, чисто для практики. На следующем уроке напишем программу по выбору цвета у товара.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Jquery вывести значение атрибута

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Моя группа

Зачем Вы изучаете программирование/создание сайтов?

Программирование на C++ для начинающих

Бесплатный курс по C++ даст Вам отличный старт для начала программирования на этом языке. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.

Чтобы получить Видеокурс,
заполните форму

Как создать профессиональный Интернет-магазин

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Источник

Работа с атрибутами в jQuery

В этой теме рассмотрим jQuery методы attr() и removeAttr() , которые используются для работы с атрибутами элементов.

Что такое HTML-атрибуты?

HTML-атрибуты – это дополнительные значения для установления различных характеристик HTML-элементам в HTML-коде. С помощью них можно определённым образом настроить элемент и отрегулировать его поведение. Все атрибуты указываются внутри открытого тега и отделяются друг от друга посредством пробела.

Кроме атрибутов у нас имеются ещё DOM-свойства , которые в большинстве случаев являются их отражением.

Образуются DOM-свойства во время чтения браузером HTML-кода, т.е. при строительстве DOM. DOM – это объектная модель документа. При её создании теги становятся элементами (узлами), а HTML-атрибуты переводятся в соответствующие DOM-свойства этих элементов.

Для сведений, атрибут, который мы устанавливаем в HTML-коде называется атрибутом содержимого . А DOM-свойство – IDL-атрибутом .

Более подробно прочитать про атрибуты, DOM-свойства и их отличия можно в этой статье.

В заключение можно отметить, что при написании кода на JavaScript зачастую лучше использовать именно DOM-свойства, а не соответствующие им атрибуты. Кстати, в jQuery для выполнения операций с DOM-свойствами имеется специальный метод prop() . Описывается он в этой статье.

А сейчас познакомимся с методами jQuery для работы с атрибутами.

Методы attr() и removeAttr()

В jQuery для выполнения действий над атрибутами имеется два метода:

• attr() – используется, когда нужно, узнать значение требуемого атрибута, добавить к элементу новый атрибут или изменить текущее значение некоторого атрибута на новое;
• removeAttr() – применяется для удаления определённого атрибута у элемента или набора элементов.

Получение значения атрибута

Узнать значение определённого атрибута в jQuery осуществляется через attr() :

Например, получим значение атрибута href элемента #search :

При применении attr() к набору элементов, этот метод вернёт значение указанного атрибута только для первого элемента.

Для того, чтобы вернуть значение указанного атрибута для каждого элемента набора, можно воспользоваться each() или map() .

Если атрибута, значение которого мы хотим получить у элемента нет, то attr() вернёт undefined :

Этот сценарий можно использовать для проверки наличия определённого атрибута у элемента.

Например, проверим имеется ли у элемента #logo» атрибут title :

Изменение значения атрибута

Изменение значения атрибута осуществляется также посредством attr() .

Вариант синтаксиса attr() для установки значения одному атрибуту:

Кстати, если установить атрибуту null , то он будет удалён.

Например, поменяем значение атрибута src элемента #logo :

Установка сразу нескольких атрибутов элементу осуществляется в формате объекта:

Пример установки элементу #logo несколько атрибутов:

Кроме этого в jQuery имеется также вариант установки атрибута с помощью функции:

В этом случае значение атрибута будет определяться результатом (строка или число), возвращаемой функцией. Если функция ничего не возвращает или undefined , то текущее значение не изменяется (оно остаётся прежним).

Обратиться к текущему элементу в функции можно с помощью ключевого слова this .

• index — индекс элемента в наборе;
• valueAttr — текущее значение атрибута;

Например, установим для всех
, которые не имеют id атрибут id=»index-» (где: — порядковый номер элемента в наборе).

Добавление нового атрибута

В jQuery, установка нового атрибута или изменение существующего — это одна и также операция.

Пример, в котором всем ссылкам на странице установим атрибут rel со значением nofollow :

Пример, в котором добавим ко всем
атрибут data-index со значением соответствующем порядковому номеру этого элемента в #list :

Как в jQuery удалить атрибут у элемента

В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr() :

Например, удалим атрибут rel у всех ссылок на странице:

В jQuery удалить атрибут можно также с помощью attr() . Для этого ему нужно в качестве значения установить null .

Источник

Как получить значение атрибута с помощью jQuery. Метод .attr()

Библиотека jQuery представляет метод .attr(), который позволяет установить или получить значение атрибута элементов. Как мы видим один и тот же метод позволяет выполнить несколько действий — чтение и запись значение. Это типичное особенность jQuery. Другими словами метод .attr() работает в качестве геттера (метод чтения) и сеттера (метод записи).

Синтаксис метода .attr()

• .attr(name)
  • Получает значение, присвоенное указанному атрибуту для первого элемента в соответствующем наборе.
• Параметры
  • name — (Строка) Имя атрибута, значение которого должно быть взято.
• Возвращает
  • Значение атрибута для первого соответствующего элемента. Значение undefined возвращается, если соответствующий набор пуст или в первом элементе нет данного атрибута.

Примеры использование метода .attr()

Получение значение id элемента:

Получение значение атрибута alt:

Также мы можем получить значение пользовательских атрибутов. Собственные атрибуты можно добавлять, если вы используете HTML5. Кроме всего прочего мы можем получить значение атрибута, которые добавление через JavaScript.

Имена атрибутов регистронезависимы в HTML. Независимо от того, как атрибут, например, title объявлен в разметке, можно получить атрибуты с помощью любого варианта из заданных: Title, TITLE, TiTlE и любых других комбинаций, они все эквивалентны. Хотя в XHTML для имен атрибутов в разметке должен использоваться нижний регистр, вы можете получить их, применяя любой вариант.

Источник