Javascript получить значение атрибута элемента. Манипулирование атрибутами элементов в jQuery. Классы в виде объекта: classList

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

Ko.bindingHandlers.attrIf = { update: function (element, valueAccessor, allBindingsAccessor) { var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (show) { ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); } else { for (var k in h) { if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) { $(element).removeAttr(k); } } } } }; link

Хотел бы я просто ответить на @gbs, но я не могу. Мое решение состояло бы в том, чтобы иметь два одинаковых элемента HTML: один с атрибутом, без него и условие нокаута, чтобы добавить одно из них в соответствии с элементом. Я также знаю об этом обычном ожидании, но какое из решений более эффективно?

В этой статье познакомимся DOM-свойствами и атрибутами, рассмотрим, чем они отличаются и как правильно с ними работать. Разберём какие в JavaScript есть методы для выполнения операций над атрибутами.

Атрибуты - это HTML-сущности, с помощью которых мы можем добавить определённые данные к элементам в HTML-коде.

Когда браузер запрашивает некоторую страницу, он получает её исходный HTML-код. После этого он парсит этот код и строит на его основании DOM. Во время этого процесса HTML-атрибуты элементов переводятся в соответствующие DOM-свойства .

Например, браузер, при чтении следующей HTML-строчки кода, создаст для этого элемента следующие DOM-свойства: id , className , src и alt .

Обращение к этим свойствам в коде JavaScript выполняется как к свойствам объекта. Объектом здесь выступает узел (элемент) DOM.

Пример, в котором получим значения DOM-свойств для элемента, приведённого выше, и выведем их значения в консоль:

// получим элемент var brandImg = document.querySelector("#brand"); // выведем в консоль значения DOM-свойств элемента console.log(brandImg.id); // "brand" console.log(brandImg.className); // "brand" console.log(brandImg.src); // "/logo.svg?1" console.log(brandImg.alt); // "логотип сайта"

Некоторые названия DOM-свойств не соответствуют именам атрибутов. Одним из таких является атрибут class . Данному атрибуту соответствует DOM-свойство className . Данное отличие связано с тем, что class является ключевым словом в JavaScript, оно зарезервировано и не может использоваться. Из-за этого разработчики стандарта решили использовать для соответствия какое-то другое название, в качестве которого было выбрано className .

Ещё один нюанс связан с тем, что перевод HTML-атрибутов, заданных в исходном коде документа, в DOM-свойства не всегда осуществляется один к одному.

Если элемент имеет нестандартный HTML-атрибут, то свойство, соответствующее ему в DOM, не создаётся .

// получим элемент mydiv = document.querySelector("#mydiv"); // получим значение свойство alt элемента и выведем его в консоль console.log(mydiv.alt); // undefined // получим значение атрибут alt элемента и выведем его в консоль console.log(mydiv.getAttribute("alt")); // "..."

Другое отличие связано с тем, что значения определённых HTML-атрибутов и соответствующих им DOM-свойств могут быть различными. Т.е. атрибут может иметь одно значение, а DOM-свойство, созданное на его основе – другое .

Одним из таких атрибутов является checked .

Значение HTML-атрибута checked в данном случае – это пустая строка. Но, свойство, соответствующее данному атрибуту в DOM, будет иметь значение true . Т.к. по правилам стандарта для установления true достаточно лишь упоминание этого атрибута в HTML-коде и при этом не важно какое он будет иметь значение.

При этом даже если мы в HTML-коде не укажем атрибут checked для элемента input с типом checkbox , то для него в DOM всё равно будет создано свойство checked , но оно будет равно false .

Кроме этого, JavaScript позволяет также работать с атрибутами. Для этого в DOM API имеются специальные методы. Но их желательно использовать только тогда, когда вам действительно нужно работать с данными именно так.

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

Основные отличия между DOM-свойствами и атрибутами:

• значение атрибута – это всегда строка, а значение DOM-свойства – определённый тип данных (не обязательно строка);
• имя атрибута – регистронезависимо, а DOM-свойства - регистрозависимо. Т.е. в HTML-коде мы можем, например, HTML-атрибут id написать, как Id , ID и т.д. То же касается и имени атрибута, которые мы указываем в специальных методах JavaScript для работы с ним. Но к соответствующему DOM-свойству мы можем обратиться только по id и никак по-другому.

