Jquery значение атрибута. HTML: Атрибуты элементов

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

5 (100%) 3 votes

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

Синтаксис метода.attr() для установки/изменение значение

• attr(name, value)
  • Устанавливает указанному атрибуту переданное значение для всех элементов в объекте jQuery.
• Параметры
  • name — (Строка) Имя атрибута, который должен быть установлен.
  • value — (Строка | Число | Логический тип | Функция) Указывает значение атрибута, который может быть любое выражение JavaScript. Любое значение, кроме функции, преобразуется в строку. Функция вызывается для каждого элемента в наборе, передает индекс элемента и текущее значение атрибута с данным именем в элементе. Возвращаемое функцией значение становится значением атрибута.
• Возвращает
  • Коллекцию jQuery.

Пример использование:

$("#my_image").attr("title", "My Image");

Первый вариант использование метода на первый взгляд кажется простым, но это не так! Как уже поняли, вторым параметром (value) метод.attr() принимает значение, которое будет установлено. Значение value может быть любым выражением JavaScript, который в конечном итоге вернет строку.

Станет куда интереснее, когда параметр value будет встроенной функцией или ссылкой на функцию. В таких случаях функция вызывается для каждого извлеченного элемента с возвращаемым значением функции, используемым в качестве значения атрибута. Когда вызывается функция, ей передается два параметра. Один из них содержит отсчитываемый от нуля индекс элемента в наборе, а другой — текущее значение атрибута с именем элемента. Кроме того, элемент устанавливается в качестве контекста функции (this) для ее вызова. Это позволяет функции настроить свою обработку для каждого конкретного элемента — главное преимущество использования ее таким образом.

Пример использование в качестве значение метода.attr() функцию:

$("").attr("title", function(index, previousValue) { return previousValue + "Я элемент " + index + " и меня зовут " + (this.id || "unset"); });

С помощью этого метода мы находимся на странице все HTML элементы, которые имеют атрибут title, и меняем атрибут каждого элемента. Изменение происходит путем добавления к имеющемуся значению строки, составленной с использованием индекса элемента в DOM и идентификатора атрибута каждого конкретного элемента, если таковой имеется, или в противном случае — строки ‘unset’ (позволяет сбросить все настройки).

Второй вариант применения метода.attr() — это установки / изменение значение нескольких атрибутов за раз.

Синтаксис метода, который может изменить значений нескольких атрибутов сразу

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

С помощью данного варианта использование метода attr() можно очень быстро изменить или установить значение нескольких атрибутов по всем элементам набора. Метод принимает один параметр и это должен быть объектом. Свойства объекта — это имена тех атрибутов, с которыми хотим работать.

Пример использование:

$("input").attr({ value: "", placeholder: "Поиск по сайту", title: "Пожалуйста, введите значение" });

Давайте разберем пример выше. Мы находимся на странице все элементы input и изменяем атрибуты value, placeholder и title всех найденных элементов, если они есть, а если нет, то добавляем.

ПРЕДУПРЕЖДЕНИЕ

Изменение атрибута type элемента input или button, которые созданы через метод document.createElement(), приводит к исключению в браузере Internet Explorer 6 — 8.

Можно получить и установить значения атрибутов для элементов в объекте jQuery . В представлены методы для работы с атрибутами.

Таблица 8-2: Методы для работы с атрибутами

Метод	Описание
attr(name)	Получает значение атрибута с указанным именем для первого элемента в объекте jQuery
attr(name, value)	Устанавливает указанное значение атрибута с указанным именем для всех элементов в объекте jQuery
attr(map)	Устанавливает атрибуты, указанные в карте (объекте), для всех элементов в объекте jQuery
attr(name, function)	Устанавливает указанный атрибут для всех элементов в объекте jQuery с использованием функции
removeAttr(name) removeAttr(name)	Удаляет атрибуты из всех элементов в объекте jQuery
prop(name)	Возвращает значение указанного свойства для первого элемента в объекте jQuery
prop(name, value) prop(map)	Устанавливает значение одного или более свойств для всех элементов в объекте jQuery
prop(name, function)	Устанавливает значение указанного свойства для всех элементом в объекте jQuery с использованием функции
removeProp(name)	Удаляет указанное свойство из всех элементов в объекте jQuery

