Библиотека jQuery с примерами

26.09.2024 Евгений Мухутдинов 0

jQuery — это быстрая, небольшая и удобная библиотека JavaScript, которая упрощает взаимодействие с HTML-документами, обработку событий, анимацию и Ajax-запросы. Она была создана в 2006 году Джоном Резигом и с тех пор стала одной из самых популярных библиотек JavaScript.

Джон Резиг (John Resig) наиболее известен как эксперт в языке программирования JavaScript и создатель самой популярной библиотеки JavaScript в мире — jQuery. Он создал множество проектов JavaScript, которые продолжают оставаться неотъемлемой частью современной веб-разработки. Он также является автором популярных книг по JavaScript Secrets of the JavaScript Ninja и Pro JavaScript Techniques.

Источник: johnresig.com

Хотя использование jQuery стало менее распространенным с появлением современных фреймворков, но согласно статистики w3techs.com, она до сих пор является лидером по использованию на веб-сайтах.

Содержание

Популярные сайты использующие jQuery

1. Установка jQuery

Есть несколько способов подключить jQuery к проекту:

Подключение jQuery через CDN

Самый простой способ — использовать CDN (Content Delivery Network).

Подключение библиотеки jQuery через CDN (Content Delivery Network) означает использование удалённого сервера, который хранит и предоставляет доступ к файлам jQuery. Вместо того чтобы загружать библиотеку на свой собственный сервер и подключать её локально, вы используете ссылку на jQuery, размещённую на одном из серверов CDN. Это позволяет более эффективно и быстро загружать библиотеку, а также уменьшает нагрузку на ваш сервер.

Добавьте следующий код в секцию <head> вашего HTML-документа:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  </head>
  <body>
    <!-- Ваш контент -->
  </body>
</html>

Локальное подключение

Можно также скачать jQuery с официального сайта jQuery и подключить его локально. По умолчанию предлагается загрузить минифицированную версия файла jQuery jquery-3.7.1.min.js (с суффиксом .min).

Минификация — это процесс, при котором исходный код JavaScript (или другого типа файлов) оптимизируется для уменьшения его размера, что, в свою очередь, ускоряет загрузку и выполнение скрипта в браузере.

Но я предлагаю скачать несжатую версию jQuery для разработки jquery-3.7.1.js. В этом случае будет возможность «покопаться» в библиотеке, так как эта версия содержит все пробелы, комментарии и имеет читаемый код.

Официальный сайт библиотеки jQuery, раздел Download (загрузка)
Download the uncompressed development version of jQuery 3.7.1 — несжатая версию jQuery для разработки

При клике не происходит загрузка файла, а открывается его текстовое содержимое:

Как скачать и сохранить файл библиотеки jQuery
Правый клик — Сохранить страницу

После того как файл будет сохранен под именем jquery-3.7.1.js, его можно перенести в папку с проектом и подключить локально:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery</title>
    <script src="/jquery-3.7.1.js" defer></script>
  </head>
  <body>
    <!-- Ваш контент -->
  </body>
</html>

2. Основные концепции jQuery

Селекторы jQuery

Селекторы jQuery позволяют находить HTML-элементы. Основываются на селекторах CSS, что делает их интуитивно понятными и удобными для использования.

Селектор по тегу:

   $('p') // выбирает все элементы <p>

Селектор по классу:

   $('.myClass') // выбирает все элементы с классом "myClass"

Селектор по ID:

   $('#myId') // выбирает элемент с ID "myId"

Комбинированные селекторы:

   $('div.myClass') // выбирает все <div> с классом "myClass"

Селектор атрибута:

   $('[type="text"]') // выбирает все элементы с атрибутом type равным "text"

Селекторы потомков:

   $('ul li') // выбирает все <li>, которые являются потомками <ul>

Псевдоклассы:

   $('li:first') // выбирает первый <li> в списке

Работа с элементами

Чтобы выбрать все параграфы на странице и изменить их цвет, можно использовать следующий код:

$('p').css('color', 'blue'); // Изменяет цвет текста всех параграфов на синий

Вы можете добавлять, удалять и изменять элементы на странице:

// Добавление нового элемента
$('body').append('<p>Новый параграф</p>');

// Удаление элемента
$('p').last().remove(); // Удаляет последний параграф

