Простая шпаргалка по jQuery для начинающих веб программистов

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

Позвольте мне еще раз вернуться к начальной статье. Вот что говорится о библиотеке jQuery на английской версии Википедии:

jQuery - это JavaScript библиотека, которая упрощает работу с HTML DOM, обработку событий, CSS-анимацию и Ajax запросы. По данным на август 2022 года, 77% из 10 миллионов самых популярных веб-сайтов используют jQuery. Исследования веб-аналитики показывают, что jQuery является самой популярной библиотекой JavaScript, превосходя другие библиотеки в использовании примерно в 3-4 раза. Синтаксис jQuery спроектирован для удобной навигации по документу, выбора элементов DOM, создания анимации, обработки событий и разработки Ajax-приложений.

Другими словами, jQuery - это древняя как динозавр, простая, немного громоздкая, иногда неэффективная, но знакомая и удобная в использовании инструмент, который помогает сделать веб-сайты интерактивными.

Многие критикуют эту лопату, многие предпочитают использовать более элегантные инструменты для создания современных сайтов. Однако! Как и любая настоящая лопата, она хранится практически в каждом сарае у каждого садовода программиста - и в контексте веб-разработки, ей умеет пользоваться практически каждый. Даже если вы предпочтете не любить эту лопату или вообще не интересуетесь садоводством веб-разработкой, в какой-то момент вам придется работать с ней просто потому, что это удобно.

Для большей убедительности, я попросил нейросеть создать образ типичного программиста, который работает с jQuery, держащего в руках лопату. Однако в результате странных обстоятельств получился персонаж, напоминающий стареющего Артемия Лебедева. Похоже, что именно так Кандинский представляет себе веб-разработчиков.

Как подключить JavaScript-библиотеку jQuery к своей веб-странице 🔌

Надеюсь, что ты уже освоил основы веб-разработки и понимаешь, что такое веб-страница, HTML и CSS. Если нет, то эта статья может показаться просто набором букв и картинок без практической пользы. В таком случае, лучше вернуться к более простым материалам и изучить их сначала. А если ты уже владеешь этими знаниями, то давай продолжим!

Чтобы интегрировать jQuery на свою веб-страницу, необходимо внести определенные изменения в секцию head. Этот раздел предназначен для хранения скрытой информации страницы, такой как мета-теги, ссылки на скрипты и стили.

Пример содержимого очень простой HTML-страницы (например, файл myfirstpage.html), в котором подключена библиотека 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"

Однако вернемся к анализу данного примера. Что происходит дальше в коде? Немного ниже в статье есть следующие строки:

Какова их суть? Зачем они здесь? Проще говоря, в них происходят следующие процессы. Парные теги script (открывающий и следующий за ним закрывающий) сообщают системе о том, что внутри них содержится определенный JavaScript-код. Поскольку этот блок скрипта находится в секции head, то данный код будет выполнен сразу после загрузки страницы в браузер пользователя (как только страница будет отображена на мониторе).

Прямо в коде JavaScript можно обнаружить следующую структуру: $(document). Здесь начинается архитектура библиотеки jQuery и ее взаимосвязь с HTML-моделью страницы и моделью событий. Функция $() является основной функцией библиотеки jQuery, позволяющей выбирать элемент на странице с помощью CSS-селектора или объекта JavaScript.

В данном случае осуществляется выбор объекта "документ целиком", после чего документ подписывается на событие ready (в оригинальной модели страницы это событие называется onload). Это событие возникает, когда страница загружена полностью и готова к использованию, что позволяет начать работу с интерактивностью элементов.

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

Базовый синтаксис и три основы jQuery 📦

Несмотря на то, что jQuery представляет собой сложную и гибкую библиотеку с множеством функций, чаще всего разработчики используют только две из них - обработку различных событий (например, клики, наведение мыши и т. д.) и AJAX - запросы к серверу для загрузки новой динамической информации на страницу. В результате, современный веб-сайт выглядит примерно так:

✅ Одной из основных характеристик библиотеки jQuery является символ $, который является ключевым словом этой библиотеки. Этот символ используется в большинстве вызовов библиотеки, включая доступ к элементам документа и различным функциям самой библиотеки. При вызове $("...") происходит выборка всех элементов с помощью CSS-селектора, указанного в кавычках. При вызове $ происходит обращение к функциям библиотеки.

✅ Вторая ключевая концепция jQuery - это использование CSS-селекторов. CSS-селекторы представляют собой специальные выражения на языке CSS, которые позволяют обращаться к элементам на веб-странице. Важно помнить, что веб-страница является локальной копией документа, загруженного с сервера и отображенного на экране. С помощью CSS-селекторов можно указать библиотеке, какие именно элементы на веб-странице необходимо выбрать для последующих действий, таких как добавление обработчиков событий, изменение стилей и т. д.

✅ Третья база jQuery - это AJAX. Это инструмент, который позволяет загружать данные с сервера асинхронно и применять их на веб-странице. Другими словами, твоя HTML-страница представляет собой статическую копию HTML-кода, зафиксированную на определенный момент времени. Чтобы, например, при нажатии на кнопку загрузить новое содержимое на страницу (например, таблицу с ценами), необходимо отправить запрос на сервер и обновить содержимое страницы без ее перезагрузки (в фоновом режиме). Для этой цели используется AJAX - Asynchronous JavaScript And XML (Асинхронный JavaScript и XML).

