Урок 3: Работа с содержимым и атрибутами элементов в jQuery

В прошлых уроках мы разобрались с основами и научились находить элементы на странице. Но что дальше? Найденные элементы нужно как-то изменять, наполнять содержимым, менять их свойства и внешний вид. Именно этому и будет посвящен наш сегодняшний третий урок.

Мы с вами научимся читать и изменять текст и HTML-структуру элементов, работать с атрибутами (такими как src, href, alt) и свойствами (например, checked или disabled), а также ловко управлять CSS-классами. Это один из тех уроков, после которого вы почувствуете настоящую власть над DOM! В качестве практики в конце мы создадим модный и функциональный переключатель темы для сайта. Итак, начнем!

Чтение и изменение содержимого: .html(), .text() и .val()

Одни из самых часто используемых методов в jQuery это те, что позволяют манипулировать содержимым элементов. Давайте разберем их по порядку, ведь каждый служит своей цели.

Метод .html() это ваш инструмент для работы с HTML-содержимым внутри элемента. Когда вы вызываете его без параметров, он возвращает весь HTML-код, включая теги, находящийся внутри выбранного элемента. Это похоже на свойство innerHTML в чистом JavaScript. Представьте, что у вас есть такой блок:

<div id="myDiv">
    <p>Это <strong>жирный</strong> текст.</p>
</div>

Если мы выполним $('#myDiv').html(), то получим строку: "<p>Это <strong>жирный</strong> текст.</p>". Это полезно, когда вам нужно проанализировать или скопировать структуру.

Но настоящая сила .html() раскрывается, когда вы передаете ему параметр. В этом случае он заменяет всё содержимое элемента на новый HTML-код. Например, $('#myDiv').html('<span>Новое содержимое!</span>') полностью очистит наш div и поместит внутрь новый span. Важно помнить: если вы передаете HTML-строку, браузер ее корректно обработает и отрендерит. Это делает .html() идеальным для динамического добавления сложных структур, например, новых карточек товаров или сообщений в чате.

Теперь перейдем к методу .text(). Если .html() работает с разметкой, то .text() оперирует только текстом. При вызове без параметров он соберет весь текстовый контент из всех вложенных элементов, игнорируя все HTML-теги. Для нашего примера с #myDiv вызов $('#myDiv').text() вернет строку: "Это жирный текст.". Обратите внимание, что теги <p> и <strong> были проигнорированы.

Если же передать строку параметром в .text(), например $('#myDiv').text('<span>Новый текст</span>'), то произойдет интересное: браузер не будет интерпретировать <span> как тег, а вместо этого отобразит эту строку как обычный текст. В результате внутри div мы увидим буквально "<span>Новый текст</span>". Это ключевое отличие! Используйте .text() когда вам нужно безопасно вставить пользовательский ввод, чтобы избежать уязвимостей XSS (межсайтового скриптинга).

Наконец, наш третий метод .val(). Он заточен под работу с формами. Этот метод предназначен для получения или установки значения у полей ввода: input, select и textarea. Вызвав $('#myInput').val(), мы получим то, что пользователь ввел в это поле. Установить новое значение так же просто: $('#myInput').val('Привет, мир!'). Для выпадающего списка (select) .val() вернет значение выбранного варианта, а для чекбокса или радиокнопки, его значение, если он отмечен.

Практическая задача 1:
Создайте на странице кнопку и пустой div с id="output". Напишите код, который при клике на кнопку будет считывать значение из поля ввода (<input type="text">) и вставлять его внутрь div с помощью .text(), а затем с помощью .html(). Посмотрите на разницу в поведении, если в поле ввода ввести, например, <strong>Привет</strong>.

Пример кода для экспериментов:

// Чтение содержимого
var htmlContent = $('#myDiv').html();
var textContent = $('#myDiv').text();
var inputValue = $('#myInput').val();

console.log('HTML:', htmlContent);
console.log('Text:', textContent);
console.log('Input Value:', inputValue);