// Изменение содержимого
$('p').first().text('Измененный текст'); // Изменяет текст первого параграфа

Обработка событий

jQuery упрощает работу с событиями. Например, чтобы добавить обработчик события клика на кнопку:

<button id="myButton">Нажми меня</button>
<script>
    $('#myButton').click(function() {
        alert('Кнопка нажата!');
    });
</script>

3. Манипуляция с DOM

Изменение содержимого элементов

Вы можете изменять содержимое элементов с помощью методов .html() и .text():

$('#myDiv').html('<strong>Это новый HTML-контент</strong>'); // Заменяет HTML-содержимое
$('#myDiv').text('Это текст без HTML'); // Заменяет текст

Изменение стилей и классов

jQuery позволяет легко изменять стили и классы:

$('#myDiv').css('background-color', 'yellow'); // Изменяет цвет фона
$('#myDiv').addClass('active'); // Добавляет класс
$('#myDiv').removeClass('active'); // Удаляет класс

Добавление и удаление элементов

Вы можете добавлять и удалять элементы из DOM:

$('<p>Новый параграф</p>').appendTo('body'); // Добавляет новый параграф в конец body
$('p').first().remove(); // Удаляет первый параграф

4. Эффекты и анимация

jQuery предлагает множество встроенных эффектов и анимацией:

Основные эффекты

$('#myDiv').hide(); // Скрывает элемент
$('#myDiv').show(); // Показывает элемент
$('#myDiv').fadeOut(); // Плавно скрывает элемент
$('#myDiv').fadeIn(); // Плавно показывает элемент

Пользовательские анимации

Вы также можете создавать пользовательские анимации:

$('#myDiv').animate({ left: '250px' }, 1000); // Анимирует перемещение элемента

5. AJAX с jQuery

Введение в AJAX

AJAX (Asynchronous JavaScript and XML) позволяет загружать данные с сервера без перезагрузки страницы.

Основные методы AJAX в jQuery

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(data) {
        console.log(data); // Обработка полученных данных
    },
    error: function(error) {
        console.error('Ошибка:', error);
    }
});

Примеры работы с AJAX

$('#loadData').click(function() {
$.get('https://api.example.com/data', function(data) {
$('#result').html(data); // Загружает данные и отображает их
});
});

6. Работа с формами

Валидация форм

Вы можете проверять данные формы перед отправкой:

$('#myForm').submit(function(event) {
    if ($('#name').val() === '') {
        alert('Имя обязательно!');
        event.preventDefault(); // Отменяет отправку формы
    }
});

Обработка событий отправки форм

$('#myForm').on('submit', function(event) {
    event.preventDefault(); // Отменяет стандартное поведение формы
    // Ваш код для обработки формы
});

7. Плагины jQuery

Что такое плагины jQuery?

Плагины позволяют расширять функциональность jQuery. Вы можете использовать готовые плагины или создавать свои.

Установка и использование плагинов

Чтобы использовать плагин, просто подключите его после подключения jQuery:

<script src="path/to/jquery.plugin.js"></script>

Примеры популярных плагинов

  • jQuery UI — библиотека для создания интерфейсов.
  • Slick — плагин для создания каруселей.
  • Lightbox — плагин для отображения изображений в модальных окнах.

8. Советы по оптимизации с jQuery

Избегание конфликтов с другими библиотеками

Если вы используете другие библиотеки, используйте режим noConflict():

$.noConflict();
jQuery(document).ready(function($) {
    // Ваш код с использованием jQuery
});

Оптимизация производительности

  • Минимизируйте количество селекторов.
  • Кэшируйте селекторы, если вы используете их несколько раз.

Лучшие практики использования jQuery

  • Используйте jQuery для упрощения кода, но не забывайте о чистом JavaScript для простых задач.
  • Изучайте и применяйте современные подходы, такие как использование ES6+ и фреймворков.

9. Практические примеры

В примерах библиотека jQuery подключена через CDN — можно быстро опробовать пример вставив код в свой редактор, например, в Visual Studio Code.

Во всех примерах используется $(document).ready() — метод jQuery, который гарантирует, что весь код внутри него будет выполнен только после полной загрузки DOM страницы. Это важно, чтобы убедиться, что все элементы страницы готовы к взаимодействию.

Пример 1. Изменение стиля при нажатии кнопки

