Том IV. jQuery

Общие положения

jQuery – это библиотека, построенная на основе языка JavaScript. То есть, весь код, написанной на этой библиотеке, соответственно, написан на языке JavaScript.

В целом, библиотеки в языках программирования – это сборники подпрограмм или объектов, используемых для разработки программного обеспечения. То есть, дополнительные средства, добавляющие функционал и/или упрощающие манипуляции с кодом программы. Говоря еще проще: библиотека – это набор из каких-то кусков кода, которые были написаны другими программистами для общего пользования. И подключая эти куски кода к коду нашей программы, мы можем значительно повысить функционал и/или упростить его реализацию.

Для того, чтобы использовать библиотеку jQuery, её необходимо сначала подключить к веб-странице. Один из популярных вариантов сделать это – с помощью сайта 'googleapis'. Для этого мы просто вставляем в тег 'head' ссылку на внешний источник: <script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"</script> – это и есть внешняя ссылка для подключения библиотеки. Еще один способ подключить jQuery – это скачать файл с библиотекой, затем создать новый файл JS и скопировать туда весь код из скаченного файла jQuery, а затем подключить его к HTML. В этом случае, вы не будете зависеть от внешних ресурсов, но и обновляться функционал в этом случае не будет.

Код с помощью jQuery записывается следующим образом: в начале всегда пишется знак доллара – $, то есть это обращение (выбор) того, что мы указываем далее в скобках, к примеру весь HTML-документ или что-то другое. Далее пишется '.ready', то есть код будет выполняться тогда, когда документ будет готов – загружен. Далее пишется ключевое слово 'function()', после чего открываются фигурные скобки. Внутри фигурных скобок, соответственно, мы можем писать код, который будет выполняться после загрузки документа. Пример в коде ниже выполняет функцию выбора всех заголовков 'h3', при нажатии на которые у них будет меняться цвет фона. После обращений к заголовкам (после доллара) для того, чтобы действие выполнялось по клику, пишется .click, а затем снова 'function()':

Селектор

Как можно помнить из главы на странице посвященной JS, существует несколько методов обращения к какому-либо элементу, эти методы называются селекторы. В JS их несколько, а в jQuery всё выбирается при помощи одного селектора. Этот селектор уже был представлен в главе выше – это знак '$'. Таким образом можно обращаться к любому объекту (элементу) в HTML. Будь до заголовки, списки или все элементы в списке ('$('h3');'). Но что делать, если нам нужно обратиться к какому-то конкретному элементу, например, в том же списке? Это делается с помощью такого же селектора, но в круглых скобках последовательно указывается интересующий нас элемент. К примеру, у нас есть два списка, один неупорядоченный, другой упорядоченный. Но нам нужно взаимодействовать только с элементами из упорядоченного списка. Выглядеть код будет так: '$('ol li')'. Точно так же мы можем обратиться к элементам и по ID. Делается это так: $('#ваш_ID'). Та же схема актуальна и для классов.

Метод css()

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

Затем мы можем задать этому элементу какой-то стиль с помощью jQuery при помощи метода .css:

Как можно заметить, такой метод записи обращений к стилям гораздо короче, чем при помощи селекторов в классическом JS. Но это не единственное и не самое главное преимущество. Дело в том, что мы в одном методе вызова CSS можем поменять сразу несколько свойств. Делается это при помощи объекта из JS:

Теперь этот созданный объект с набором стилей можно применить. Запись при этом будет чрезвычайно простой:

Для сравнения и лучшего понимания, можно рассмотреть, как бы выглядел бы код для изменения цвета элементов списка, но уже без применения jQuery, а на обычном JS:

А вот так с помощью jQuery:

Куда приятнее и эффективнее, правда? Правда. Согласен.

Метод text()

При помощи метода .text() можно получать и/или устанавливать любой текст. Этот метод вполне можно рассматривать как версию метода '.textContent' из классического JS. У метода .text() есть особенность: он выбирает не только текст в выбранном элементе, но и текст во всех потомках выбранного элемента. Работа этого метода так же проста, как и работа предыдущего метода. К примеру, если нам нужно получить текстовый контент какого-либо элемента, то код будет выглядеть так:

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

Метод html()

Метод .html() из jQuery по своему принципу одинаков с методом из классического JS – .innerHTML. Но, как и многие остальные манипуляции с помощью jQuery, этот метод позволяет проще взаимодействовать с HTML документом, изменяя его. К примеру, если в списке мы хотим заменить все его элементы на элементы ссылок, то код бы выглядел таким образом:

Метод attr()

Как можно догадаться из названия, метод .attr() используется в jQuery для манипуляции с атрибутами в HTML, подобно методу .getAttribute из классического JS. Рассматривать подробнее этот метод не вижу смысла, но за одним исключением, которое удобно рассмотреть на примере работы с элементами <img>. Это вариация выбора элементов, с помощью "порядкового" селектора. То есть, если мы поместили в HTML ряд изображений, но нам нужно изменить параметры только одного из них, с помощью jQuery это можно сделать так:

