jQuery - это библиотека JavaScript, предназначенная для упрощения обхода и манипулирования деревом HTML DOM, а также обработки событий, CSS-анимации и Ajax. По состоянию на август 2022 года, jQuery используется 77% из 10 миллионов самых популярных веб-сайтов. Веб-аналитика показывает, что это наиболее широко используемая библиотека JavaScript с большим отрывом - по крайней мере, она используется в 3-4 раза чаще, чем любая другая библиотека JavaScript. Синтаксис jQuery разработан для облегчения навигации по документу, выбора элементов DOM, создания анимации, обработки событий и разработки Ajax-приложений.
Пиши меньше - делай больше! Фирменный слоган проекта jQuery. Не вникая в подробности, это как-то так и работает, за вычетом некоторых пробелов в качестве результатов.
А теперь, другими словами и ближе к делу. jQuery - это старая как динозавр, простая, немного громоздкая, местами неэффективная, но привычная в своей простоте лопата, которая помогает делать сайты интерактивными.
Много кто ругает эту лопату, много кто предпочитает использовать более изящные инструменты для создания современных сайтов. Но! Точно так же, как и каждая настоящая лопата, она хранится практически в каждом сарае у каждого садовода программиста - и применительно к веб-разработке, ей умеет пользоваться практически каждый. Даже если ты предпочтешь ненавидеть эту лопату или в целом садоводство веб-разработку, тем не менее на каком-то жизненном этапе с ней будет работать банально проще.
Для пущей убедительности, я попросил нейросеть нарисовать типичного программиста с лопатой использующего jQuery, но по странному стечению обстоятельств получился персонаж, напоминающий постаревшего Артемия Лебедева. Но видимо как-то так Kandinksky представляет веб-разработчиков.
Типичный программист который использует jQuery в процессе веб-разработки. Некоторым образом картинка напоминает постаревшего Артемия Лебедева.
Как подключить JavaScript-библиотеку jQuery к своей веб-странице 🔌
Я искренне надеюсь, что читая эти строки, ты уже постиг основы веб-разработки и понимаешь что такое веб-страница, язык HTML и язык стилизации CSS. Если же этого еще не произошло - вероятно, данная статья будет неким набором красивых букв и картинок - и практической пользы на данный момент из нее извлечь будет сложно. В этом случае, лучше будет все-таки начать с более простых основ веб-разработки - пожалуйста вернись к прошлым материалам и сначала изучи их. Ну а если ты уже их освоил - давай продолжим!
Для подключения jQuery к своей веб-странице, тебе нужно добавить специальный блок кода в секцию head. Данная секция предназначена для хранения невидимой части страницы - мета-информации, ссылок на скрипты и стили страницы.
Содержимое самой простой, базовой HTML-страницы (например файл myfirstpage.html) с подключенной библиотекой jQuery может выглядеть следующим образом:
<!DOCTYPE html>
$(document).ready(function () {
/* Некоторый код jQuery */
});
jQuery example page
Hi there the great developer!
Обрати внимание, что подключение jQuery происходит именно в этой строке:
Ну и если ты задашь логичный вопрос, что это за такая ссылка на google - то ответ достаточно банален. Просто на одном из серверов Google хранятся различные версии библиотек jQuery. И одну из них (в данном примере конкретно версию 3.5.1) ты можешь подключить к своему сайту.
Наиболее же актуальная версия библиотеки - 3.7, и скачать ее можно с официального сайта разработчика. Как поступаю я? По странной старой привычке, и исходя из гипертрофированных представлений о надежности, каждый раз я скачиваю локальную копию библиотеки и размещаю ее на разрабатываемом сайте. В этом случае, ссылка на библиотеку выглядит например так: src="assets/js/jquery/3.5.1/jquery.3.5.1.min.js"
Но вернемся к разбору приведенного примера. Что происходит далее по коду? Чуть ниже в тексте есть вот такие строчки:
$(document).ready(function () {
/* Некоторый код jQuery */
});
Что они означают? Зачем они здесь? Говоря простыми словами, внутри них происходят следующие процессы. Парные теги script (открывающий и следующий за ним закрывающий) говорят системе о том, что внутри них будет расположен некоторый JavaScript-код. Поскольку этот блок со скриптом находится в секции head, то выполнен такой программный код будет сразу после загрузки страницы в браузер пользователя (как только страница будет нарисована на мониторе).
Непосредственно же внутри кода JavaScript, можно найти вот такую конструкцию: $(document). Вот здесь уже начинается непосредственная архитектура библиотеки jQuery и ее связь с HTML-моделью страницы и моделью событий, происходящих внутри страницы. Конструкция $() выполняет основную функцию библиотеки jQuery - а именно выбирает элемент со страницы на основе CSS-селектора или объекта внутри JavaScript.
Конкретно в данном примере, происходит выбор объекта "документ целиком", и далее - подписка документа на событие ready (которое в оригинальной модели страницы называется onload). Данное событие происходит, когда страница полностью загружена и готова к использованию - и теперь можно работать с интерактивностью элементов.
Соответственно, программный код из примера дождется пока страница загрузится, и далее сделает действия, которые программист определит внутри фигурных скобок.
Базовый синтаксис и три основы jQuery 📦
Хотя jQuery и является достаточно сложной и гибкой библиотекой с кучей возможностей, обычно разработчики используют только 2 из них - а именно обработку различных событий (клики, наведение мышки и так далее) и AJAX - обращение к серверу за новой динамической информацией для страницы. В конечном итоге, современный интернет выглядит как-то так:
Краткое представление модели современного интернета. Любимая JS-библиотека jQuery и ее три основные концепции.
✅ Первая основа библиотеки jQuery - символ $ - он же ключевое слово jQuery. Это оператор, с которого начинается большинство вызовов библиотеки, включая обращение к элементам документа или различным функциям самой библиотеки. В случае вызова $("...") происходит выборка всех элементов через CSS-селектор внутри кавычек. В случае вызова $, происходит обращение к функциям библиотеки.
✅ Вторая основа jQuery - это CSS-селекторы. Это специальные выражения на языке CSS, которые позволяют обращаться к элементам на твоей HTML-странице. Не забывай, что твоя HTML-страница - это локальная копия веб-документа, который был загружен с сервера, и отрисован на твоем экране. CSS-селекторы позволяют сообщить библиотеке, какие конкретно элементы с HTML-страницы нужно выбрать, чтобы потом совершить с ними какие-то действия. Например подписать их на клики, наведение мышки, и так далее.
✅ Третья основа jQuery - это AJAX. Это такой механизм, который позволяет асинхронно загружать с сервера какие-то данные, и применять их на веб-странице. Ну или давай простыми словами. Повторюсь, твоя HTML-страница - это локальная статическая копия HTML-кода, зафиксированная на некоторый момент времени. Чтобы например при нажатии на кнопку на страницу загрузилось новое содержимое (допустим таблица с ценами), нужно сделать отдельный вызов к твоему серверу, да еще умудриться сделать это так, чтобы сама страница не перезагрузилась (действие в фоновом режиме). Для этого и используется AJAX - Asynchronous JavaScript And XML (Асинхронный JavaScript и XML).
В общем если не усложнять, то базовый синтаксис библиотеки сводится к следующим двум транскрипциям. Первая из них подписывает элемент страницы на какое-то действие (например клик мышкой), а вторая - отправляет запрос к серверу через AJAX. Для начального понимания и даже для практического применения, этих конструкций хватает с избытком.
Две основные функции библиотеки jQuery - подписка элемента на некоторое событие, и AJAX-обращение к серверу.
Выборка элементов со страницы через jQuery - что такое "селектор" 💰
Рассмотрим более подробно первую из конструкций - а именно программный код вида $("selector").on("action"); Для лучшего понимания что это и как это работает, давай обратимся к теории - а именно к базовому устройству веб-страницы.
Твой HTML-документ всегда состоит из HTML-узлов. Каждый тег внутри страницы представляет из себя отдельный объект DOM, с которым можно работать независимо от других элементов. Каждая кнопка, картинка, блок текста на странице - все это обособленные HTML-узлы (HTML Nodes) или другими словами DOM-элементы. Они могут быть вложены друг в друга (например внутри тега
может быть три элемента ), или просто иметь внутри себя текст.Если прямо сейчас ты клацнешь правой кнопкой по этому тексту, и нажмешь на пункт меню "просмотр элемента", то увидишь что-то вот такое:
Просмотр HTML узлов страницы средствами браузера Google Chrome.
В правой части обозревателя ты увидишь блок отладки, в котором будут располагаться элементы страницы - то есть узлы HTML DOM. Так вот, к чему это я. Для придания странице интерактивности, необходимо "подписать" конкретные HTML-элементы внутри страницы на некоторые действия пользователя. Например, "подписать" HTML-узел который представляет из себя условную кнопку, на событие "клик по кнопке". И вот тут на помощь нам приходит библиотека jQuery и ее вездесущий оператор $.
Библиотека jQuery и вездесущий символ $ - базовый оператор для обращения к элементам страницы и выполнения других действий.
В первую очередь, чтобы сделать что-либо с каким-либо элементом на странице, его необходимо "выбрать" - то есть получить указатель на этот элемент с помощью библиотеки jQuery. Для этого используется вот такая конструкция:
$("SELECTOR").on("ACTION", function(e) { console.log("HELLO!"); })
Здесь вместо слова SELECTOR необходимо подставить CSS-селектор. А вместо слова ACTION - действие, которое мы хотим обработать. Например, если мы хотим обработать клик по некоторому элементу, то нам потребуется вот такой код:
$("SELECTOR").on("click", function(e) { /* ... */ });
В этом случае, когда пользователь нажмет на элемент на странице мышкой, выполнится код внутри фигурных скобочек.
Для того чтобы уметь эффективно работать с элементами на странице, тебе нужно знать базовые принципы работы CSS-селекторов.
Базовые CSS-селекторы и принципы их организации 🔵
CSS-селектор - это выражение из одного или нескольких слов, благодаря которому можно выбрать один или несколько элементов на странице, посредством их атрибутов и/или языка стилизации CSS. Проще говоря, это специальное выражение, которое позволяет обратиться к каким-то конкретным узлам на странице.
CSS - не только технология для красивой стилизации страниц. Отчасти это технология для выборки элементов с помощью специальных селекторов.
Предположим, что на твоей HTML-странице есть квадратный элемент с текстом. Вот такой HTML-код будет представлять этот элемент. Не столь важно, какую конкретно стилизацию CSS будет иметь этот элемент - сейчас мы рассматриваем подписку на различные события, и различные типы CSS-селекторов. Так что, просто представим простой элемент с некоторым набором свойств.
Привет! Я большой прямоугольник с текстом внутри!
А теперь, предлагаю тебе список готовых CSS-селекторов, с помощью которых этот элемент может быть идентифицирован среди прочих других на этой HTML-странице.
cool_rectangle
.rect
.big_rect
.my_div
.rect.big_rect.my_div
[data-itemname="rectangle_one"]
[id="cool_rectangle"]
div.rect
div.big_rect
div.my_div
div#cool_rectangle
div[data-itemname="rectangle_one"]
div[data-itemname="rectangle_one"][id="cool_rectangle"]
Каждый из этих селекторов указывает на вышеприведенный HTML-узел страницы. Я скажу больше - на самом деле, вариаций селекторов для конкретного элемента может быть несколько сотен, а иногда и под тысячу. Все зависит от того, какое количество свойств и атрибутов будет указано у конкретного HTML элемента.
Как видишь, каждый из селекторов немного отличается от других. У одних перед названием стоит точка, у других - решетка, а у третьих - скобка. Все дело в том, что в зависимости от того как именно мы хотим обратиться к элементу, будет несколько отличаться синтаксис самого селектора. В общем же и целом, CSS-селекторы делятся на следующие несколько типов.
✅ Выборка по имени класса - оператор "точка"
У нашего элемента указан вот такой набор классов: class="rect big_rect my_div". Это значит, что мы можем обратиться к элементу по любому названию класса, например: .rect, .big_rect, .my_div. Мы так же можем сочетать названия классов между собой - в этом случае можно написать вот так: .rect.big_rect или вот так: .rect.big_rect.my_div.
✅ Выборка по идентификатору - оператор "решетка"
У нашего элемента указан идентификатор id="cool_rectangle". Согласно некоторому негласному правилу, у каждого элемента на странице должен быть уникальный идентификатор (хотя это правило не все соблюдают). Используя символ #, мы можем обратиться ко всем элементам на странице с некоторым идентификатором. Например, вот так: #cool_rectangle
✅ Выборка по атрибуту - оператор "квадратная скобка"
Более редкая и сложная конструкция - это обращение к элементам по их аттрибутам. В общем-то говоря, внутри HTML-тега любое выражение является атрибутом. Будь то id, class, и любые другие слова (даже style). Часто в тегах встречаются конструкции вида data-role, data-name, aria-label и так далее. Для обращения к элементу по его атрибуту, используется квадратная скобка. Соответственно, исходя из нашего примера, мы можем обратиться к элементу вот таким образом: [data-itemname="rectangle_one"]
✅ Выборка по имени тега - оператор "название тега".
Ну и последнее, самое простое. Всегда можно обратиться к элементу по названию его тега. То есть буквально, чтобы выбрать все элементы div на странице, можно так и написать: div.
Независимо от того, какой именно селектор ты выберешь, подставляй его внутрь оператора $. И ты получишь что-то вроде таких конструкций, которые будут обращаться к элементам на странице для каких угодно дальнейших действий:
$("#cool_rectangle")
$("[data-itemname='rectangle_one']")
$(".rect.big_rect.my_div")
$("div#cool_rectangle")
Базовые события библиотеки jQuery 🟠
Вот таблица со списком некоторых событий, доступных для подписки через jQuery. В таблице 4 столбца - события мышки, события клавиатуры, события форм ввода, и события документа. Наиболее часто используемыми являются события мышки, клавиатуры и события документа.
Некоторые события jQuery.
И теперь подробнее про каждый тип событий
click - событие клика мышкой на элемент (одинарный клик). Наиболее часто используемое событие.
dblclick - событие двойного клика мышкой на элемент (дабл-клик)
mouseenter - событие которое происходит в момент входа указателя мышки в элемент (пересечение одной из границ элемента мышкой внутрь элемента)
mouseleave - событие которое происходит в момент выхода указателя мышки с элемента (пересечение одной из границ элемента мышкой снаружи вовне)
keypress - событие нажатия на кнопку на клавиатуре (нажатие целиком, без привязки к моменту начала и окончания нажатия)
keydown - событие нажатия на кнопку, момент начала нажатия (можно отменить нажатие используя это событие)
keyup - события нажатия на кнопку, момент завершения нажатия
submit - событие отправки формы (нажатие на кнопку "отправить") - в современной интерпретации, любая отправка на сервер набора полей из тега
change - изменение содержимого некоторого поля ввода (основное событие, которое используется для изменение содержимого полей ввода и мониторинга содержимого). Второе по популярности событие в jQuery.
focus - фокусировка некоторого элемента
blur - разфокусировка некоторого элемента
load - событие завершения загрузки страницы
resize - событие изменения размеров экрана
scroll - скроллинг страницы или элемента
Ну и возвращаясь к нашему примеру, подпишем наш кубик на событие клика, после чего будем отображать сообщение "кто-то кликнул по кубику!". Это будет выглядеть вот так:
$("#cool_rectangle").on("click", function(e) {
alert("Кто-то кликнул по кубику!");
});
jQuery - еще несколько слов 👨💻
По личному опыту - разные проекты в которых я когда-то участвовал и продолжаю участвовать сейчас, построены как с использованием jQuery, так и без нее. Был период в жизни, когда я тулил эту библиотеку где ни попадя. Был и противоположный период - когда я принципиально писал чистый Vanilla код без чего-бы то ни было постороннего.
В конечном итоге, я пришел к личному выводу о том, что предполагаемое "зло" вокруг jQuery несколько преувеличено, и не стоит шарахаться от него как от огня.
Точно так же как и многие другие инструменты, это вполне рабочая штука, которая экономит время. Только лишь наличие jQuery в проекте не говорит о том, что у автора кривые руки - а скорее о том, что человек решил не тратить лишнее время на очередное пере-изобретение велосипеда.
Top comments (0)