Когда метод attr вызывается с одним аргументом, jQuery возвращает значение указанного атрибута для первого элемента в выборке. В содержится пример.

Листинг 8-1: Чтение значения атрибута Example var srcValue = $("img").attr("src"); console.log("Attribute value: " + srcValue); }); Jacqui"s Flower Shop Astor: Daffodil: Rose: Peony: Primula: Snowdrop: Place Order

В этом скрипте я выбрал все элементы img в документе, а затем использовал метод attr , чтобы получить значение атрибута src . Результатом метода attr при получении значения атрибута является строка, которую я вывел на консоль. Вот результат выполнения этого скрипта:

Attribute value: astor.png

Можно объединить методы each и attr , чтобы получить значение атрибута для всех элементов в объекте jQuery . Я описывал метод each в главе 5 , а в показано, как можно использовать его в данной ситуации.

Листинг 8-2: Использование методов each и attr для получения значения атрибута нескольких элементов $(document).ready(function () { $("img").each(function (index, elem) { var srcValue = $(elem).attr("src"); console.log("Attribute value: " + srcValue); }); });

В этом скрипте я передал объект HTMLElement в качестве аргумента функции, чтобы создать новый объект jQuery через $ функцию. Этот объект содержит только один элемент, который идеально подходит для метода attr . Результат работы скрипта следующий:

Attribute value: astor.png Attribute value: daffodil.png Attribute value: rose.png Attribute value: peony.png Attribute value: primula.png Attribute value: snowdrop.png

Установление значения атрибута

Когда метод attr используется для установления значения атрибута, изменение применяется ко всем элементам в объекте jQuery . Это противоположно версии для чтения значения атрибута этого метода, который возвращает значение атрибута только одного элемента. При назначении атрибута метод attr возвращает jQuery объект, что означает, что можно использовать цепочку методов. В показано, как назначать атрибут.

Листинг 8-3: Назначение атрибута $(document).ready(function () { $("img").attr("src", "lily.png"); });

В этом скрипте я выбрал все элементы img и установил значение lily.png для src атрибута. Это значение применяется к атрибуту src для всех выбранных элементов. Результат можно увидеть на .

Рисунок 8-1: Установление одинакового значения атрибута для нескольких элементов Назначение нескольких атрибутов

Можно назначить несколько атрибутов за один вызов метода, если в метод attr добавить объект. Свойства этого объекта интерпретируются как имена атрибутов, а значения свойств – как значения атрибутов. Такие объекты называются картами. В представлен пример.

Листинг 8-4: Назначение нескольких атрибутов используя map объект $(document).ready(function () { var attrValues = { src: "lily.png", style: "border: thick solid red" }; $("img").attr(attrValues); });

В этом скрипте я создал объект-карту со свойствами src и style . В документе я выбрал элементы img и добавил объект-карту методу attr . Результат можно увидеть на .

Совет

Хотя в этом примере я в прямой форме назначил свойство style , в jQuery есть несколько методов, которые упрощают работу с CSS. Для информации смотрите раздел "Работа с CSS" далее в этой главе.

Рисунок 8-2: Назначение нескольких атрибутов при помощи метода attr
Динамическая установка значений атрибутов

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

Листинг 8-5: Установка значения атрибута при помощи функции $(document).ready(function () { $("img").attr("src", function (index, oldVal) { if (oldVal.indexOf("rose") > -1) { return "lily.png"; } else if ($(this).closest("#row2").length > 0) { return "carnation.png"; } }); });

Аргументы, переданные функции, – это индекс обрабатываемого элемента и старое значение атрибута. Переменная this указывает на обрабатываемый HTMLElement . Если вы хотите изменить атрибут, тогда ваша функция должна возвращать строку, содержащую новое значение. Если результат не возвращается, тогда используется существующее значение. В этом примере я использую функцию для выборочного изменения рисунков, представленных элементами img . Результат можно увидеть на .

Рисунок 8-3: Изменение значений атрибутов при помощи функции
Удаление атрибута

Можно удалить атрибуты, используя метод removeAttr , как показано в .

Листинг 8-6: Удаление значений атрибутов $(document).ready(function () { $("img").attr("style", "border: thick solid red"); $("img:odd").removeAttr("style"); });

В этом примере я использую метод attr , чтобы установить атрибут style , а затем использую метод removeAttr , чтобы удалить этот же атрибут у нечетных элементов. Результат можно увидеть на .

Рисунок 8-4: Удаление атрибутов из элементов
Работа со свойствами

Для каждого вида метода attr существует соответствующий метод prop . Разница состоит в том, что метод prop работает со свойствами, определяемыми HTMLElement объектом, а не со значениями атрибутов. Часто атрибуты и свойства одни и те же, но не всегда. Простой пример – это атрибут class , который представлен в объекте HTMLElement при помощи свойства className . В показано использование метода prop для прочтения этого свойства.

Листинг 8-7: Использование метода prop для чтения значения свойства $(document).ready(function () { $("*").each(function (index, elem) { console.log("Element:" + elem.tagName + " " + $(elem).prop("className")); }); });

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

Влад Мержевич

Каждый атрибут тега содержит значение определённого типа и формата написания. Различают следующие типы значений: ключевые слова, числа, дата и время, цвета, URL.

Для всех атрибутов характерны следующие принципы.

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

Не все атрибуты имеют значение по умолчанию, в случае отсутствия такого атрибута или при его некорректном значении, атрибут пропускается.

Ключевые слова

Это заданный фиксированный набор определённых слов, которые допустимо подставлять в качестве значений атрибутов. Ключевые слова не чувствительны к регистру и их можно писать любым удобным способом. Так, значения handheld , Handheld и HANDHELD по своему действию одинаковы.

В примере 1 показано создание формы, которая отправляется на сервер методом POST с помощью значения post атрибута method .

Пример 1. Метод отправки формы

HTML5 IE Cr Op Sa Fx

Ключевые слова

В данном примере в элементе используется атрибут method со значением post . Если этот атрибут не указать, то будет подставляться значение get , применяемое по умолчанию. Для первого элемента атрибут type не задан, поскольку он подставляется автоматически со значением text , а для второго атрибут type уже указан для создания кнопки отправки формы.

Числа

К числам относятся: положительные целые числа, содержащих одну или несколько цифр от 0 до 9; отрицательные числа; а также вещественные или дробные (например, 0.5).

Положительные целые числа

Активно применяются когда надо задать количество колонок, ограничить размер поля формы и количество вводимых символов, установить ширину и высоту рисунка и др. В примере 2 показано создание нумерованного списка, начинающегося с 11.

Пример 2. Использование целого числа

HTML5 IE Cr Op Sa Fx

Целое число

Чебурашка

Крокодил Гена

Шапокляк

Отрицательные целые числа

Отрицательные целые числа применяются реже по сравнению с положительными по понятным причинам. С их помощью нельзя задать перечисление или ширину, хотя бы потому, что рисунков с отрицательной шириной не бывает. Так что в HTML такие числа применяются в основном в формах для ограничения ввода.

Для указания отрицательного числа перед ним ставится знак минус (-) без пробелов (например: -15). В примере 3 показано использование отрицательных значений.

Пример 3. Число со знаком минус

HTML5 IE Cr Op Sa Fx

Отрицательные числа

Введите число с шагом 2

Браузер Firefox не поддерживает тип number и вместо него отображает обычное текстовое поле.

Вещественные числа

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

Примеры вещественных чисел: -0.84, 3.1415926, 1.717.

Есть и вторая форма записи вещественных чисел, когда после числа добавляется латинский символ e или E, а затем число означающее степень, причём оно может быть и со знаком минус. Это аналогично тому, что число перед E умножают на 10 в степени, указанной после символа E. Вот несколько примеров для наглядности.

3.1415926e5 = 3.1415926 × 10 5 = 3.1415926 × 100000 = 314159.26

5e-2 = 5 × 10 -2 = 5 / 100 = 0.05

78e2 = 78 × 10 2 = 7800