Метод val()

Атрибут value используется в HTML в различных элементах. К примеру, при применении этого атрибута к элементу списка <li>, можно установить порядковый номер этого элемента. То есть, если установить, к примеру, "100", можно начинать отсчет именно с этого значения. Но с точки зрения jQuery гораздо полезнее получать value, например, из элемента <input>, чтобы узнать, что ввел пользователь в поле. Делается это следующим образом:

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

Методы манипуляции классами

Базовые методы манипуляции классами в jQuery так же не отличаются от методов из классического JS и похожи названиями: '.addClass()', '.removeClass()' и '.toggleClass()'. Как можно заметить, эти методы одинаковы с методами JS после обращения к .classList. На примере того же списка, для автоматического добавления классов к его элементам с помощью jQuery можно использовать такой код:

Как вы могли заметить, в параметре селектора при обращении к элементам списка есть еще один "подселектор". Эта запись позволяет выбрать последовательность элементов, чей индекс меньше установленного. Напомню, отсчет элементов в языках программирования ведется от ноля. Соответственно, в этом примере выбираются все элементы от 0 до 2. Обратным от селектора :lt() существует селектор :gt(). Он выбирает все элементы, чей индекс больше установленного. Ну а все остальные манипуляции с классами абсолютно идентичны с классическим JS, описывать их мы не будем.

Метод click()

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

Для наглядности снова обратимся к нашему ненумерованному списку. К примеру, нам нужно сделать так, чтобы при нажатии на первый элемент из списка, в браузере выводился alert. Код будет выглядеть следующим образом:

Разумеется, точно так же мы можем выбрать и несколько элементов, без уточнения .first() или подобных.

Метод keypress() и подобные

Эта глава не только о самом методе .keypress(), но и об остальных методах, касающихся отслеживания нажатий клавиш на клавиатуре, таких как .keydown() и keyup(). Метод .keydown() включается сразу после того, как клавиша буквально нажата. Метод .keyup() включается сразу после того как клавиша отпущена. keypress() включается как бы между этими состояниями, но есть и существенное отличие, которое состоит в том, что методы .keyup() и .keydown() будут активированы, если, к примеру, нажать сочетание клавиш Shift + 'буква' – чтобы написать большую букву, а метод .keypress() будет активирован тогда, когда будет нажата большая буква. Важным уточнением было бы то, что все эти методы работают только в том случае, если в браузере есть элемент <input> и они с ним взаимодействуют. К примеру, можно написать код, который бы присылал alert сообщение, если была нажата любая клавиша (перед этим, разумеется, представим, что на страницу был добавлен элемент <input>):

Обычно в коде требуется определить, какая именно клавиша была нажата. И если была нажата нужная нам клавиша, то в этом случае мы запускаем код. То есть, что чаще всего используется в том же элементе <input>, если пользователь ввел какое-то содержимое в этот элемент, то удобнее всего было бы отправить весь заполненный материал при помощи клавиши Enter. Для этого нам нужно "слушать" событие нажатия именно этой клавиши. Для примера возьмем тот же код, но теперь в параметре исполняемой функции необходимо обозначить переменную 'event'. Как мы объясним программе, какую именно клавишу нам "слушать"? Для этого в JS предусмотрена система с кодами клавиш. То есть, у каждой из клавиш на клавиатуре есть свой собственный уникальный код, прописав который, мы можем взаимодействовать далее. У клавиши Enter код "13", по нажатию на которую мы будем выводить сообщение в консоль:

Метод on()

Метод .on() является универсальной заменой всем event-методам, таким, как к примеру .click() или .keypress(). В этом случае, чтобы реагировать, например, на клик и менять цвет фона заголовка, код бы выглядел так:

Еще один сценарий, при котором можно использовать метод .on() это наведение мыши на какой-то объект. За это отвечает параметр 'mouseenter'. Обратным от эффекта этого параметра выступает параметр 'mouseleave'.

Эффекты

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

Длительность эффекта можно регулировать как словами (в примере выше), так и милисекундами.

Разумеется, обратным от эффекта .fadeOut (эффекта плавного угасания) является эффект .fadeIn (эффект плавного появления), он работает ровно по такому же принципу. Однако для удобства в jQuery существует метод .fadeToggle, который работает неким переключателем.

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

Финал jQuery и веб-приложение "Список покупок"

Полагаю, было бы не слишком рационально размещать на странице текстовой инструкции целое приложение-список покупок, поэтому мы напишем его на отдельной странице. Здесь же я расскажу только о том, как всё это работает. Здесь мы развернем описание кода JS и jQuery.

Перейти на страницу с приложением можно здесь.

