Приклади маніпулювання 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.