// Изменение содержимого
$('#myDiv').html('<em>Обновленный HTML</em>'); // Внутри будет курсивный текст
$('#myDiv').text('<em>Просто текст с тегами</em>'); // Внутри будет видна строка "<em>..."
$('#myInput').val('Новое значение поля');

Работа с атрибутами и свойствами .attr() и .prop(). В чем разница?

Этот вопрос часто вызывает путаницу у новичков, но на самом деле все довольно логично. Давайте разберемся.

Атрибуты, это то, что вы пишете непосредственно в HTML-коде. Например, в теге <img src="cat.jpg" alt="Котик" id="myImage">, src, alt и id это и есть атрибуты. Они задаются разметкой и по умолчанию неизменны.

Свойства, это характеристики DOM-объекта, который создается браузером, когда он парсит ваш HTML. Они живут в памяти и их значения могут меняться в процессе работы страницы.

Метод .attr() в jQuery работает именно с атрибутами. Чтобы получить значение атрибута, передайте его название в метод: $('#myImage').attr('src') вернет 'cat.jpg'. Чтобы установить значение атрибута, передайте два параметра: $('#myImage').attr('alt', 'Веселый котик'). Можно установить несколько атрибутов сразу, передав объект:

$('#myImage').attr({
    'alt': 'Новый альт',
    'title': 'Всплывающая подсказка'
});

Теперь о .prop(). Он работает со свойствами DOM-объекта. Разница становится критичной на нескольких примерах. Самый классический чекбокс.

Рассмотрим <input type="checkbox" checked id="myCheckbox">.

• $('#myCheckbox').attr('checked') вернет строку "checked", потому что именно такой атрибут прописан в HTML.

• $('#myCheckbox').prop('checked') вернет булево значение true или false в зависимости от того, отмечен чекбокс в данный момент или нет.

Другой пример, значение поля ввода. $('#myInput').attr('value') вернет значение атрибута value, который был указан в HTML изначально. А $('#myInput').prop('value') или просто .val() вернет текущее, актуальное значение, которое мог уже поменять пользователь.

Общее правило, которое поможет вам не запутаться:

• Используйте .attr() для работы с HTML-атрибутами, которые не меняются в процессе работы страницы (например, id, src, href, data-* атрибуты).

• Используйте .prop() для работы с булевыми свойствами (checked, disabled, selected) и для свойств, которые динамически меняются (value у input).

Практическая задача 2:
Создайте на странице чекбокс и кнопку. Напишите код, который при клике на кнопку выводит в консоль:

1. Значение, возвращаемое $(checkbox).attr('checked').

2. Значение, возвращаемое $(checkbox).prop('checked').
   Понажимайте на чекбокс, чтобы поменять его состояние и снова нажимайте на кнопку. Увидите, что attr() всегда возвращает одно и то же, а prop() меняется.

Как добавлять и удалять классы: .addClass(), .removeClass(), .toggleClass()

Управление CSS-классами это самый производительный способ изменения внешнего вида элементов на странице. Вместо того чтобы напрямую менять стили через JavaScript (что может быть медленнее), мы просто добавляем или убираем класс, а все визуальные изменения уже описаны в нашей CSS-таблице стилей.

Метод .addClass() делает ровно то, о чем говорит его название. Добавляет один или несколько классов выбранным элементам. Если нужно добавить несколько классов, перечислите их через пробел: $('#myElement').addClass('active highlighted'). Этот метод очень умен: он не добавит класс, если он уже есть у элемента, что избавляет нас от лишних операций.

Противоположный ему метод .removeClass(). Он удаляет указанные классы. $('#myElement').removeClass('hidden'). Если вызвать его без параметров, он удалит ВСЕ классы у элемента, что бывает полезно, когда нужно сделать полный «сброс».

Но король удобства в этой тройке это .toggleClass(). Его работа проста и гениальна: если у элемента есть указанный класс, он его удаляет; если нет, то добавляет. Это идеальный инструмент для реализации переключателей: открыть/закрыть меню, показать/скрыть пароль, переключить тему, как мы сделаем в практике.