Итак. В jQuery есть отдельный метод, позволяющий реагировать на нажатие только непосредственно на тот элемент, на которое произошло нажатие, без распространения на родительские элементы. Делается это с помощью метода '.stopPropagation()'. Для его работы необходимо задать параметр функции. Далее, чтобы распространить нажатие выше, нужно применить метод .parent(). Но что же делать с тем, что при добавлении пользователем новых элементов, старые элементы никуда не деваются? То есть, пользователь может добавить в список огромное количество различных пунктов, а они так и будут постоянно висеть. Для этого существует метод .remove(), который удаляет из структуры HTML документа выбранный элемент. Делается это с помощью callback-функции.
Далее нам нужно через элемент <input> добавлять какой-то продукт в наш список. Делается это с помощью метода 'append()'. Выглядит код таким образом: '$('ul').append(<li></li>)'. Ну а что бы произошло непосредственное добавление текста из input, то нужно прибавить переменную (внимательно следите за кодом ниже).

Для разъяснения принципа работа кода веб-приложения списка покупок, мы попробуем применить чуть другую схему. Как вы помните, обычно я писал блок кода JS в красной рамке, а затем объяснял принцип его действия. Сейчас же я попробую писать без рамки и по одной строке, после чего сразу же буду рассказывать о принципе действия кода.

Этопервая строка кода – $('ol').on('click', 'li', function() {:

• Через селектор '$', мы обращаемся к нумерованному списку;
• Добавляем ему прослушиватель событий через метод 'on()', слушаем событие клика по объекту 'li' – элементу списка, далее открываем тело функции, которая будет выполняться по клику. Эта функция занимается тем, что изменяет цвет по нажатию на пункт списка покупок и зачеркивает его (а при повторном нажатии – наоборот);

Здесь далее будет эффективнее привести небольшой блок, где будет описываться тело функции:

Итак сначала мы пишем оператор if else. Он занимается следующим: если цвет этого элемента (по которому кликнули) равен такому-то цвету, то в этом случае, мы присваиваем этому элементу другой цвет и не далем его зачеркнутым; в остальных же случаях (тех, где цвет кликнутого элемента изначально другой), мы делаем пункт списка серого цвета, а так же делаем его зачеркнутым. Идем далее.

В HTML коде этого приложения у нас есть элемент <span>, в который помещена картинка с мусорной корзиной. Далее снова привожу блок кода jQuery.

В этой (следующей подряд) функции есть вторая, подфункция. В общую функцию помещен тот самый метод 'stopPropagation();', который позволяет удалить только тот элемент, на который был произведен клик, то есть, остановить распространение на родительские элементы. Если бы этого метода не было, то по нажатию на мусорную корзину, мы бы удалили весь блок списка. Эта функция занимается очисткой всего списка покупок по клику на корзину внутри поля ввода.

Субфункция от функции, описанной выше, занимается непосредственно процессом удаления элементов. В первой строке написано: по клику на родительский элемент, с применением метода (эффекта) .fadeOut() запускается функция. В теле функции заключено: при обращении конкретно на этот кликнутый элемент, запускается метод .remove(), который удаляет элементы из дерева DOM. Идем дальше.

Эта функция занимается созданием и внесением на веб-страницу новых пунктов для списка покупок по нажатию клавиши Enter. В первой строке написано: в поле ввода 'input', по событию нажатия клавиши, запускается функция. В теле этой функции есть оператор if, который проверяет нужную нам клавишу и выполняет условие, если она была нажата. Итак, в 'if' используется специальный метод event.which для отслеживания нажатий и далее написано, что если нажата клавиша с кодом 13 (как вы помните, для каждой клавиши в JS есть свой уникальный код), то выполняются следующие условия. Во-первых, объявляется переменная 'itemText' в которую, с помощью метода val(), помещается значение введенного текста. Затем объявляется переменная 'semicolon', в которую помещается точка с запятой. Затем мы так же с помощью метода val() считываем значение текста. Ну и наконец, как мы помним, после нажатия на клавишу Enter и с помощью метода append(), который занимается помещением информации в HTML, мы создаем <li> (элемент списка), подставляем изображение мусорной корзины + переменную itemText (в которой находится введенная пользователем информация) и переменную semicolon, чтобы в конце была точка с запятой. Идем дальше.

Далее у нас функция, которая занимается сворачиванием поля ввода по нажатию на значок. Там написано: в элементе заголовка (h2), по клику на картинку (поскольку картинка находится в заголовке) запускается функция. В теле функции для элемента <input> применен метод 'slideToggle', который непосредственно занимается сворачиванием чего-либо.

Здесь у нас функции, которые занимаются тем, что при наведении мыши на поле ввода, картинка с корзиной становится видна, а когда мышь уходит, то корзина исчезает. Тут написано: в области элемента <input> при использовании метода mouseenter() запускается функция. Внутри этой функции есть оператор 'if', который занимается проверкой следующих условий. При наведении на мусорную корзину он проверяет, что если прозрачность этой картинки равна '0', то устанавливается значение '1'. Другая функция занимается обратной операцией. Последующая пара функций, код которых, в виду его полной технической идентичности, я не буду здесь приводить, занимается ровно тем же, только уже для пунктов списка.




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


Ну вот и всё. На этом закончилась эта краткая инструкция в мир библиотеки jQuery. Следующая глава в некоторых случаях не менее полезна и увлекательна. Это глава посвящена Bootstrap.