Page 156 - 6108
P. 156
3.7.2 Маніпуляція елементами
Бібліотека jQuery пропонує нам інструментарій для маніпуляції
властивостями і атрибутами елементів.
Метод .prop(propertyName ) дозволяє отримати значення вказаної
властивості.
$('a').each ( (index, elem) => console.log
($(elem).prop('href')));
Метод .prop( propertyName, value) дозволяє змінити значення
вказаної властивості.
.prop( propertyName, value |
properties |
propertyName, function)
де value – значення властивості
properties – об’єкт, що містить пари {property: value}, можна
встановити одночасно декілька властивостей
function – функція (index, oldPropertyValue ) =>
newPropertyValue, що повертає значення для встановлення. Отримує
позицію індексу елемента у наборі та старе значення значення як аргументи.
$(":checkbox").prop("checked", (index, val ) => !val);
Метод .removeProp(propertyName) видаляє вказану властивість.
Після цього властивості буде присвоєно нове значення: undefined, яке буде
вказувати, властивість не визначено.
Для роботи з атрибутами використовується аналогічні методи:
.attr(attributeName) – для отримання значення атрибуту
.attr(attributeName, value | attributes | attributeName,
function) – для встановлення значення атрибуту чи атрибутів
.removeAttr(attributeName) – для видалення атрибуту. У випадку з
видаленням властивості через метод removeProp() відповідний властивості
атрибут залишається, тільки йому присвоюється значення властивості, тобто
undefined, то при видаленні атрибута він видаляється з розмітки елемента.
Метод css () використовується для роботи зі стилями.
.css( propertyName | propertyNames) – дозволяє отримати
значення вказаної css-властивості або масиву властивостей
$('li').ev(0).css(["font-size", "color", "background-color"
]);
.css(propertyName, value | properties | propertyName,
function) – дозволяє встановити значення однієї або декількох css-
властивостей
$( 'li' ).css( "color", "red" );
$( 'li' ).css( {'color': 'yellow', 'font-weight': 'bolder'});
Для роботи з класами можна використовувати наступні методи
Метод .addClass( className | function) дозволяє додати до
елемента клас, де
className – один або декілька назв класів (розділених пробілами);