Что такое jQuery и как его использовать

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

Как подключить jQuery?

Нельзя просто начать использовать функции из библиотеки jQuery. Её надо сначала подключить. Для этого можно в <head> секцию сайта поставить подключение скрипта по ссылке. К примеру, можно взять библиотеку jQuery с серверов гугла. Вот так:

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   </head>
   <body>
      Содержание страницы
   </body>
</html>

После подключения jQuery (на строчках ниже подключения) можно использовать методы jQuery.

В примере была использована библиотека jQuery, которая находится на серверах Google. Ссылаться именно на эти серверы - это довольно распространённая практика. Но настоятельно рекомендуем скопировать библиотеку jQuery себе на сайт и загружать непосредственно со своего сайта. Потому что в некоторых странах серверы Google заблокированы, к примеру, в Китае. Это означает, что для пользователей из Китая библиотека jQuery не загрузится, и скрипты на вашем сайте для них не будут работать.

Код на jQuery компактнее, чем на JavaScript

Сравните код на JavaScript и jQuery. Вот код на чистом JavaScript:

document.getElementById('id').innerHTML = 'Тише мыши, кот на крыше';

В этом коде происходит обращение к тегу с определённым "id": внутреннее содержание этого тега меняется на строку "Тише мыши, кот на крыше". Перепишем эту строчку, используя функции из jQuery:

$('#id').html('Тише мыши, кот на крыше');

Очевидно, код стал компактнее. Приведём ещё один пример, в котором разница в удобстве будет более очевидной. Допустим, нам надо изменить CSS свойство в нескольких тегах с одним и тем же классом. К примеру, сделать текст синим. На чистом JavaScript нам надо будет получить массив ссылок на найденные элементы с помощью метода getElementsByClassName, затем пройтись по массиву и установить CSS свойство для каждого из найденных тегов. Выглядеть это будет так:

var a = document.getElementsByClassName('class');
for (var i = 0; i < a.length; i++) {
   a[i].style.color = 'blue';
}

Перепишем этот пример, используя функцию из jQuery:

$('.class').css('color', 'blue');

Получилось, что четыре строчки кода были заменены одной, в которой находится довольно наглядная функция изменения CSS свойства.

Селекторы jQuery

Знак доллара $ в начале строки в приведённых выше примерах - это универсальная функция jQuery. Чаще всего её используют для выбора HTML элементов, поэтому после этого знака стоят круглые скобки, в которых находится указание на селектор.

Селекторы в jQuery точно такие же, как и в CSS. Поэтому рекомендуем посмотреть цикл наших статей по CSS.

Попробуем выбрать все элементы с классом "mouse" используя jQuery:

var a = $('.mouse');

Теперь выберем все с id="mouse":

var a = $('#mouse');

А теперь выберем все с классом "mouse", но являющиеся div контейнерами:

var a = $('div.mouse');

Всё обращение к элементам происходит точно так же, как и в селекторах CSS.

Цепочки методов jQuery

Большое количество методов jQuery возвращают набор элементов. Поэтому можно составлять цепочки из этих методов. Попробуем модифицировать примеры из первого параграфа этой статьи. То есть совместим изменение цвета с изменением HTML содержания тега. Получится такой код:

$('.mouse').html('Тише мыши, кот на крыше').css('color', 'blue');

В этом примере мы выбрали все HTML теги на странице, у которых есть класс "mouse" и вставили в их содержание строчку 'Тише мыши, кот на крыше'. Затем окрасили текст в каждом из этих тегов в синий цвет.