12. Задания на JQuery

Задание #1

Цель

Научиться изменять стили элементов на странице с использованием jQuery, применяя методы работы с CSS. Задание направлено на закрепление работы с классами, атрибутами и стилизацией элементов.

Описание задания

Создайте веб-страницу с набором HTML-элементов (заголовки, параграфы, кнопки и блоки). Реализуйте с помощью jQuery следующие действия:

  1. Изменение стилей по клику на кнопку:
    При нажатии на кнопку определённые элементы должны изменять свои стили. Например:
    • Изменение фона, текста и границ у блока.
    • Увеличение размера шрифта заголовков.
    • Применение рамки и цвета текста для параграфов.
  2. Добавление и удаление классов:
    • При наведении мыши на блок добавляйте класс, который изменяет его стили (например, цвет границы, фон, шрифт).
    • При уходе мыши с блока удаляйте этот класс.
  3. Динамическое изменение атрибутов CSS:
    • При клике на определённый текст меняйте его цвет через метод jQuery css().
    • Изменяйте ширину и высоту элементов в зависимости от их текущих размеров (например, увеличьте ширину на 20%).
  4. Проверка наличия классов:
    • Если элемент уже имеет класс, выводите пользователю сообщение в консоль (например, через console.log()), и отменяйте повторное добавление.
  5. Стилизация списка:
    • Сделайте так, чтобы элементы списка изменяли цвет текста, когда на них нажимают.
    • Чётные элементы должны получать один цвет, а нечётные — другой.

Условия выполнения

  • Запрещено использовать встроенные стили style="" в HTML (всё изменение стилей должно производиться только через jQuery).
  • Используйте методы jQuery для работы с классами (addClass, removeClass, toggleClass) и стилями (css).
  • Реализуйте обработчики событий с помощью on() или других методов событий.
  • Страница должна оставаться интерактивной: пользователь должен видеть изменения сразу.

Критерии оценки

  • Все пункты задания выполнены.
  • Стили изменяются корректно и соответствуют описанию.
  • Код структурирован и читаем.
  • Реализованы проверка классов и логика их добавления/удаления.

Примечание: Разрешается использовать любые CSS-классы, но их имена и свойства должны быть логически обоснованными (например, .highlight, .active).

Задание №2

Цель

Научиться использовать условия (if/else, switch) в jQuery для управления поведением элементов на странице, обработки событий и изменения содержимого или стилей.

Описание задания

Создайте HTML-страницу с набором элементов (кнопки, текстовые поля, заголовки, блоки, список и т.д.). Реализуйте с помощью jQuery следующие функции с использованием условий:

Часть 1: Изменение содержимого и стилей с проверкой условий

  1. Проверка содержимого текстового поля:

    • Реализуйте проверку введённого текста в поле:
      • Если текст содержит определённое слово (например, "hello"), изменяйте цвет фона страницы.
      • Если текст пустой, выводите сообщение для пользователя (например, в отдельном блоке или алерте).
      • Если введённый текст содержит цифры, изменяйте цвет текста в поле ввода.

  2. Управление видимостью блоков:

    • Если пользователь нажимает на одну кнопку, определённый блок должен отображаться, а другой скрываться.
    • Если нажимает другую кнопку, поведение должно быть противоположным.

  3. Проверка класса элемента:

    • При клике на элемент (например, div):
      • Если элемент уже имеет определённый класс, измените его текст и цвет.
      • Если класса нет, добавьте его и измените содержимое элемента.

Часть 2: Работа с атрибутами и стилями

  1. Проверка значения атрибута:

    • Если у изображения атрибут alt содержит текст "example", замените изображение на другое.
    • Если атрибут отсутствует, добавьте его с любым текстом.

  2. Динамическое управление размерами:

    • При клике на кнопку изменяйте ширину и высоту блока.
      • Если ширина блока больше определённого значения (например, 200px), уменьшайте её.
      • Если ширина меньше, увеличивайте.

Часть 3: Управление списками

  1. Обработка элементов списка:
    • Если элемент списка чётный, измените его цвет фона.
    • Если нечётный, добавьте ему дополнительный текст (например, "Нечётный").
    • Если в списке более 5 элементов, скрывайте все, кроме первых трёх.

Условия выполнения

  • Используйте jQuery для обработки событий (например, click, keyup, hover).
  • Обязательно используйте условия if/else, тернарный оператор или switch там, где это необходимо.
  • Все изменения на странице должны происходить динамически и быть видимыми сразу.
  • Код должен быть структурированным, с комментариями для объяснения логики.

Критерии оценки

  • Условия прописаны корректно и работают для всех заданных сценариев.
  • Элементы на странице изменяются в соответствии с условиями.
  • Весь функционал описан, протестирован и работает без ошибок.
  • Код читаем и легко поддерживается.