Краткий обзор библиотеки jQuery (первое знакомство)

Библиотеки JavaScript



Вы наверняка слышали этот термин "библиотека JavaScript" , так что же это такое?

Если сказать коротко и просто - это такая большая коллекция кусков кода, которая позволяет быстро решить какие-то задачи программирования, на которые у вас бы ушло гораздо больше времени.

Другими словами, код готовых решений каких-то повторяющихся повседневных задач программирования уже написан за вас, вам остаётся лишь воспользоваться этими готовыми решениями.
Именно поэтому девиз jQuery: "Пиши меньше, делай больше!"

Официальный сайт jQuery - www.jquery.com

Кроме jQuery, есть ещё масса популярных и не очень библиотек, в качестве расширения кругозора могу перечислить несколько: React, Mootools, Prototype, Dojo.

Что нужно, чтобы начать работу с jQuery?



Библиотека jQuery - это файл JavaScript, имеющий своё имя и расширение js. Выглядит всё это таким образом, например:

jquery-3.5.0.min.js

В данном случае это файл библиотеки версии 3.5.0, а min указывает на то, что это быстрозагружаемая версия библиотеки, максимально уменьшенный по размеру по сравнению с обычной, несжатой версией файл.
При работе с своими сайтами используйте именно версию с min в имени файла.

Для того, чтобы начать использовать библиотеку jQuery в своих проектах, нужно её подключить. Сделать это можно стандартно, либо скачав файл библиотеки и подключив непосредственно его, либо с помощью подключения файла библиотеки, лежащего на сервере в интернете (это называется CDN-подключением)

Скачать последнюю версию библиотеки jQuery можно на официальном сайте. Подключается затем стандартно, как и любой другой файл JavaScript, например:

Код
<script src="js/jquery-3.5.0.min.js"></script>

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

Подключить jQuery с помощью CDN можно, например, здесь:

Google CDN, Microsoft CDN, jQuery CDN . Выбирайте любой из этих сайтов, заходите на него, копируете ссылку на файл jQuery и вставляете её в код страницы вашего сайта (в верхний раздел).

В коде страницы вашего сайта такое подключение будет выглядеть, к примеру, так:

Код
<script
  src="http://code.jquery.com/jquery-3.5.0.min.js"
  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
  crossorigin="anonymous"></script>

После того, как вы подключили jQuery на странице своего сайта, вы можете, к примеру, писать скрипт своего кода:

Код

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <script src="jquery.js"></script>
</head>
<body>

  <script>
   
  $(document).ready( function() ) {
  // здесь ваш код
  });
   
  </script>
</body>
</html>

В этом коде есть функция

Код
$(document).ready();

Это встроенная функция библиотеки jQuery, которая нужна для того, чтобы начало выполнение кода JavaScript на странице было только после того, как полностью загрузится её HTML-код.

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

Принята краткая форма записи для этой функции:

Код

  <script>
   
  $( function( ) {
  // здесь ваш код
  });
   
  </script>

Другими словами: необходимо всегда включать функцию .ready(), а ваш JavaScript-код помещать внутри неё.

Вы подключили библиотеку jQuery - что дальше?



Итак, вы подключили на странице своего сайта библиотеку jQuery. А что теперь, спросите вы? А дальше вам нужно научиться взаимодействовать с элементами на странице, чтобы сделать свой сайт интерактивным.
Манипуляции с содержимым страницы сайта, такие как, например, изменение её HTML-кода, добавление какого-то контента, применение определённых стилей к нужным элементам и так далее. Что бы вы ни делали, вам всегда нужно будет выполнить два действия:

1. Выбрать элемент на странице (то есть выбрать на странице определённый тег, например, какую-то кнопку, блок или что-то ещё)

2. Выполнить над выбранным элементом какие-то действия. Ниже примеры этих действий:

- изменение свойств элемента (например, его положение на странице при анимации)

- добавление нового содержимого (например, какой-то текст появляется если не заполнено поле формы)

- удаление элемента (например, при клике на товар он помещается в корзину, а на странице сайта карточка товара исчезает)

- извлечение информации об элементе (например, значение какого-то поля)

- добавление или удаление атрибута класса (если нужно динамическое изменение стиля элемента)

Часто бывает так, что над выбранным элементом выполняется сразу несколько действий. Например, проверить значение поля формы (ввёл ли пользователь данные), вывести сообщение об ошибке, после чего подсветить это поле формы, чтобы обратить на него внимание пользователя.

В следующей статье мы начнём учиться взаимодействовать с элементами на странице сайта.

Комментарии к материалу: