HTML элементы могут иметь атрибуты. Атрибуты предназначены для добавления дополнительной информации об элементе и/или для изменения его стандартного поведения. Атрибуты всегда указываются внутри открывающего тега. В большинстве случаев атрибуты являются необязательными и указываются только при необходимости. Один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя. Синтаксис элемента с атрибутом:
Атрибуты состоят из пары: имя_атрибута="значение" . Имена атрибутов не чувствительны к регистру символов и могут быть записаны с любым сочетанием строчных и заглавных букв. Значение атрибута может состоять из текста, цифр и других символов (единственным исключением является символ амперсанда (&), его использование запрещено). Дополнительные ограничения на использование различных символов в значении атрибута зависят от способа записи значения. При указании нескольких атрибутов в одном элементе, они должны быть отделены друг от друга символом пробела. Порядок следования атрибутов не имеет значения.
содержимое
содержимое
Атрибуты могут быть записаны четырьмя различными способами:
Атрибуты, значения которых совпадают с именем атрибута называют логическими или пустыми . Для атрибутов логического типа поддерживается синтаксис, при котором явное указание значения атрибута можно опустить, написав только его имя, в этом случае значением будет являться неявно указанная пустая строка:
Само присутствие в элементе логического атрибута представляет собой значение true (истина), а отсутствие этого атрибута - значение false (ложь). Если таковой атрибут присутствует, его значением может быть либо пустая строка, либо значение должно совпадать с именем атрибута.
Некоторые атрибуты в качестве значения могут принимать одно ключевое слово из набора допустимых ключевых слов. Такие атрибуты называются перечисляемыми атрибутами. Каждое ключевое слово соответствует определённому состоянию (некоторые ключевые слова соответствуют одному и тому же состоянию, в этом случае они являются синонимами друг для друга).
Если используется перечисляемый атрибут, то его значение должно совпадать с одним из ключевых слов, заданных для него. Отсутствие значения, например, как в логических атрибутах, не допустимо:
Hello!
Hello!
Примечание: пустая строка ("") может быть допустимым ключевым словом.
Hello!
Синтаксис с опущенными кавычками вокруг значения атрибута подразумевает, что за именем атрибута, после знака "=", будет следовать значение атрибута, которое не должно содержать символов пробела, двойных кавычек ("), апострофов (") и других видов кавычек, символов "=", угловых скобок (< и >), помимо этого, значение не должно являться пустой строкой.
Значение атрибута, взятое в одиночные кавычки, не должно содержать символы апострофов ("), но допускается содержание двойных кавычек (").
Значение атрибута, окруженное двойными кавычками, может содержать любые символы, включая апострофы ("), кроме двойных кавычек (").
Примечание: один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя.
Влад Мержевич
Каждый атрибут тега содержит значение определённого типа и формата написания. Различают следующие типы значений: ключевые слова, числа, дата и время, цвета, URL.
Для всех атрибутов характерны следующие принципы.
Не все атрибуты имеют значение по умолчанию, в случае отсутствия такого атрибута или при его некорректном значении, атрибут пропускается.
Это заданный фиксированный набор определённых слов, которые допустимо подставлять в качестве значений атрибутов. Ключевые слова не чувствительны к регистру и их можно писать любым удобным способом. Так, значения handheld , Handheld и HANDHELD по своему действию одинаковы.
В примере 1 показано создание формы, которая отправляется на сервер методом POST с помощью значения post атрибута method .
Пример 1. Метод отправки формы
HTML5 IE Cr Op Sa Fx
В данном примере в элементе
Браузер 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.
Для каждой единицы существует своя заданная форма и ограничения.
Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.
Значение цвета представляет собой три числа в диапазоне от 0 до 255 в шестнадцатеричном представлении описывающие красную, зелёную и синюю компоненту в цветовом пространстве sRGB. Каждое значение цвета должно начинаться с символа решётки (#), после которого могут идти следующие шесть цифр или букв в любом регистре: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Другие символы не допускаются. Подробнее о цвете в HTML смотрите .
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 чтобы задать оранжевый цвет?
Сохраните эту страницу для тестирования приведенных ниже примеров.
Библиотека jQuery позволяет получать и устанавливать значения атрибутов элементов, содержащихся в объекте jQuery. Методы jQuery, предназначенные для работы с атрибутами, описаны в таблице ниже:
Метод | Описание |
---|---|
attr(имя) | Возвращает значение атрибута с указанным именем для первого из элементов, содержащихся в объекте jQuery |
attr(имя, значение) | Устанавливает значение атрибута с указанным именем для всех элементов, содержащихся в объекте jQuery |
attr(объект отображения) | Устанавливает атрибуты, указанные в объекте отображения, для всех элементов, содержащихся в объекте jQuery |
attr(имя, функция) | Устанавливает указанный атрибут для всех элементов, содержащихся в объекте jQuery, с помощью функции |
removeAttr(имя), removeAttr(имя) | Удаляет атрибут (атрибуты) из всех элементов, содержащихся в объекте jQuery |
prop(имя) | Возвращает значение указанного свойства для первого из элементов, содержащихся в объекте jQuery |
prop(имя, значение), prop(объект отображения) | Устанавливает значение одного или нескольких свойств для всех элементов, содержащихся в объекте jQuery |
prop(имя, функция) | Устанавливает значение указанного свойства для всех элементов, содержащихся в объекте jQuery, с использованием функции |
removeProp(имя) | Удаляет указанное свойство из всех элементов, содержащихся в объекте jQuery |
Если метод attr() вызывается с одним аргументом, jQuery возвращает значение указанного атрибута для первого из элементов выбранного набора. Соответствующий пример приведен ниже:
$(function() { var srcValue = $("img").attr("src"); console.log("Значение атрибута: " + srcValue); });
В этом сценарии мы выбираем все элементы img в документе, а затем используем метод attr() для получения значения атрибута src, при считывании которого получаем строку. На консоль выводится следующий результат:
Получение значения атрибута для всех элементов, содержащихся в объекте jQuery, обеспечивается совместным применением методов each() и attr():
$(function() { var srcValue = $("img").each(function(index, element) { console.log("Значение атрибута src: " + $(this).attr("src")); }); });
В этом сценарии из объекта HTMLElement, передаваемого функции в качестве аргумента, с помощью функции $() создается объект jQuery. Этот объект содержит единственный элемент, который идеально подходит для метода attr().
Если метод attr() используется для установки значения атрибута, то изменение применяется ко всем элементам, содержащимся в объекте jQuery. Таким образом, в данном случае метод ведет себя иначе, чем при считывании атрибутов, когда возвращается лишь значение атрибута одного элемента. При установке атрибута метод attr() возвращает объект jQuery, что означает возможность использования цепочки вызовов.
Пример сценария, выполняющего установку значения атрибута, приведен ниже:
$(function() { $("img")..png"); });
В этом сценарии выбираются все элементы img в документе, и для атрибута src устанавливается ссылка на картинку lily.png. Установленное значение применяется ко всем выбранным элементам, как показано на рисунке:
Можно установить значения нескольких атрибутов одним вызовом метода attr(), передав ему в качестве аргумента объект. Свойства такого объекта интерпретируются как имена атрибутов, а значения свойств - как значения атрибута. Этот объект принято называть объектом отображения (map object) . Соответствующий пример приведен ниже:
$(function() { var attrValues = { src: "http://сайт/downloads/jquery/lily.png", style: "border: thick solid red" }; $("img").attr(attrValues); });
В этом сценарии создается объект, определяющий свойства с именами src и style. Далее в документе выбираются элементы img, и методу attr() передается объект отображения. Вид страницы в окне браузера приведен на рисунке:
Назначаемые атрибутам значения можно определять во время выполнения сценария, передавая методу attr() функцию в качестве аргумента. Соответствующий пример приведен ниже:
$(function() { $("img").attr("src", function(index, oldVal) { if (oldVal.indexOf("rose") >.png"; } else if ($(this).closest("#row2").length >.png"; } }); });
Аргументы, передаваемые указанной функции, - это индекс обрабатываемого элемента в наборе и прежнее значение атрибута. Переменная this ссылается на текущий обрабатываемый объект HTMLElement. Если вы хотите изменить атрибут, то функция должна вернуть строку, содержащую новое значение. Если же результат не возвращается, то используется прежнее значение атрибута. В данном примере функция используется для избирательного изменения изображений, отображаемых элементами img.
Атрибуты можно удалять (отменять установку) с помощью метода removeAttr() , как показано в примере ниже.
Последнее обновление: 1.11.2015
В предыдущей главе мы узнали, как получить элементы, используя селекторы и различные методы, как детализировать выборку, оставив в ней только нужные элементы. Однако сама по себе выборка была бы не важна, если бы jQuery не поддерживала манипуляции над выбранными элементами. Поэтому посмотрим, какие манипуляции с элементами мы можем производить с помощью jQuery.
Библиотека jQuery предлагает нам инструментарий для манипуляции свойствами и атрибутами элементов. Но прежде чем переходить к непосредственным методам jQuery, надо отметить, чем отличаются свойства и атрибуты.
Атрибуты - это элементы разметки элементов, такие как id, style, class и ряд других. Свойства же представляют элементы объектов javascript.
Несмотря на такое различие, между свойствами и атрибутами имеет сопоставление. Так, атрибут id будет соответствовать свойству id. Например, у нас есть ссылка:
То есть на консоль выведет значение атрибута id. В то же время не все для всех атрибутов есть одноименные классы. Так, атрибуту class соответствует свойство className .
Для работы со свойствами в jQuery имеется метод prop() . Чтобы получить значения свойства, нам надо передать в этот метод имя свойства. Например, так мы можем получить все адреса ссылок на странице:
$("a").each(function(index,elem){ console.log($(elem).prop("href")); });
Чтобы изменить значение свойства, надо просто передать в качестве второго параметра новое значение:
$("a").first().prop("href","33.html");
Для удаления свойств мы можем использовать метод removeProp("имя_свойства") :
$("a").first().removeProp("href");
После этого свойству будет присвоено новое значение: undefined , которое будет указывать, свойство не определено.
Работа с атрибутами во многом похожа на работу со свойствами. Так, чтобы получить значение атрибута элемента, нам надо использовать метод attr("имя_атрибута") :
$("a").each(function(index,elem){ console.log($(elem).attr("href")); });
Действие данного метода аналогично тому, что приводилось для метода prop: вывод на консоль всех адресов ссылок.
А передавая в качестве второго параметра в метод attr некоторое значение, можно установить новое значение атрибута:
$("a").first().attr("href","33.html");
И также для удаления значений атрибутов мы модем использовать метод removeAttr("имя_атрибута") :
$("a").first().removeAttr("href");
Обратите внимание, если в случае с удалением свойства через метод removeProp соответствующий свойству атрибут оставался, только ему присваивалось значение свойства, то есть undefined, то при удалении атрибута через removeAttr атрибут удаляется из разметки элемента.
В HTML5 была введена такая функциональность, как пользовательские атрибуты. Их суть в том, что мы можем применить к элементу дополнительные атрибуты, которые будут хранить некоторое дополнительное значение. Подобные атрибуты начинаются с префикса data- , после которого идет собственно название атрибута и его значение. Например, в следующем примере я добавляю атрибут data-year, который будет хранить год:
Для работы с подобными атрибутами используется метод data . Он имеет следующие варианты использования:
data("имя атрибута") : получает значение атрибута первого элемента набора. В качестве параметра передается имя атрибута без префикса data-
Так, мы можем получить значение атрибута из предыдущего примера следующим образом:
Console.log($("ul").data("year"));
data() : возвращает объект javascript, который содержит набор атрибутов и их значений в виде пар ключ-значение.
Например, пусть у нас будет элемент с двумя атрибутами:
Тогда метод data() вернул бы объект {description:"lang", year:"2010"} . И чтобы получить значение отдельного атрибута, можно написать так:
Console.log($("ul").data().year);
data("атрибут", "новое значение") : устанавливает в качестве значения атрибута строку, переданную в качестве второго параметра:
$("ul").first().data("year", "2012");
В качестве нового значения может выступать и целых объект javascript, а данный атрибут будет содержать в качестве значения весь этот объект:
$("ul").first().data("lang", { rate: "tiobe", year: 2012 });
Если же мы захотим удалить атрибут, то для этого нужно применить метод removeData("название_атрибута") .
Мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом
вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.
Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?
Значения с атрибутами записываются в таком формате:
Атрибут=”значение” lang=”en”
Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.
Абзац
Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.
Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.
В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:
Ссылка будет открываться по нажатию сочетания клавиш с единицей
Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.
В качестве примера рассмотрим строку HTML-кода:
Этот текст можно редактировать
Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.
Разберём каждый элемент строки.
- открывающий тег контейнера, хранящего абзац.
- закрывающий тег.Между символами > и < расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.
contenteditable =”true ” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable =”true ”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true , написанное в кавычках через знак равно, редактирование разрешает:
Атрибут=”значение” contenteditable=”true”