В общем, если не усложнять, то основной синтаксис библиотеки сводится к двум основным транскрипциям. Первая из них назначает элемент страницы для определенного действия (например, щелчок мышью), а вторая - отправляет запрос к серверу с помощью технологии AJAX. Для начального понимания и даже для практического использования этих конструкций достаточно в избытке.

Выборка элементов со страницы через jQuery - что такое "селектор" 💰

Давайте более детально изучим первую из этих конструкций - а именно программный код вида $("selector").on("action"); Чтобы лучше понять, что это такое и как это работает, давайте обратимся к теории - а именно к основам структуры веб-страницы.

Каждый HTML-документ состоит из HTML-узлов, которые представляют собой отдельные объекты DOM. Эти узлы можно обрабатывать независимо друг от друга. Кнопки, изображения, текстовые блоки на странице - все они являются отдельными HTML-узлами или DOM-элементами. Они могут быть вложены друг в друга (например, кнопки внутри блока

), или содержать только текст.

Если в данный момент вы щелкнете правой кнопкой мыши по этому тексту и выберете пункт "Исследовать элемент", то вы увидите следующее:

В правой части браузера отображается блок отладки, в котором размещаются элементы страницы - узлы HTML DOM. Итак, о чем я говорю. Для придания странице интерактивности необходимо привязать определенные HTML-элементы к действиям пользователя. Например, привязать HTML-узел, представляющий собой кнопку, к событию "клик по кнопке". В этом нам поможет библиотека jQuery и ее всемогущий оператор $.

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

$("SELECTOR").on("ACTION", function(e) { console.log("HELLO!"); })

В данном случае необходимо использовать CSS-селектор вместо слова SELECTOR. А вместо слова ACTION следует указать действие, которое требуется обработать. Например, если необходимо обработать клик по определенному элементу, то следует использовать следующий код:

$("SELECTOR").on("click", function(e) { /* ... */ });

При данном сценарии, после того как пользователь произведет клик по элементу на веб-странице, будет выполнен код, заключенный в фигурные скобки.

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

Базовые CSS-селекторы и принципы их организации 🔵

Селектор CSS - это набор слов или фраз, который используется для выбора одного или нескольких элементов на веб-странице с помощью их атрибутов и стилей CSS. Иными словами, это специальное выражение, которое позволяет обращаться к определенным элементам на странице.

Допустим, у вас на веб-странице есть квадратный блок с текстом. Вот как будет выглядеть HTML-код этого элемента. Не так уж важно, как будет стилизован этот блок с помощью CSS - сейчас мы обсуждаем подписку на различные события и различные виды CSS-селекторов. Поэтому давайте просто представим простой блок с определенными свойствами.

Привет! Я большой прямоугольник с текстом внутри!

Предлагаю тебе набор готовых CSS-селекторов, которые помогут выделить этот элемент среди остальных на данной HTML-странице.

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

Как можно заметить, каждый из селекторов имеет некоторые различия от остальных. У некоторых перед названием стоит точка, у других - решетка, а у третьих - скобка. Это связано с тем, что в зависимости от того, как мы хотим обратиться к элементу, синтаксис самого селектора будет немного отличаться. В общем, CSS-селекторы можно разделить на несколько типов.

✅ Оператор "точка" используется для выборки по имени класса.

Наш элемент имеет следующий набор классов: class="rect big_rect my_div". Это означает, что мы можем обращаться к элементу по любому из этих классов, например: .rect, .big_rect, .my_div. Также мы можем комбинировать названия классов - например, .rect.big_rect или .rect.big_rect.my_div.

✅ Отбор по уникальному идентификатору с использованием оператора "решетка"

У нашего элемента есть уникальный идентификатор с названием "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 категории событий: события мыши, события клавиатуры, события форм ввода и события документа. Самыми популярными являются события мыши, клавиатуры и документа.

Давайте теперь рассмотрим более детально каждый вид мероприятий

Вернемся к нашему примеру и добавим обработчик события клика для кубика. После клика будет выводиться сообщение "Кто-то нажал на кубик!". Это будет выглядеть следующим образом:

$("#cool_rectangle").on("click", function(e) {

alert("Кто-то кликнул по кубику!");

});

jQuery - еще несколько слов 👨‍💻

Из моего личного опыта могу сказать, что различные проекты, в которых я участвовал и продолжаю участвовать, могут быть построены как с использованием jQuery, так и без нее. Бывало время, когда я использовал эту библиотеку повсюду. Однако, был и период, когда я настойчиво придерживался написания чистого Vanilla кода без каких-либо посторонних вещей.

В итоге, я пришел к собственному выводу о том, что предполагаемая "негативность" вокруг jQuery немного преувеличена, и не стоит избегать ее как чумы.

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

Еще немного шуток для тех, кто уже знаком с jQuery и занимается созданием веб-приложений.

Как всегда, иллюстративное изображение, отражающее инструмент, описанный в статье. Главный символ jQuery - знак $.

🔥 Нравится? Подпишись! Вместе мы одержим победу над восстанием роботов! 🔥

🚀 P.S. Для тех, кто хочет не просто изучать программирование, а начать свой путь мастера прямо сейчас, приглашаю на Boosty! Там представлен уникальный обучающий контент по программированию для всех уровней подготовки. Кроме того, вы сможете увидеть автора в реальной жизни. Нажмите здесь и отправляйтесь в путь!🚀

У меня также есть Telegram-канал, где публикуются более простые и веселые посты. Ссылка на него доступна.

P.S.3 Дорогой читатель, каково твое мнение о jQuery? Применяешь ли его в своих работах?