Практическая задача 3:
Создайте квадратный div и кнопку. Напишите CSS-класс, который, например, меняет фон квадрата на красный и поворачивает его на 45 градусов. Напишите код на jQuery, который при клике на кнопку будет добавлять этот класс квадрату, а при повторном клике убирать (используйте .toggleClass()).

Пример кода для управления классами:

// Добавляем класс
$('p').addClass('important');

// Удаляем класс
$('#menu').removeClass('collapsed');

// Переключаем класс
$('#passwordField').toggleClass('show-password');

// Проверяем наличие класса (возвращает true/false)
if ($('#element').hasClass('active')) {
    // Делаем что-то, если элемент активен
}

Создаем простой «переключатель темы» для сайта.

Давайте соберем все полученные сегодня знания в один красивый и полезный проект, это переключатель между светлой и темной темой для сайта. Это модно, функционально и является отличным упражнением.

Шаг 1: Подготовка HTML-структуры

Создадим кнопку-переключатель. Это может быть обычная кнопка, чекбокс с красивым оформлением или даже просто ссылка.

<button id="themeToggle">Переключить на темную тему</button>

Шаг 2: Пишем CSS для двух тем

Мы будем использовать подход, при котором у тела страницы (<body>) есть класс, например, .dark-theme. Все стили для темной темы будут прописаны в правилах, которые начинаются с body.dark-theme.

/* Светлая тема (стили по умолчанию) */
body {
    background-color: #fff;
    color: #333;
    transition: background-color 0.3s, color 0.3s; /* Плавный переход */
}

/* Темная тема */
body.dark-theme {
    background-color: #1a1a1a;
    color: #f0f0f0;
}

/* Стили для кнопки в разных темах */
#themeToggle {
    padding: 10px 20px;
    border: 1px solid #ccc;
    background: #eee;
    cursor: pointer;
}

body.dark-theme #themeToggle {
    border-color: #555;
    background: #444;
    color: #fff;
}

Шаг 3: Написываем JavaScript-логику на jQuery

Нам нужно повесить обработчик события click на нашу кнопку. Внутри него мы будем:

1. Переключать класс .dark-theme у body с помощью .toggleClass().

2. Менять текст на кнопке в зависимости от активной темы. Для этого мы будем проверять, есть ли у body класс .dark-theme, с помощью .hasClass() и в зависимости от результата менять текст кнопки с помощью .text().

$(document).ready(function() {
    $('#themeToggle').on('click', function() {
        // Переключаем тему (добавляем/убираем класс у body)
        $('body').toggleClass('dark-theme');

        // Меняем текст кнопки
        if ($('body').hasClass('dark-theme')) {
            $(this).text('Переключить на светлую тему');
        } else {
            $(this).text('Переключить на темную тему');
        }
    });
});

Теперь при клике на кнопку вся страница будет плавно менять цветовую схему, а надпись на кнопке будет адаптироваться под текущее состояние. Этот пример наглядно показывает, как всего несколько строк кода на jQuery, объединяющие управление классами и содержимым, могут создать впечатляющий и полезный функционал.

Дополнительная задача для самопроверки:
Попробуйте улучшить переключатель тем. Сделайте так, чтобы выбранная тема сохранялась в localStorage браузера. При загрузке страницы скрипт должен проверять сохраненное значение и применять соответствующую тему сразу. (Подсказка: для работы с localStorage вам понадобится немного чистого JavaScript).

На сегодня все. Мы с вами прошли один из ключевых уроков, который открывает двери к созданию по-настоящему интерактивных и «живых» веб-страниц. Не забывайте пробовать разные селекторы и придумывать свои мини-проекты для закрепления материала.

В следующем уроке мы ищучим события. Клики, наведения, нажатия клавиш и многое другое.

Полный курс с уроками по jQuery для начинающих