Браузер Opera некорректно работает с вещественными числами, в которых есть заглавная буква E, так что вставляйте строчную букву e.

Дата и время

Используется для указания года, месяца и года или полной даты, а также времени.

Дата и время задается в особом формате, пример которого показан в табл. 1.

Для каждой единицы существует своя заданная форма и ограничения.

• Год - задается четырьмя цифрами (1860).
• Месяц - две цифры (01 - январь, 02 - февраль, 12 - декабрь).
• День - две цифры от 01 до 31.
• Час - две цифры от 00 до 23.
• Минуты - две цифры от 00 до 59.
• Секунды - две цифры от 00 до 59.
• Часовой пояс - часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

Цвета

Значение цвета представляет собой три числа в диапазоне от 0 до 255 в шестнадцатеричном представлении описывающие красную, зелёную и синюю компоненту в цветовом пространстве sRGB. Каждое значение цвета должно начинаться с символа решётки (#), после которого могут идти следующие шесть цифр или букв в любом регистре: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Другие символы не допускаются. Подробнее о цвете в HTML смотрите .

URL

URL - это адрес документа или файл. Содержит в себе несколько частей, не все из которых являются обязательными. Это протокол, имя хоста, порт, путь, строка запроса и хэш. В табл. 2 перечислены параметры URL с их описанием.

Табл. 2. Параметры URL Параметр Описание Пример

протокол	Сетевой протокол. Для гипертекстовых документов это HTTP.	http:// https://
имя хоста	Адрес сайта.	сайт www.google.com
порт	Системный ресурс, выделяемый веб-серверу. По умолчанию имеет значение 80, его можно не указывать.	:80
путь	Путь к документу на сайте.	/open/doc.html
строка запроса	Строка, в которой передаются параметры GET-запроса со значениями. Пишется после знака вопроса (?).	?name=vasya
хэш	Строка после знака решётки (#).	#top

В зависимости от наличия тех или иных параметров различают абсолютные и относительные адреса. Абсолютный адрес содержит порт и имя хоста, относительный - путь к документу. Строка запроса и хэш допустимо добавлять к адресу любого типа. Если URL содержит только хэш, то в текущем документе произойдёт переход к элементу, у которого задано id="имя_хэша" . Решётка в атрибуте id в таком случае не пишется.

На URL влияет с атрибутом href , адрес документа с его учётом может оказаться другим, чем тот, что задан явно.

Вопросы для проверки

1. Коля написал ошибочное число в следующем коде, но валидатор не выдал никакой ошибки. Почему?

2. Даша использовала число 12g5 в строке

Но браузер Chrome не показал никакого результата. Почему?

3. Сколько способов есть в HTML чтобы задать оранжевый цвет?

Мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом

вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.

Как писать атрибуты?

Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

Значения с атрибутами записываются в таком формате:

Атрибут=”значение” lang=”en”

Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.

Абзац

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

Универсальные атрибуты

Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.

• accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

Ссылка будет открываться по нажатию сочетания клавиш с единицей

• class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
• С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true - правку разрешить, false - запретить.
• При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
• dir определяет направление текста: слева направо (ltr) или справа налево (rtl) .
• draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
• dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy ), перемещать (move ) или создать на него ссылку (link) .
• hidden - атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true - скрывается.
• id задаёт идентификатор элемента - своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_) . Русских букв содержать не может.
• lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский - ru , английский - en и т. п.).
• spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
• style позволяет задать оформление элемента с помощью CSS-кода.
• tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута - целое положительное число.
• title - всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.

• translate разрешает (yes) или запрещает (no) перевод содержимого тега.
• align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left ), по правому краю (right ), по центру (center) или по ширине (justify) . Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top ), по нижней границе (bottom) , а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.

Пример использования атрибутов

В качестве примера рассмотрим строку HTML-кода:

Этот текст можно редактировать

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

Разберём каждый элемент строки.

- открывающий тег контейнера, хранящего абзац.

- закрывающий тег.

Между символами > и < расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true ” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable =”true ”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true , написанное в кавычках через знак равно, редактирование разрешает:

Атрибут=”значение” contenteditable=”true”