📘 Урок 4: Базовые методы jQuery — `hide()`, `show()`, `toggle()`, `css()`, `html()`, `text()` и другие

Цель урока: освоить основные методы jQuery для управления элементами на странице — их отображением, стилями, содержимым и свойствами.

---

🔹 Введение

В jQuery после выбора элементов с помощью селекторов ты получаешь объект, на который можно вешать методы. Эти методы позволяют:

• Скрывать/показывать элементы,

• Изменять внешний вид (стили),

• Работать с текстом и HTML,

• Управлять значениями полей форм.

---

🔸 hide() и show()

Методы для скрытия и отображения элементов:

$('#element').hide(); // Скрыть
$('#element').show(); // Показать

💡 Это не удаляет элемент из DOM, а лишь задаёт ему display: none.

---

📌 Пример:

<button id="hideBtn">Скрыть</button>
<button id="showBtn">Показать</button>
<p id="text">Этот текст можно спрятать и показать.</p>

<script>
  $('#hideBtn').click(function() {
    $('#text').hide();
  });

  $('#showBtn').click(function() {
    $('#text').show();
  });
</script>

---

🔸 toggle()

Комбинирует hide() и show():

$('#element').toggle(); // Переключает видимость

📌 Пример:

$('#toggleBtn').click(function() {
  $('#text').toggle();
});

---

🔸 fadeIn(), fadeOut(), slideUp(), slideDown()

Эффекты плавного появления и скрытия:

$('#box').fadeOut(500);   // Исчезновение
$('#box').fadeIn(500);    // Появление
$('#box').slideUp(300);   // Свернуть вверх
$('#box').slideDown(300); // Развернуть вниз

---

🔸 css()

Позволяет читать или задавать CSS-свойства:

📖 Чтение одного свойства:

let color = $('#title').css('color');

🛠 Задание одного свойства:

$('#title').css('color', 'red');

🛠 Задание нескольких свойств:

$('#title').css({
  'font-size': '20px',
  'background-color': '#eee'
});

---

🔸 html() и text()

html() — управляет HTML-содержимым:

let html = $('#content').html(); // Получить
$('#content').html('<strong>Новый HTML</strong>'); // Задать

text() — работает только с текстом (без тегов):

let text = $('#content').text(); // Получить текст
$('#content').text('Простой текст'); // Установить

---

🔸 val()

Работает с полями ввода:

let value = $('#input').val(); // Получить значение
$('#input').val('Новое значение'); // Установить

📌 Пример:

<input type="text" id="name">
<button id="setName">Установить имя</button>

<script>
  $('#setName').click(function() {
    $('#name').val('Иван');
  });
</script>

---

🔸 attr() и prop()

attr() — работа с атрибутами (например, href, src, title):

let href = $('a').attr('href');
$('a').attr('href', 'https://example.com');

prop() — свойства DOM (например, checked, disabled):

$('#check').prop('checked', true);

💡 prop() чаще используется для флагов (булевых значений), а attr() — для строковых атрибутов.

---

🔸 addClass(), removeClass(), toggleClass()

Работа с CSS-классами:

$('#box').addClass('highlight');
$('#box').removeClass('hidden');
$('#box').toggleClass('active');

📌 Пример:

<style>
  .red { color: red; }
</style>

<p id="paragraph">Текст</p>
<button id="toggleClass">Переключить цвет</button>

<script>
  $('#toggleClass').click(function() {
    $('#paragraph').toggleClass('red');
  });
</script>

---

🔸 append(), prepend(), after(), before()

Методы для вставки HTML:

• append() — в конец элемента

• prepend() — в начало

• after() — после элемента

• before() — перед элементом

📌 Пример:

$('#list').append('<li>Новый пункт</li>');
$('#list').before('<h2>Список</h2>');

---

🔸 Удаление элементов

• remove() — удаляет элемент из DOM полностью

• empty() — очищает содержимое, но оставляет сам элемент

📌 Пример:

$('#block').remove(); // удалит весь div
$('#block').empty(); // оставит <div>, но удалит его содержимое

---

📋 Практические упражнения

1. Сделай кнопку, которая меняет фон у body.

2. По нажатию на элемент списка выделяй его классом active.

3. Вставляй новые элементы в список по нажатию на кнопку.

4. Прячь/показывай картинку с анимацией.

---

❗ Частые ошибки

❌ Ошибка: метод вызывается до загрузки DOM

✅ Решение: всегда оборачивай код в $(document).ready():

$(function() {
  // твой код
});

---

❌ Ошибка: text() вместо html() (или наоборот)

✅ Используй text() для обычного текста, html() — если хочешь вставить теги:

$('#box').text('<b>жирный</b>'); // покажет как есть
$('#box').html('<b>жирный</b>'); // покажет жирным

---

📌 Заключение

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

• hide(), show(), toggle() — управление видимостью

• css() — стили

• html(), text(), val() — работа с содержимым и формами

• attr(), prop() — работа с атрибутами и свойствами

• append(), remove() и др. — изменение DOM

С этими инструментами ты уже можешь создавать динамичные веб-интерфейсы.