Исходный код:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Изменение стиля с jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
      #myParagraph {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p id="myParagraph">Этот текст изменится при нажатии кнопки.</p>
    <button id="changeColorButton">Изменить цвет</button>

    <script>
      $(document).ready(function () {
        $("#changeColorButton").click(function () {
          $("#myParagraph").css("color", "red"); // Изменяет цвет текста на красный
        });
      });
    </script>
  </body>
</html>

Результат:

Изменение стиля с jQuery

Этот текст изменится при нажатии кнопки.

Пример 2: Показ/скрытие элемента

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

Исходный код:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Показ/скрытие с jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <button id="toggleButton">Показать/Скрыть текст</button>
    <div id="toggleText" style="display: none">
      Этот текст можно скрыть или показать.
    </div>

    <script>
      $(document).ready(function () {
        $("#toggleButton").click(function () {
          $("#toggleText").toggle(); // Переключает видимость элемента
        });
      });
    </script>
  </body>
</html>

Результат:

Показ/скрытие с jQuery

Пример 3. Анимация элемента

В этом примере мы создадим кнопку, которая будет перемещать синий квадрат вправо на 100px при каждом нажатии.

Исходный код:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Анимация с jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
      #myBox {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: relative; /* Для анимации */
      }
    </style>
  </head>
  <body>
    <div id="myBox"></div>
    <button id="moveButton">Переместить вправо</button>

    <script>
      $(document).ready(function () {
        $("#moveButton").click(function () {
          $("#myBox").animate({ left: "+=100px" }, 500); // Перемещает элемент вправо на 100 пикселей
        });
      });
    </script>
  </body>
</html>

Результат:

Анимация с jQuery

Пример 4. Валидация формы

В этом примере мы создадим простую форму, которая проверяет, заполнено ли поле перед отправкой.

Исходный код:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Валидация формы с jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <form id="myForm">
      <label for="name">Имя:</label>
      <input type="text" id="name" name="name" />
      <button type="submit">Отправить</button>
    </form>
    <div id="errorMessage" style="color: red"></div>

    <script>
      $(document).ready(function () {
        $("#myForm").submit(function (event) {
          event.preventDefault(); // Отменяет стандартное поведение формы
          $("#errorMessage").text(""); // Очищает сообщение об ошибке

          var name = $("#name").val();
          if (name === "") {
            $("#errorMessage").text("Пожалуйста, введите ваше имя.");
          } else {
            alert("Форма успешно отправлена!"); // Здесь можно добавить код отправки формы
          }
        });
      });
    </script>
  </body>
</html>

Результат:

Валидация формы с jQuery

Пример 5. Загрузка данных с помощью AJAX

В этом примере мы создадим кнопку, которая загружает данные с сервера (в данном случае, мы используем JSONPlaceholder, бесплатный API для тестирования) и отображает их на странице.

Исходный код:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX с jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <button id="loadDataButton">Загрузить данные</button>
    <div id="dataContainer"></div>

    <script>
      $(document).ready(function () {
        $("#loadDataButton").click(function () {
          $.get(
            "https://jsonplaceholder.typicode.com/posts/1",
            function (data) {
              $("#dataContainer").html(
                "<h2>" + data.title + "</h2><p>" + data.body + "</p>"
              );
            }
          );
        });
      });
    </script>
  </body>
</html>

Результат:

После нажатия кнопки "Загрузить данные" на странице отобразятся отформатированные данные загруженные с бесплатного API
После нажатия кнопки «Загрузить данные» на странице отобразятся отформатированные данные загруженные с бесплатного API

10. Заключение

jQuery — это мощный инструмент для работы с веб-приложениями. Он упрощает множество задач, связанных с манипуляцией DOM, обработкой событий и AJAX-запросами. Несмотря на то, что в последние годы появились альтернативные решения, такие как React и Vue.js, jQuery по-прежнему остается актуальным и полезным инструментом для разработчиков.

Ресурсы для дальнейшего изучения jQuery

Альтернативы jQuery

Советы по переходу на современные JavaScript-фреймворки

  • Изучите основы ES6+.
  • Ознакомьтесь с концепциями компонентного подхода.
  • Начните с простых проектов для практики.

ПОХОЖИЕ ЗАПИСИ:

  1. this в JavaScript
  2. Как добавить событие onClick по <canvas> и его элементам в React

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*