Работа со свойствами элементов в JavaScript как уже было отмечено выше осуществляется как со свойствами объектов.

Но для того, чтобы обратиться к свойству некоторого элемента, его необходимо сначала получить. Получить DOM-элемент в JavaScript можно, например, с помощью универсального метода querySelector , а коллекцию DOM элементов, например, посредством querySelectorAll .

В качестве первого примера рассмотрим следующий HTML-элемент:

Текст информационного сообщения... var alert = document.querySelector("#alert"); // получим элемент

На базе него разберём как осуществляется получение DOM-свойств, их изменение и добавление новых.

Чтение значений DOM-свойств:

// получим значение DOM свойства id var alertId = alert.id; // "alert" // получим значение DOM свойства className var alertClass = alert.className; // "alert alert-info" // получим значение DOM свойства title var alertId = alert.title; // "Текст подсказки..."

Изменение значений DOM-свойств:

// для изменения значения DOM свойству, ему нужно просто присвоить новое значение alert.title = "Новый текст подсказки"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning";

Добавление DOM-свойств:

Alert.lang = "ru"; // установим свойству lang значение равное "ru" alert.dir = "ltr"; // установим свойство dir значение равное "ltr"

Пример, в котором выведем в консоль все значения классов, которые есть у элементов p на странице:

