Javascript значення атрибутів елементів є. Маніпулювання атрибутами елементів у jQuery. Перевірка правильності внесення даних форми

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

• В цілому об'єкт– це складовий тип даних, що поєднує безліч значень у загальний модуль і дозволяє зберігати та витягувати за запитом значення за їхніми іменами.

Раніше ми вже розпочали знайомство з поняттям у javascript.

• У javascript є таке поняття як DOM Document Object Model- Об'єктна модель веб-сторінки (html-сторінки).
• Теги документа або, як ще кажуть, вузли документа — це його об'єкти.

Давайте розглянемо на схемі ієрархію об'єктів у JavaScript, і те, де ієрархії знаходиться аналізований у цій темі об'єкт document .

У елемента script є атрибути:

Приклад:

Властивості та атрибути об'єкта document в javaScript

Об'єкт document є веб-сторінкою.

Важливо:Для звернення до властивостей та методів об'єкта в JavaScript, як і при роботі з іншими об'єктами, використовується точкова нотація:

тобто. спочатку пишеться сам об'єкт, потім через точку і без пробілів вказується його властивість, атрибут чи метод

Розглянемо приклад:

Приклад:нехай у html-документі є тег

та визначений для нього стиль css(навіть два стилі, другий знадобиться для завдання):

Необхідно:

1. задати нову властивість об'єкта, надати йому значення і вивести це значення;
2. вивести значення атрибута об'єкта;
3. змінити значення атрибута об'єкта.

Так як це мова 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).

Тепер докладніше розглянемо використані прикладі методи роботи з атрибутами.

Методи роботи з атрибутами в JavaScript

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

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

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 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

Для доступу до об'єктів або пошуку об'єктів передбачено кілька варіантів:

1. Пошук по id(або метод getElementById), повертає конкретний елемент
2. Пошук за назвою тега(або метод getElementsByTagName), повертає масив елементів
3. Пошук за атрибутом name(або метод getElementsByName), повертає масив елементів
4. Через батьківські елементи(Отримання всіх нащадків)

Розглянемо кожен із варіантів докладніше.

1. Доступ до елемента через його атрибут id

Синтаксис: 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 ;

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); )

Інші способи розглянемо на прикладі:

Доступ:

... // небажані та застарілі методи доступу до елементів: 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 = "(!LANG:Привіт!""; 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 attribute on the specified element. Якщо atribut already exists, value is updated; іншийwise a new attribute is added with the specified name and value.

Syntax

Parameters

Boolean attributes are considerated to be true if they"re present on the element at all, regardless of their actual value ; this works but is non-standard). Натисніть на practical demonstration.

Без особливих цінностей наведено в string, specifying null doesn"t необхідно до what you expect. Якщо ви збираєтеся запустити attribute, call removeAttribute() .

Return value

Exceptions

Example

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

HTML

JavaScript

This demonstrates two things:

• Перший дзвінок до наборуAttribute() над shows changing the name attribute"s value to "helloButton".
• Для того, щоб встановити значення Boolean attribute, так як disabled , може бути specify any value. У empty string або name of atribut є recommended values. Все, що matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true . Відсутність атрибутних заходів його значення є незначною . By setting value of 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:

Specification

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

Browser compatibility

Компактність таблиці на цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Legend

Gecko notes

Використовуючи setAttribute() для modify certain attributes, most notably value в XUL, роботи inconsistently, as the atribute specifies the default value. Для того, щоб використовувати або змінити поточні значення, ви повинні використовувати властивості. Для прикладу, використовуйте Element.value instead of Element.setAttribute() .

У цій статті познайомимося з DOM-властивостями та атрибутами, розглянемо, чим вони відрізняються і як правильно з ними працювати. Розберемо які у JavaScript є методи для виконання операцій над атрибутами.

Чим відрізняється атрибут від DOM-властивості?

Атрибути - це 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.png" console.log(brandImg.alt); // "логотип сайту"

Деякі назви DOM-властивостей не відповідають іменам атрибутів. Одним із таких є атрибут class. Цей атрибут відповідає DOM-властивість className . Ця відмінність пов'язана з тим, що class є ключовим словом JavaScript, воно зарезервоване і не може використовуватися. Через це розробники стандарту вирішили використовувати для відповідності якусь іншу назву, якою було вибрано className .

