Манипуляции с DOM с помощью jQuery — 2
Манипуляции с DOM с помощью jQuery — 2
«Манипуляции с DOM с помощью jQuery — 2» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 1 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Введение и append
Здравствуйте!
До сих пор в наших примерах мы выполняли обновление или чтение объектов HTML DOM.
Теперь мы изучим операцию вставки с помощью метода append().
Рассмотрим пример.
<button id="add">
Add New Item
</button>
<div id="target"></div>
<script>
/*
Listen for an element with
the add id click
*/
$('#add').click(function(){
/*
append '<p>This is the appended
text</p>' to #target element
*/
$("#target").append("<p>Appended text</p>");
})
</script>append
После выполнения приведённого выше кода метод append добавит HTML-код (переданный в качестве аргумента) в конец элемента #test.
prepend
Метод prepend()
Противоположностью метода append() является метод prepend() . Метод append() добавляет содержимое в конец целевого элемента, а prepend — в начало.
<div id="target"></div>
<button id="add">
Add New Item
</button>
<script>
/*
Listen for an element
with the add id click
*/
$('#add').click(function(){
/* append '<p>This is the prepended text</p>'
to #target element
*/
$("#target").prepend("<p>This is the appended text</p>");
})
</script>Вопрос
С помощью методов append и prepend мы могли добавлять новые элементы HTML в конец и начало целевого элемента.
Но как добавить элемент рядом с целевым элементом?
Пример
Продолжим предыдущий пример.
В первом случае наш узел HTML выглядит следующим образом.
<div id="test">
<p>initial paragraph</p>
</div>Методы after и before
Методы after() и before()
Мы можем добавлять элементы HTML перед целевым элементом и после него с помощью методов after() и before().
В приведённом ниже коде новый элемент добавляется к элементу с идентификатором #test непосредственно перед ним и сразу после него в иерархии соседних элементов.
<div id="test">
<p>initial paragraph</p>
</div>
<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>
Множественная вставка
До сих пор мы рассмотрели методы prepend(), append(), before() и after(). Я забыл объяснить ещё одну тему. Извините, иногда я бываю забывчивым 😇.
Итак, что делать, если мы хотим добавить одновременно больше одного узла?
Как показано в примере ниже,
мы можем добавить одновременно несколько узлов, передав более одного аргумента соответствующим методам.
<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
The following four methods work
with the same logic and take
more than one argument.
*/
$('#target').before(firstNode, secondNode, thirdNode);
$('#target').after(firstNode, secondNode, thirdNode);
$('#target').append(firstNode, secondNode, thirdNode);
$('#target').prepend(firstNode, secondNode, thirdNode);
</script>Пример цепочки вызовов
В примере выше одновременно было добавлено несколько узлов. Как видите, синтаксис остаётся одинаковым, даже если используются разные методы.
Кроме того, мы можем писать код в jQuery, объединяя вызовы.
Так мы можем писать более короткий и эффективный код.
Рассмотрим пример и научимся писать цепочки вызовов в jQuery.
<p id="test"></p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
We made our code shorter.
Also, we have done the select operation
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
.after(firstNode, secondNode, thirdNode);
</script>Метод wrap
Метод wrap()
Какой метод использовать, если нужно поместить элемент HTML в другой контейнер?
Конечно, метод wrap().
В следующем примере показано простое использование метода wrap.
<div id="target"></div>
<script>
/*
When we apply the code below.
The node we assigned as an argument
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');
//The result will be as follows
/*
<div class="container">
Container wrapper the target element
<div id="target">
</div>
</div>
*/
</script>
Question
Метод unwrap
Метод unwrap()
Этот метод является противоположностью метода wrap(). С помощью метода unwrap() мы можем удалить родительский элемент целевого элемента.
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();Метод empty
Метод empty()
Рассмотрим удаление содержимого элементов HTML.
С помощью метода empty() мы можем удалить всех потомков целевого элемента.
// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();Метод remove()
Метод remove() удаляет из DOM не только потомков элемента, но и сам элемент.
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();Поздравляем
Поздравляем! 🎉
Мы изучили манипуляции с DOM.
В следующем разделе мы изучим стилизацию с помощью jQuery.
Изучай JavaScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 22
- Уроки
- 48
Часто задаваемые вопросы
Урок «Манипуляции с DOM с помощью jQuery — 2» бесплатный?
Да — полный текст урока «Манипуляции с DOM с помощью jQuery — 2» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 1 уроков всего.
Чему я научусь в уроке «Манипуляции с DOM с помощью jQuery — 2»?
Манипуляции с DOM с помощью jQuery — 2 Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать jQuery Academy?
Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Манипуляции с DOM с помощью jQuery — 2»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке jQuery Academy?
Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.