Var paragraphs = document.querySelectorAll("p"); for (var i = 0, length = paragraphs.length ; i < length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

Пример, в котором установим всем элементам с классом content свойство lang со значением "ru":

Var contents = document.querySelectorAll(".content"); for (var i = 0, length = contents.length; i < length; i++) { contents[i].lang = "ru"; }

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

Значения атрибутов, в отличие от DOM-свойств, как это уже было отмечено выше всегда является строкой.

В JavaScript для выполнения операций, связанных с атрибутами, имеется четыре метода:

• .hasAttribute("имя_атрибута") – проверяет наличие указанного атрибута у элемента. Если проверяемый атрибут есть у элемента, то данный метод возвращает true , в противном случае - false .
• .getAttribute("имя_атрибута") – получает значение атрибута. Если указанного атрибута нет у элемента, то данный метод возвращает пустую строку ("") или null .
• .setAttribute("имя_атрибута", "значение_атрибута") – устанавливает указанный атрибут с указанным значением элементу. Если указанный атрибут есть у элемента, то данный метод тогда просто изменит ему значение.
• .removeAttribute("имя_атрибута") - удаляет указанный атрибут у элемента.

Рассмотрим примеры.

Очень интересный пример с атрибутом value .

Получим значение атрибута value и DOM-свойства value:

// получим значение атрибута value у элемента name.getAttribute("value"); // "Bob" // получим значение DOM-свойства value name.value; // "Bob" // обновим значение атрибута value, установим ему новое значение name.setAttribute("value", "Tom"); // "Tom" // получим значение DOM свойства value name.value; // "Tom"

Из этого примера видно, что, при измении атрибута value , браузер автоматически изменяет в соответствии с ним DOM-свойство value .

Теперь давайте проделаем действия, наоборот, а именно изменим значение DOM-свойства и проверим изменится ли значение атрибута:

// установим новое значение DOM-свойству value name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom"

Из этого примера видно, что не всегда изменение DOM-свойства приводит к соответствующему изменению атрибута. Т.е. в этом случае изменение DOM-свойства value не изменяет соответствующий ему атрибут .

Тоже самое произойдёт, когда пользователь будет вводить текст в это поле. В DOM-свойстве value будет находится действительное значение, а в соответствующем ему атрибуте изначальное или то, которое мы установили, например, с помощью метода setAttribute .

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

Даже в случае, когда вам нужно получить начальное значение value , которое мы установили в HTML, можно воспользоваться свойством. Свойство, содержащее начальное значение атрибута value называется defaultValue .

Name.defaultValue; // Tom

Ещё один очень интересный пример, но теперь с атрибутом href.

Пример, в котором нам нужно получить значение ссылки так, как оно было установлено в HTML.

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // page2.html page2.href; // полный URL, например: http://localhost/page2.html

В этом примере атрибут href и DOM-свойство href содержат разные значения. В атрибуте href - то, что мы установили в коде, а в DOM-свойстве - полный URL. Это различие продиктовано стандартом, в соответствии с которым браузер должен привести значение href к полному URL.

Поэтому если нам нужно получить то, что находится в атрибуте, то без метода getAttribute в этом случае не обойтись.

В завершении разберём ещё атрибут selected .

Пример, в котором показано как можно получить значение выбранной опции select:

нет оценки 1 2 3 4 5 // получаем элемент select var mark = document.querySelector("#mark"); // 1 способ mark.querySelector("option:checked").value; // 2 способ mark.value;

Пример, в котором показано как можно получить выбранные значения опций в элементе select:

нет оценки 1 2 3 4 5 // получаем элемент select var mark = document.querySelector("#mark"); // 1 способ (через создание массива и наполнением его значений выбранных опций) var arr = ; for (var i = 0, length = mark.options.length; i < length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option => option.value)

В JavaScript у каждого элемента имеется свойство attributes , с помощью которого можно получить все его атрибуты в виде объекта NamedNodeMap .

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

Доступ к атрибуту в этой коллекции осуществляется по его индексу или с помощью метода item . Отсчёт атрибутов в этой коллекции ведётся с 0.

Например, выведем в консоль все атрибуты некоторого элемента:

I LOVE JAVASCRIPT

Кроме этого, работать с этой коллекцией можно также посредством следующих методов :

• .getNamedItem("имя_aтpибyтa") – получает значение указанного атрибута (если указанный атрибут отсутствует у элемента, то в качестве результата получим null).
• .setNamedItem("aтpибyт_yзeл") – добавляет новый атрибут к элементу или обновляет значение у существующего. Для создания атрибута необходимо использовать метод document.createAttribute() , которому в качестве параметра необходимо передать имя атрибута. После этого созданному атрибуту необходимо присвоить значение с помощью свойства value .
• .removeNamedItem("имя_атрибута") – удаляет указанный атрибут у элемента (в качестве результата возвращает удалённый атрибут).

Пример, работы с атрибутами через методы getNamedItem, setNamedItem и removeNamedItem:

I LOVE JAVASCRIPT

• Вывести в консоль все элементы документа, которые имеют атрибут id .
• Добавить атрибут title ко всем изображениям на странице, если данного атрибута у них нет. Значение атрибута установить равным значению атрибута alt .

На уроке будет рассмотрено начало темы: объектная модель документа (javaScript DOM) — основа динамического HTML, будут изучены методы доступа к объектам и рассмотрены способы обработки событий javascript

• В целом объект – это составной тип данных, объединяющий множество значений в общий модуль и позволяющий сохранять и извлекать по запросу значения по их именам.

Ранее мы уже начали знакомство с понятием в javascript.

• В javascript есть такое понятие как DOM — Document Object Model — объектная модель веб-страницы (html-страницы).
• Теги документа или, как еще говорят, узлы документа — это и есть его объекты.

Давайте рассмотрим на схеме иерархию объектов в JavaScript , и то, на каком месте иерархии находится рассматриваемый в данной теме объект document .

У элемента script есть атрибуты:

Пример:

/* Позволяет загружать js-файлы параллельно и выполнять сразу после загрузки, не дожидаясь обработки остальной части страницы */ /* Позволяет браузеру начать загрузку js-файлов параллельно, не останавливая дальнейшую обработку страницы. Их выполнение происходит после полного разбора объектной модель документа */

Объект document представляет собой веб-страницу.

Важно: Для обращения к свойствам и методам объекта в javaScript, как и при работе с другими объектами, используется точечная нотация :

т.е. сначала пишется сам объект, затем через точку и без пробелов указывается его свойство, атрибут или метод

Рассмотрим пример:

Пример: пусть в html-документе есть тег

Мой элемент

и определенный для него стиль css (даже два стиля, второй пригодится для задания):

.small{ color:red; font-size:small; } .big{ color:blue; font-size:big; }

Необходимо:

Так как это язык javascript, то объекту можно придумать и задать любое свойство с любым значением. Но для начала получим доступ к объекту (о доступе к объекту будет подробно рассказано ниже в данном уроке):

// получаем доступ к объекту по его id var element = document.getElementById("MyElem"); element.myProperty = 5; // назначаем свойство alert(element.myProperty); // выводим в диалоговое окно

Следующее задание связано с атрибутом объекта. Атрибут объекта — это атрибуты тега. Т.е. в нашем случаем их два: атрибут class со значением small и атрибут id . Будем работать с атрибутом class .

Теперь добавим javascript-код для вывода значения атрибута нашего объекта. Код должен находиться после основных тегов:

// получаем доступ к объекту по его id var element = document.getElementById("MyElem"); alert(element.getAttribute("class")); // выводим в диалоговое окно

И последнее задание: изменяем значение атрибута. Для этого у нас заготовлен стиль «big» . Заменим значение атрибута class на этот стиль:

// получаем доступ к объекту по его id var element = document.getElementById("MyElem"); element.setAttribute("class","big");

В результате наш элемент станет большего размера и окрасится в синий цвет (класс big).

Теперь подробнее рассмотрим использованные в примере методы для работы с атрибутами.

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

• Добавление атрибута (установление для него нового значения):

getAttribute(attr)

• Проверка наличия данного атрибута:

removeAttribute(attr)

Разные способы работы с атрибутами

Пример: Вывести значение атрибута value текстового блока.

• Пусть имеется текстовый блок:

var elem = document.getElementById("MyElem"); var x = "value";

• Рассмотрим несколько способов получения значения атрибута (для вывода используйте метод alert()):

elem.getAttribute ("value" )

elem.getAttribute("value")

2. точечная нотация:

elem.attributes .value

elem.attributes.value

3. скобочная нотация:

var element = document.getElementById("t1"); alert(...) element.setAttribute(...);


Установить значения атрибутов также можно несколькими способами:

var x = "key"; // key - название атрибута, val - значение для атрибута // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes["key"] = "val" // 4. elem.setAttribute(x, "val")

Свойства элемента body

Через объект document можно обратиться к телу документа — тегу body — с его некоторыми полезными свойствами.

Например, у тега body есть два свойства: ширина и высота клиентского окна:

document.body.clientHeight — высота клиентского окна
document.body.clientWidth — ширина клиентского окна


Но самое главное, как мы уже узнали, это то, что через объект document посредством специальных методов осуществляется доступ ко всем элементам страницы, то есть тегам.

Важно: При такого рода обращении к тегам страницы скрипт должен находиться в конце дерева элементов, перед закрытием body ! Так как к моменту исполнения скрипта все элементы уже должны быть «нарисованы» браузером на экране

Задание js8_1 . Выдавать сообщение о размерах окна браузера: например, «размеры окна браузера 600 х 400»

Доступ к элементам документа в javaScript

Для доступа к объектам или поиска объектов предусмотрено несколько вариантов:

Рассмотрим каждый из вариантов подробнее.

Синтаксис: document.getElementById(id)

Метод getElementById() возвращает сам элемент, который можно затем использовать для доступа к данным

Пример: На странице есть текстовое поле с атрибутом id="cake" :

...

Необходимо

alert(document.getElementById("cake").value); // возвращает "кол-во тортов"

Можно выполнить то же самое, реализовав обращение к объекту через переменную :

var a=document.getElementById("cake"); alert (a.value); // выведем значение атрибута value, т.е. текст "кол-во тортов"

Важно: Скрипт должен находиться обязательно после тега!

Синтаксис:
document.getElementsByTagName(name);

Пример: На странице есть текстовое поле (тег input), с атрибутом value:

...

Необходимо : вывести значение его атрибута value

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

✍ Решение:

Обращаемся к конкретному элементу по индексу:

var a =document.getElementsByTagName("input"); alert(a.value); // возвращает "кол-во тортов"

Синтаксис:
document.getElementsByName(name);

Метод getElementsByName("...") возвращает массив объектов , у которых атрибут name равен указанному в качестве параметра метода значению. Если такой элемент только один на странице, то метод все равно возвращает массив (только с одним единственным элементом).

Пример: допустим в документе есть элемент:

var element = document.getElementsByName("MyElem"); alert(element.value);

В данном примере элемент один, но обращение осуществляется к нулевому элементу массива.

Важно: Метод работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name : это теги form , input , a , select , textarea и ряд других, более редких.

Метод document.getElementsByName не будет работать с остальными элементами типа div , p и т.п.

Доступ к потомкам в javascript происходит посредством свойства childNodes . Свойство принадлежит объекту-родителю.

document.getElementById(roditel).childNodes;

Рассмотрим пример, в котором теги изображений помещены в контейнер — тег div . Таким образом, тег div является родителем данных изображений, а сами теги img , соответственно, являются потомками тега div:

Теперь выведем в модальное окно значения элементов массива с потомками, т.е. тегами img:

var myDiv=document.getElementById("div_for_img"); // обращаемся к родителю-контейнеру var childMas=myDiv.childNodes; // массив потомков for (var i =0; i < childMas.length;i++){ alert(childMas[i].src); }

Обратите внимание, что для перебора элементов массива потомков удобно использовать цикл . Т.е. в нашем примере получаем цикл:

For (var a in childMas){ alert(childMas[a].src); }

Другие способы рассмотрим на примере:

1 3 4

Доступ:

... // нежелательные и устаревшие методы доступа к элементам: alert(document.forms.name); // f alert(document.forms.elements.type); // text alert(document.forms.elements.options.id); // o2 alert(document.f.b.type); // button alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // предпочтительные методы доступа к элементам alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

Пример: В html-документе создать кнопку и текстовое поле. При помощи скрипта раскрашивать фон кнопки (свойство style.backgroundColor кнопки) и выводить надпись «Привет!» в текстовом поле (трибут value).

Html-код:

document.getElementById("t1").value = "Привет!"; document.getElementById("b1").style.backgroundColor = "red";

Вариант 2:

document.getElementById("t1").setAttribute("value","Привет!"); document.getElementById("b1").style.backgroundColor = "red";

Задание Js8_2. Создайте теги текстовых полей согласно изображению на рисунке. Задайте им соответствующие (указанные на рисунке) значения атрибутов id . При помощи скрипта добавьте во все числовые поля (предполагающие численные значения) значение « 0 »

Не осталось ли поле пустым?

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

Для того, чтобы проверить, не осталось ли текстовое поле пустым (например, после заполнения пользователем данных какой-либо анкеты), следует обратиться к свойству value . Если значением свойства является пустая строка (""), значит необходимо как-то оповестить об этом пользователя.

if(document.getElementById("name").value=="") { какие-то действия, например, вывод сообщения с требованием заполнить поле };

Кроме того, можно обойтись и без скрипта. У тега input текстового поля есть атрибут pattern . в качестве его значения указывается регулярное выражение для проверки данных в данном текстовом поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока это текстовое поле не будет заполнено правильно.
Например, для проверки, не осталось ли поле пустым:

Текст вместо числового значения: функция isNaN

Если поле предполагает введение числового значения , а вместо этого пользователь вводит текст, то необходимо использовать функцию isNaN (с англ. «является ли не числом?» ), которая проверяет тип вводимых данных и возвращает true в случае введения текстовых данных вместо числовых.

Т.о. если возвращено true , то необходимо оповестить пользователя о том, чтобы он ввел правильный формат, т.е. число.

if(isNaN(document.getElementById("minutes").value)){ оповещение с требованием ввести числовые данные };

Дана страница с элементами для заполнения:


Фрагмент кода html:

Имя:
Кол-во пончиков:
Минут:
Подытог:
Налог:
Итог:
...

Необходимо:
Дополните пустые места фрагмента кода, расположенного ниже, проверяющего правильность заполнения двух текстовых полей: имя (id="name") и минут (id="minutes"). Используйте проверку на оставление поля пустым ("") и правильного формата заполнения числового поля (isNaN).

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

Фрагмент скрипта:

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

Новым понятием для вас является вызов функции в качестве обработчика события кнопки:
onclick="placeOrder();"
По щелчку на кнопке будет вызываться функция placeOrder()

Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

Boolean attributes are considered to be true if they"re present on the element at all, regardless of their actual value ; as a rule, you should specify the empty string ("") in value (some people use the attribute"s name; this works but is non-standard). See the below for a practical demonstration.

