Приклади маніпулювання DOM за допомогою jQuery

У попередніх статтях категорії Уроки JavaScript ми розглянули основні принципи DOM, дізналися, як можна взаємодіяти і маніпулювати елементами DOM за допомогою простого JavaScript. У цій статті ми трохи розширимо цю тему і розглянемо приклади маніпулювання елементами DOM за допомогою потужної бібліотеки JavaScript – jQuery.

Бібліотека jQuery має потужні інструменти для знаходження елементів і роботи з ними для досягнення потрібної мети. За допомогою методів jQuery завдання обходу і маніпуляції елементами DOM вирішуються досить простими та інтуїтивно зрозумілими способами.

jQuery може отримувати доступ до елементів DOM HTML-сторінки, а також вміє легко ними маніпулювати, використовуючи набір простих методів. Деякі методи просто змінюють значення атрибутів, інші модифікують цілі елементи (або групи елементів) за допомогою копіювання, видалення або переміщення. Методи jQuery, які змінюють значення властивостей, називають “сеттерами” (setters), тобто, вони встановлюють якісь значення. Деякі з jQuery методів, наприклад .attr(), .html() і .val(), в свою чергу є й “геттерами” (getters), тобто, вони можуть отримувати інформацію від DOM-елементів та в подальшому модифікувати її.

 

У сьогоднішній статті ми розглянемо деякі методи обходу і маніпуляції елементами DOM за допомогою методів бібліотеки jQuery. Сьогодні будуть розглянуті наступні методи:

text()
html()
val()
attr()
prepend()
append()
before()
after()
wrap()
remove()
empty()
clone()

 

 

 

text()

Метод text() може читати (отримувати) або писати (замінювати) текст всередині даного елемента HTML. Нижче приклад коду для цієї функції:

var text = $('#element').text();
$('#element').text('Новий текст для вибраного елемента.');

 

Метод text() без параметрів поверне текст вибраного HTML-елемента. Це показано в першому рядку в наведеному вище прикладі.

Метод text('Новий текст для вибраного елемента.'), в якому приймається строковий параметр, замінить існуючий текст елемента HTML новим заданим текстом. Якщо ви спробуєте вставити HTML код за допомогою елемента text(), HTML код буде екранований, і він буде показуватись як текст. Він не буде відформатований як HTML код.

 

 

html()

Метод html() працює так само, як і метод text(), за винятком того, що метод повертає HTML-код заданого елемента, а не тільки текст. Нижче приклад коду для цієї функції:

var html = $('#element').html();
$('#element').html('Новий текст для вибраного елемента.');

 

Метод html() без параметрів просто повертає HTML-код вибраного елемента.

Метод html('Новий текст для вибраного елемента.'), в якому приймається строковий параметр, замінює HTML-код вибраного елемента. HTML код буде відформатований у вигляді HTML-коду, а не екранованого тексту.

 

 

val()

Метод val() використовується для отримання і встановлення значення полів форми (наприклад, input). Нижче приклад коду для цієї функції:

var theValue = $('#formField').val();
$('#formField').val('Нове значення для обраного елемента.');

 

Метод val(), який не приймає параметри, повертає значення обраного поля форми.

Метод val('Нове значення для обраного елемента.'), в якому приймається строковий параметр, встановить нове значення поля.

 

 

attr()

Функція attr() може читати і модифікувати атрибути HTML-елементів. Ось простий приклад:

// у нас є картинка
<img id="photo" src="some-image.jpg" alt="some alt text" />
// замінюємо атрибут alt
$('#photo').attr('alt', 'нове значення атрибуту');

 

 

prepend()

Метод prepend() вставляє новий HTML код в початок обраного HTML-елемента. Новий HTML об’єднується з тим HTML, який вже був у елемента. Нижче приклад коду для цієї функції:

$('#element').prepend('<p>Новий доданий HTML код</p>');

 

 

append()

Метод append() вставляє новий HTML-код в кінець вибраного HTML-елемента. Новий HTML об’єднується з HTML кодом, який був у елемента до цього. Нижче приклад коду для цієї функції:

$('#element').append('<p>Новий доданий HTML код</p>');

 

 

before()

Метод before() вставляє HTML перед обраним елементом (поза елементом). Нижче приклад коду для цієї функції:

$('#element').before('<div>Доданий елемент ДО</div>');

 

 

after()

Метод after() вставляє HTML після обраного елемента (поза елементом). Нижче приклад коду для цієї функції:

$('#element').after('<div>Доданий елемент ПІСЛЯ</div>');

 

 

wrap()

Метод wrap() може огорнути вибраний елемент HTML в інший елемент HTML. Ось приклад того, як використовувати wrap():

$('#element').wrap('<div class="new-wrapper"></div>');

 

У цьому прикладі обраний елемент (з ідентифікатором element) «огортається» в даний елемент div. Тобто, новий div буде батьком для обраного елемента.

 

 

remove()

Метод remove() видаляє вибраний елемент HTML з дерева DOM. Нижче приклад коду для цієї функції:

$('#element').remove();

 

Використовуйте метод .remove(), коли вам потрібно видалити сам елемент, а також все всередині нього. Також будуть видалені всі пов’язані з цими елементами події та дані jQuery. Якщо вам потрібно видалити елементи без видалення даних і подій, використовуйте замість цього метод .detach().

 

 

empty()

Метод empty() дуже схожий на попередній метод, але його специфіка полягає в тому, що він видаляє всі дочірні елементи обраного елемента HTML. Нижче приклад коду для цієї функції:

$('#element').empty();

 

Цей метод видаляє не тільки дочірні (та інші нащадки) елементи, а й будь-який текст в наборі відповідних елементів. Це пов’язано з тим, що відповідно до специфікації DOM будь-який рядок тексту в елементі вважається дочірнім вузлом цього елемента.

 

 

clone()

Метод clone() клонує (копіює) обраний елемент, що дозволяє продублювати потрібний елемент в іншому місці дерева DOM. Нижче приклад коду для цієї функції:

var clone = $('#element').clone();
clone.insertBefore('#anotherElement');

 

 

 

Ви також можете ознайомитись з більш детальною шпаргалкою по jQuery.

Ось і все на сьогодні! Сподіваємося, що дана невеличка шпаргалка стане в нагоді вам у процесі програмування на JavaScript.

 

Recent Posts

Що таке вита (кручена) пара та де використовується

Сьогодні, в вік високих технологій, дуже важлива швидка та ефективна передача даних. Завдяки швидкому обміну… Read More

21/01/2021

Брюс Лі

Не важливо, як повільно ти рухаєшся, головне, що ти не зупиняєшся - Брюс Лі   Read More

20/01/2021

Google Search Console – Проблема з LCP та як її вирішити

Нещодавно ми писали про нововведення в інструменті для вебмайстрів Google Search Console – Основних веб-показниках.… Read More

18/01/2021

Як змінити HTML код вбудованих елементів WP oEmbed в WordPress?

Починаючи з WordPress версії 2.9 в двигун була додана підтримка oEmbed – формат простого API,… Read More

16/01/2021

Багатофункціональний пристрій коверлок: ключові особливості

Існує багато різновидів швейного обладнання, які відкривають великі можливості для вдосконалення навичок. Один з найскладніших… Read More

15/01/2021

Як зробити відкладене завантаження для HTML, iframe і вбудованого відео

Ліниве (або відкладене) завантаження (Lazy loading) – це популярний метод асинхронного звернення до адреси ресурсу,… Read More

13/01/2021