Ще один аспект пов'язаний з тим, що переклад HTML-атрибутів, заданих у вихідному коді документа, в DOM-властивості не завжди здійснюється один до одного.

Якщо елемент має нестандартний HTML-атрибут, то властивість, що відповідає йому DOM, не створюється .

Інша відмінність пов'язана з тим, що значення певних 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 і ніяк по-іншому.

Робота з DOM-властивістю елемента

Робота з властивостями елементів JavaScript як вже було зазначено вище здійснюється як з властивостями об'єктів.

Але для того, щоб звернутися до якості певного елемента, його потрібно спочатку отримати. Отримати DOM-елемент у JavaScript можна, наприклад, за допомогою універсального методу querySelector, а колекцію DOM елементів, наприклад, за допомогою querySelectorAll.

Як перший приклад розглянемо наступний HTML-елемент:

На основі нього розберемо як здійснюється отримання 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 = "(!LANG:Новий текст підказки"; // присвоим 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 = "(!LANG:John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

З цього прикладу видно, що не завжди зміна DOM-властивості призводить до зміни атрибуту. Тобто. у цьому випадку зміна DOM-властивості value не змінює відповідний атрибут..

Те саме відбудеться, коли користувач вводитиме текст у це поле. У DOM-властивості value буде перебувати дійсне значення, а відповідному йому атрибуті початкове або те, яке ми встановили, наприклад, за допомогою методу setAttribute .

Цей приклад показує, що коректніше працювати завжди з DOM-властивостями, а звертатися до атрибуту потрібно лише тоді, коли це дійсно необхідно.

Навіть у випадку, коли потрібно отримати початкове значення value , яке ми встановили в HTML, можна скористатися властивістю. Властивість, що містить початкове значення атрибута value називається defaultValue .

Name.defaultValue; // Tom

Ще один дуже цікавий приклад, але тепер із атрибутом href.

Приклад з атрибутом href

Приклад, в якому нам потрібно отримати значення посилання, так як воно було встановлено в HTML.

У цьому прикладі атрибут href та DOM-властивість href містять різні значення. В атрибуті href - те, що ми встановили в коді, а DOM-властивості - повний URL. Ця різниця продиктована стандартом, відповідно до якого браузер повинен привести значення href до повного URL-адреси.

Тому якщо нам потрібно отримати те, що знаходиться в атрибуті, то без методу getAttribute у цьому випадку не обійтись.

На завершення розберемо ще атрибут selected.

Приклад із атрибутом selected

Приклад, в якому показано, як можна отримати значення вибраної опції select:

немає оцінки 1 2 3 4 5

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

немає оцінки 1 2 3 4 5

Ще один спосіб роботи з атрибутами (властивість attributes)

У 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.

Ви можете створити прив'язку, що настроюється прив'язки,яке перевірятиме значення певного спостережуваного логічного значенняперед додаванням чи не атрибутами. цей приклад:

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: один з атрибутом, без нього та умова нокауту, щоб додати одне з них відповідно до елемента. Я також знаю про це звичайне очікування, але яке з рішень є більш ефективним?

Цей урок присвячений читанню та зміні атрибутів елементів у 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() для додавання або зміни атрибутів:

1. Можна додавати/змінювати атрибути будь-якого елемента (або набору елементів).
2. Можна додавати/змінювати кілька атрибутів одразу для елемента (або елементів) за допомогою завдання карти імен атрибутів та значень.
3. можна динамічно додавати/змінювати одиничний атрибут для декількох елементів за допомогою функції повернення.

Встановлюємо один атрибут

Щоб встановити або змінити атрибут елемента, потрібно викликати метод 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:

Після виконання коду перше зображення матиме атрибут alt зі значенням "Малюнок 1: myphoto.jpg" , а друге зображення матиме атрибут alt зі значенням "Малюнок 2: yourphoto.jpg" .

Видалення атрибуту

Щоб видалити атрибут з елемента, потрібно викликати метод removeAttr() , передавши йому ім'я атрибута для видалення. Наприклад:

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

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

// Видаляємо атрибут "title" із усіх посилань $("a").removeAttr("title");

Резюме

У цьому уроці були розглянуті питання роботи з атрибутами елементів jQuery:

• Читання значень атрибутів
• Встановлення одного атрибуту
• Встановлення кількох різних атрибутів одночасно
• Використання зворотної функції для динамічної установкизначень атрибутів у наборі елементів
• Видалення атрибутів із елемента