Манипуляции с DOM в jQuery — 1
Манипуляции с DOM в jQuery
«Манипуляции с DOM в jQuery — 1» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 1 уроков всего.
Введение в методы
Здравствуйте!
До сих пор мы изучили, для чего используется jQuery и как применять селектор.
Теперь рассмотрим методы, позволяющие изменять DOM.
Метод text
Метод text()
Мы используем метод text(), чтобы получить содержимое элемента HTML.
Используйте $ (selector).text(), чтобы прочитать содержимое элемента.
Кроме того, метод text используется для обновления содержимого элемента. Достаточно передать новое содержимое методу text в качестве аргумента.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
Вопрос
Метод html
Метод html()
Следующий метод — html().
Как можно понять из его названия, он возвращает весь элемент, а не только содержимое выбранного элемента.
Определим ниже пример элемента HTML.
Определены два элемента HTML с идентификаторами base и target. Затем, как только DOM загружен,
всё содержимое HTML элемента base скопировано и добавлено в элемент с идентификатором target.
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>Выбор по атрибуту
Метод attr()
Мы используем атрибуты, чтобы задавать дополнительные свойства элементов HTML.
Часто при написании кода JavaScript нам требуется получить значения этих атрибутов.
В таких случаях используется метод attr.
Изучим этот метод на примере ниже.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>Атрибут
Процесс установки новых атрибутов похож на методы text() и html(), которые мы изучили ранее.
Передав аргумент методу attr(), который мы используем для чтения, мы можем определить новый атрибут для целевого элемента.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
Метод removeAttr()
Мы научились добавлять атрибуты;
теперь рассмотрим, как удалить существующий атрибут.
Для этого мы воспользуемся методом removeAttr().
Рассмотрим наш пример.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));Метод val
Метод val()
Формы незаменимы в современных веб-приложениях. Мы будем использовать метод val(), чтобы считывать данные, введённые пользователями в элементы формы.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>Предупреждение
На уроке по обработке событий мы узнаем, как отслеживать каждое введённое значение и отображать его в элементе span.
Дополнительная информация
Чтобы обновить значение поля ввода, как Вы, вероятно, догадались, мы передаём аргументы методу val.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')Поздравляем
Поздравляем 🎉
Мы начали изучать манипуляции с DOM
В следующем разделе мы продолжим изучать манипуляции с DOM в jQuery.

Изучай JavaScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 22
- Уроки
- 48
Часто задаваемые вопросы
Урок «Манипуляции с DOM в jQuery — 1» бесплатный?
Да — полный текст урока «Манипуляции с DOM в jQuery — 1» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 1 уроков всего.
Чему я научусь в уроке «Манипуляции с DOM в jQuery — 1»?
Манипуляции с DOM в jQuery Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать jQuery Academy?
Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Манипуляции с DOM в jQuery — 1»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке jQuery Academy?
Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.