Главная » Триколор ТВ » Атрибуты HTML-тегов. Как установить или изменить значение атрибута с помощью jQuery

Атрибуты HTML-тегов. Как установить или изменить значение атрибута с помощью jQuery

У каждого атрибута, за исключением логических, есть значение, которое относится к одному из следующих типов: ключевое слово, строка, адрес, число, проценты, код языка. Это не все типы, но самые распространённые.

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

У некоторых атрибутов есть зарезервированные значения, которые называются «ключевые слова». К примеру, значение атрибута type элемента определяет тип элемента формы. Ниже элемент создаёт кнопку.

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

Строка

Строка представляет собой текст, заключённый в двойные или одинарные кавычки.

Кавычка определяет начало и конец строки, поэтому внутри строки нельзя дополнительно ставить такие же кавычки. К примеру, следующая строка использует неправильное сочетание кавычек.

Чтобы корректно написать строку с внутренними кавычками есть несколько вариантов.

1. Экранировать внутреннюю кавычку вот таким образом - \". В таком случае она уже не будет восприниматься браузером как кавычка, а считается символом.

2. Использовать сочетание одинарных и двойных кавычек.

Здесь строка у атрибута title взята в одинарные кавычки, поэтому мы спокойно можем писать внутри двойную кавычку.

Всё это аналогичным образом работает и для одинарных кавычек.

Адрес

Адресом называется путь к документу, например, к графическому файлу. Адрес необходим в тех случаях, когда делается ссылка на сайт, другую веб-страницу или загружается определённый файл. Например, в элементе адрес используется в качестве значения атрибута src , он задаёт путь к файлу с изображением.

Различают абсолютные и относительные адреса.

Абсолютные адреса

Подобные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где задан адрес и начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные адреса начинаются с ключевого слова http://. В примере 1 приведена ссылка, в которой применяется абсолютный адрес.

Пример 1. Использование абсолютного адреса в ссылке

Ссылка

Google

Кроме протокола HTTP существует и защищённый протокол HTTPS. Не всегда очевидно, какой протокол используется на сайте, поэтому в адресе ссылки его можно вообще опустить. Адрес в таком случае запишется так:

Google

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

Относительные адреса

Относительные адреса указываются от корня сайта или текущего документа. Например, код означает загрузить графический файл с именем pic.png, который располагается в той же папке, что и сама веб-страница. Далее рассмотрим несколько примеров таких адресов.

/
Адрес указывает обычно на файл index.html, который находится в корне сайта. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Имя файла не обязательно должно быть index.html, этот параметр меняется через настройки веб-сервера - так называется программа, которая анализирует приходящие от браузера запросы и передаёт ему документы, показываемые пользователю.

/images/pic.png
Черта (/) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведёт на файл pic.png, который располагается в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше в списке папок сайта и там «поискать» в папке help файл с именем me.html.

manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде точек или черты, то папка размещена внутри текущей папки, а уже в ней находится файл info.html.

Адреса относительно корня сайта вроде /demo/ работают только под управлением веб-сервера и на локальном компьютере не применимы.

Ссылки

Посмотрите на мою фотографию!

Как сделать такое же фото?

Иногда можно встретить адреса в виде./file/doc.html. Точка впереди означает, что отсчёт ведётся от текущей папки. Подобная запись избыточна и её можно сократить до file/doc.html.

Числа

Числа состоят из цифр от 0 до 9; для отрицательных чисел, если они необходимы, впереди ставится знак минус (-45). В примере 3 показано использование чисел в качестве значений атрибутов.

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

Числа

Температура воды

Низкая Нормальная Горячая Кипяток

Кроме целых чисел допустимо использовать десятичные дроби, при этом целая и дробная часть отделяются друг от друга точкой - 36.6, как показано в примере 4.

Пример 4. Дробные числа

input, атрибут max

Проценты

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

Элемент располагается внутри

Поэтому элемент

Будет родителем для . Верно и обратное - элемент является дочерним по отношению к

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

Браузер понимает, что речь идёт именно о процентах, если после числа добавляется символ %, например: width="40%" .

В примере 5 приведён код веб-страницы, в котором ширина картинки указывается в процентах.

Пример 5. Размеры изображения в процентах

Изображение

Результат данного примера показан на рис. 1. Ширина изображения задана как 100%, поэтому занимает всю доступную ширину окна браузера. Высота при этом не указана и вычисляется браузером автоматически.

Рис. 1. Размер картинки в процентах

Плюсом процентной записи является то, что размеры картинки меняются вместе с шириной окна браузера, а не остаются статичными. К минусам можно отнести ухудшение качества картинки при её сильном растяжении.

Код языка

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

Пример 6. Использование атрибута lang

lang

Фраза на французском

Je n"ai pas mangé depuis six jours

В данном примере для всей страницы указан русский язык с помощью атрибута lang со значением ru . Чтобы показать, что язык относится ко всей странице, атрибут добавлен к элементу . Для текста на французском атрибут lang со значением fr добавлен к элементу

Допустимые значения атрибута lang вы можете посмотреть на этой странице.

Последнее обновление: 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

В HTML5 была введена такая функциональность, как пользовательские атрибуты. Их суть в том, что мы можем применить к элементу дополнительные атрибуты, которые будут хранить некоторое дополнительное значение. Подобные атрибуты начинаются с префикса data- , после которого идет собственно название атрибута и его значение. Например, в следующем примере я добавляю атрибут data-year, который будет хранить год:

Java
C/C++

Для работы с подобными атрибутами используется метод 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("название_атрибута") .

Сохраните эту страницу для тестирования приведенных ниже примеров.

Библиотека 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() , как показано в примере ниже.

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

Библиотека 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.

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

Атрибуты состоят из пары: имя_атрибута="значение" . Имена атрибутов не чувствительны к регистру символов и могут быть записаны с любым сочетанием строчных и заглавных букв. Значение атрибута может состоять из текста, цифр и других символов (единственным исключением является символ амперсанда (&), его использование запрещено). Дополнительные ограничения на использование различных символов в значении атрибута зависят от способа записи значения. При указании нескольких атрибутов в одном элементе, они должны быть отделены друг от друга символом пробела. Порядок следования атрибутов не имеет значения.

содержимое

Атрибуты могут быть записаны четырьмя различными способами:

Пустой атрибут

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

Само присутствие в элементе логического атрибута представляет собой значение true (истина), а отсутствие этого атрибута - значение false (ложь). Если таковой атрибут присутствует, его значением может быть либо пустая строка, либо значение должно совпадать с именем атрибута.

Ключевые слова и перечисляемые атрибуты

Некоторые атрибуты в качестве значения могут принимать одно ключевое слово из набора допустимых ключевых слов. Такие атрибуты называются перечисляемыми атрибутами. Каждое ключевое слово соответствует определённому состоянию (некоторые ключевые слова соответствуют одному и тому же состоянию, в этом случае они являются синонимами друг для друга).

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

Hello!

Примечание: пустая строка ("") может быть допустимым ключевым словом.

Hello!

Атрибут со значением без кавычек

Синтаксис с опущенными кавычками вокруг значения атрибута подразумевает, что за именем атрибута, после знака "=", будет следовать значение атрибута, которое не должно содержать символов пробела, двойных кавычек ("), апострофов (") и других видов кавычек, символов "=", угловых скобок (< и >), помимо этого, значение не должно являться пустой строкой.