Page 157 - 6108
P. 157
function – функція, (index, currentClassName ) =>
newClassName, яка повертає одне або більше імен класів, розділених
пробілами, для додавання до існуючих назв класів. Отримує позицію індексу
елемента в наборі та існуючі назви класів (у вигляді рядка) як аргументи
$( "#foo" ).addClass(className);
Метод .toggleClass( className | className, state |
function [, state]) дозволяє переключити клас чи декілька класів в
елементі, де
state – Boolean, визначає чи слід додавати (true) чи видаляти (false) клас
$( "#foo" ).toggleClass(className);
$( "#foo" ).toggleClass(className, addOrRemove);
if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}
$( "div.foo" ).toggleClass(function() {
if ( $( this ).parent().is( ".bar" ) ) { return "happy";
} else { return "sad";
}
});
Метод .removeClass( [className | function] ) видаляє один або
декілька класів в елемента. Виклик методу без параметрів видаляє всі класи.
$("p").removeClass( "myClass yourClass" )
$("li:last").removeClass(function() { return $( this
).prev().attr( "class" ); });
Метод .hasClass( className ) дозволяє перевірити чи має елемент
певний клас. Особливо це буває необхідним, якщо класи додаються динамічно.
$( "#mydiv" ).hasClass( "foo" )
3.7.3 Робота з структурою сторінки
Для створення нових елементів розмітки html можна використовувати
функцію jQuery, передавши їй як параметр код додається розмітки.
let newList=$('<ul><li>Item1</li><li>Item2</li></ul>');
let newElem = $('tag', options);
де tag – тег створюваного елементу, наприклад '<div/>'
options – обєкт, який параметризує створюваний елемент
let newDiv = $('<div>', {'class': 'container',
html: 'This new container'});
Створений елемент існує лише в пам’яті і його слід додати на сторінку.
Для цього можуть бути використані наступні методи.
Метод .append(content [, content ] | function) додає контент в
кінець кожного елемента вибірки.