Since the specified value gets converted into a string, specifying null doesn"t necessarily do what you expect. Instead of removing the attribute or setting its value to be null , it instead sets the attribute"s value to the string "null" . If you wish to remove an attribute, call removeAttribute() .

In the following example, setAttribute() is used to set attributes on a .

This demonstrates two things:

• The first call to setAttribute() above shows changing the name attribute"s value to "helloButton". You can see this using your browser"s page inspector (Chrome , Edge , Firefox , Safari).
• To set the value of a Boolean attribute, such as disabled , you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value , its value is considered to be true . The absence of the attribute means its value is false . By setting the value of the disabled attribute to the empty string (""), we are setting disabled to true , which results in the button being disabled.

DOM methods dealing with element"s attributes:

• DOM Level 2 Core: setAttribute (introduced in DOM Level 1 Core)

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use Element.value instead of Element.setAttribute() .

Данный урок посвящён чтению и изменению атрибутов элементов в jQuery.

Атрибуты — это пара имя/значение, которая назначается элементам в теге. Примеры атрибутов (href , title , src , class ):

• attr() для чтения, добавления и изменения атрибутов
• removeAttr() для удаления атрибутов

В данном уроке разбирается работа с методами attr() и removeAttr() .

Для работы с классами CSS существуют специальные методы jQuery, которые описаны в другом уроке . При работе над проектом в jQuery приходится очень часто манипулировать классами CSS, а атрибут class может содержать несколько имён классов, что значительно усложняет работу с ним, по сравнению с другими атрибутами.

