0Pricing
jQuery Academy · Урок

Динамическая генерация содержимого с помощью данных

Объединяйте атрибуты данных с jQuery для создания интерактивных компонентов, обновления интерфейса на основе сохранённых данных и построения гибкого отображения содержимого.

«Динамическая генерация содержимого с помощью данных» — бесплатный урок jQuery Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Динамическое содержимое с данными

Добро пожаловать на урок 2! На предыдущем уроке мы научились сохранять и получать данные с помощью атрибутов данных HTML5.

Теперь мы пойдём дальше. Мы рассмотрим, как объединить эти атрибуты с jQuery, чтобы динамически создавать и обновлять содержимое веб-страниц. Благодаря этому пользовательские интерфейсы становятся интерактивными и гибкими!

Зачем нужно динамическое содержимое?

Представьте, что у Вас есть список товаров, профили пользователей или новостные статьи. Вместо того чтобы жёстко задавать всё содержимое, Вы можете определить основные данные с помощью атрибутов data-*.

  • Обновлять существующие элементы новой информацией.
  • Создавать совершенно новые элементы на основе данных.
  • Управлять поведением интерфейса (например, показывать или скрывать элементы) с помощью данных.

Такой подход отделяет данные содержимого от его представления.

Обновление существующих элементов

Начнём с обновления содержимого. У нас может быть элемент с атрибутами data-*, а с помощью jQuery мы можем прочитать эти данные и заполнить другие части страницы.

Это особенно удобно для отображения сведений о выбранном элементе или обновления сообщений о состоянии.

Код: обновление сведений об элементе

Нажмите кнопку и посмотрите, как атрибуты данных одного элемента могут обновить текст другого.

<!DOCTYPE html>
<html>
<head>
  <title>Update Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id="productCard" data-product-name="CoddyKit Pro" data-product-price="29.99">
  <p>Product: <span id="displayedName">[Name Here]</span></p>
  <p>Price: <span id="displayedPrice">[Price Here]</span></p>
  <button id="showDetailsBtn">Show Details</button>
</div>

<script>
$(document).ready(function() {
  $('#showDetailsBtn').on('click', function() {
    var name = $('#productCard').data('productName');
    var price = $('#productCard').data('productPrice');
    
    $('#displayedName').text(name);
    $('#displayedPrice').text('$' + price);
  });
});
</script>

</body>
</html>

Объяснение: обновление содержимого

В примере элемент #productCard div содержит data-product-name и data-product-price.

  • При нажатии кнопки .data('productName') и .data('productPrice') получают эти значения.
  • Затем .text() используется для вставки этих значений в элементы #displayedName и #displayedPrice.

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

Создание новых элементов

Помимо обновления, мы также можем использовать атрибуты данных, чтобы создавать совершенно новые HTML-элементы. Это особенно полезно для списков, галерей и динамических форм.

В атрибутах данных можно хранить данные, похожие на шаблон, или настройки новых элементов, а затем использовать jQuery для их создания и вставки в DOM.

Код: добавление элемента в список

Нажмите кнопку ниже, чтобы динамически добавить новый элемент списка, содержимое которого определяется атрибутами данных кнопки.

<!DOCTYPE html>
<html>
<head>
  <title>Create New Element</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<ul id="myList">
  <li>Existing Item 1</li>
</ul>

<button id="addBtn" data-new-item-text="Dynamic Item" data-new-item-value="101">
  Add Dynamic Item
</button>

<script>
$(document).ready(function() {
  $('#addBtn').on('click', function() {
    var itemText = $(this).data('newItemText');
    var itemValue = $(this).data('newItemValue');
    
    var newItem = $('<li>').text(itemText + ' (ID: ' + itemValue + ')');
    $('#myList').append(newItem);
  });
});
</script>

</body>
</html>

Объяснение: создание элементов

Здесь кнопка #addBtn имеет атрибуты data-new-item-text и data-new-item-value.

  • При нажатии мы получаем эти значения.
  • $('
  • ') создаёт новый элемент списка.
  • .text() заполняет его объединёнными данными.
  • Наконец, $('#myList').append(newItem) добавляет этот новый элемент
  • в наш неупорядоченный список.

Это фундаментальный приём для создания динамических списков и сеток!

Интерактивные компоненты с данными

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

Это отделяет логику JavaScript от жёстко заданных идентификаторов и классов, делая код более модульным и пригодным для повторного использования.

Вопрос: динамическое содержимое

Рассмотрите следующий код HTML и jQuery:

<div id="infoBox" data-status="active"></div>

$('#infoBox').data('status', 'inactive');

Каким будет новое значение атрибута data-status при получении с помощью $('#infoBox').data('status') после выполнения этого кода?

Итоги: динамическое содержимое с данными

Отличная работа! На этом уроке Вы научились использовать атрибуты данных для создания по-настоящему динамического веб-содержимого:

  • Вы можете обновлять существующие элементы, считывая атрибуты данных и вставляя их значения.
  • Вы можете динамически создавать новые HTML-элементы и заполнять их данными из других элементов.
  • Такой подход делает интерфейс более гибким и интерактивным, отделяя данные от представления.

Теперь Вы готовы создавать более адаптивные и привлекательные пользовательские интерфейсы!

Часто задаваемые вопросы

Урок «Динамическая генерация содержимого с помощью данных» бесплатный?

Да — полный текст урока «Динамическая генерация содержимого с помощью данных» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Динамическая генерация содержимого с помощью данных»?

Объединяйте атрибуты данных с jQuery для создания интерактивных компонентов, обновления интерфейса на основе сохранённых данных и построения гибкого отображения содержимого. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Динамическая генерация содержимого с помощью данных»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Использование атрибутов данных HTML5
  2. Динамическая генерация содержимого с помощью данных
  3. Основы интеграции шаблонов на стороне клиента
← Назад к jQuery Academy