Если вы собираетесь работать со значениями полей ввода, то лучше использовать метод val() , который не только обеспечивает упрощённый вариант работы с атрибутом value , но и может читать и устанавливать значения в выбранных элементах списка select .

Чтение значения атрибута элемента осуществляется просто. Нужно только вызвать метод attr() для объекта jQuery, который содержит элемент, передав ему имя атрибута для чтения. Метод возвращает значение атрибута:

// Выводим значение атрибута "href" элемента #myLink alert ($("a#myLink").attr("href"));

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

Метод attr() можно использовать также для добавления или изменения значений атрибутов:

• Если атрибут не существует в элементе, он будет добавлен и ему будет присвоено заданное значение.
• Если атрибут уже существует , его значение будет обновлено заданным значением.

Существует три способа использовать метод attr() для добавления или изменения атрибутов:

Чтобы установить или изменить атрибут элемента нужно вызвать метод attr() с указанием имени атрибута и значения. Например:

// Изменяем значение атрибута "href" элемента #myLink на значение "http://www.example.com/" // (если атрибут "href" не существует, он будет создан автоматически) $("a#myLink").attr("href", "http://www.example.com/");

Также можно установить один и тот же атрибут для нескольких элементов:

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

{ имя1: значение1, имя2: значение2, ... }

В следующем примере устанавливаются два атрибута для элемента img одновременно:

// Устанавливаем атрибуты "src" и "alt" для элемента img #myPhoto $("img#myPhoto").attr({ "src": "mypic.jpg", "alt": "My Photo" });

Также вы можете устанавливать атрибуты для нескольких элементов:

// Устанавливаем атрибуты "src" и "alt" для всех элементов img $("img").attr({ "src": "mypic.jpg", "alt": "My Photo" });

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

Возвратная функция должна принимать два аргумента:

• Индекс позиции текущего выбранного элемента в наборе (начинается с ноля)
• старое значение атрибута для текущего выбранного элемента

Возвращаемое функцией значение используется для замещения значения атрибута.

Кроме текущего положения элемента и старого значения атрибута ваша функция может получить доступ к самому элементу с помощью ключевого слова this . Таким образом можно получить доступ к любому свойству или методу элемента из возвратной функции.

В примере используется возвратная функция для добавления атрибута alt каждому изображению на странице на основании положения изображения и его атрибута src:

$(init); function init() { // Устанавливаем атрибут "alt" для всех элементов "img" $("img").attr("alt", setAltText); function setAltText(index, attributeValue) { return ("Рисунок " + (index+1) + ": " + this.src); } }

После выполнения кода, первое изображение будет иметь атрибут alt со значением "Рисунок 1: myphoto.jpg" , а второе изображение будет иметь атрибут alt со значением "Рисунок 2: yourphoto.jpg" .

Для удаления атрибута из элемента нужно вызвать метод removeAttr() , передав ему имя атрибута для удаления. Например:

// Удаляем атрибут "title" из элемента #myLink $("a#myLink").removeAttr("title");

Вы также можете вызвать метод removeAttr() для объекта jQuery, который содержит несколько элементов. Метод removeAttr() удалит заданный атрибут изо всех элементов:

// Удаляем атрибут "title" изо всех ссылок $("a").removeAttr("title");

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

• Чтение значений атрибутов
• Установка одного атрибута
• Установка нескольких разных атрибутов одновременно
• Использование возвратной функции для динамической установки значений атрибутов в наборе элементов
• Удаление атрибутов из элемента