Что такое jQuery?

jQuery - это библиотека, которая упрощает роботу с елементами HTML страницы с помощью языка JavaScript. Многие программисты сейчас считают jQuery устаревшой и уже давно не нужной библиотекой, поскольку появился ряд новых библиотек, таких как ReactJS или AngularJS, да и сам JS стал намного лучше и удобней. Но я все же считаю что jQuery все также невероятно полезен и помимо этого, очень прост в изучении.

Установка jQuery

Для того чтобы установить jQuery, вам нужно сначала зайти на его оффициальный сайт и нажать на кнопку Download

Далее вам нужно выбрать версию, советую выбирать самую новую compressed версию.

Далее копируем ссылку и вставляем ее в head нашей HTML странички. Готово, jQuery подключен.

Основа jQuery

jQuery впервую очередь позволяет нам легко, быстро и удобно выбирать HTML елементы с нашей странички. Для этого можно использовать либо функцию jQuery() либо доллар($). Результат будет один и тот же.

С помощью этих функций мы можем получать HTML елементы на странице. То есть в скобках и в кавычках нужно написать либо название тега, либо класс(начинается с точки) либо id(начинается с решетки). Давайте попробуем вывести в консоль тег(p)

Видим результат. Если у вас также, значит вы сделали все правильно!

Робота с текстом

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

Видим в консоли текст нашего параграфа!

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

Видим результат в консоли:

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

На страничке видим результат:

Отслеживание нажатия

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

Мы также можем создать отдельную функцию и вызвать ее при клике, а не создавать новую

Со знаниями всего-лишь двух методов jQuery вы уже сможете создать простой кликер на своей странице!

Функция css()

Часто бывает такое что нужно изменить CSS свойство какого-нибудь елемента, jQuery и здесь покажет себя отлично! С помощью функции css() вы легко можете изменить свойство или добавить его нужному елементу. Этот метод принимает 2 аргумента: свойство которое хотите изменить и значение для свойства. Пример:

Вот что мы в этоге получили:

Функция attr()

Еще один невероятно нужный и важный метод attr(). Он позволит вам получать или менять атрибуты у HTML тегов. Давайте попробуем получить id ссылки.

Видим, все работает!

Мы также можем, к примеру, поменять нашей ссылки атрибут href(ссылку).

Видим что ссылка заменилась.

Функции show(), hide(), fadeOut(), fadeIn()

Данные методы помогут нам скрывать либо показывать елементы. Они очень похожи между собой, fadeIn() и show() оба принимают один и тот же аргумент - время появления елемента и оба показывают елемент, точно также как hide() и fadeOut(), только они скрывают. Так в чем отличие между этими функциями? fadeOut отличается от hide() тем, что первый делает елемент прозрачным, а hide() полностью его скрывает. Тоже самое и с show().

Метод val()

Метод val() позволяет нам получить то, что ввел пользователь в поле для ввода input или textarea. Если внутри скобок вы запишите значение, то это значение присвоится input или textarea. Данный метод можно использовать не только для текстовых input`ов.

Видим:

Изменение HTML кода

Все это время мы вместе с вами взаимодействовали с уже существующими обьектами на нашей странице, но jQuery также позволяет нам встраивать новые обьекты. Для этого есть несколько функций: prepend(), append(), before(), after(). Функция prepend() добавляет обьекты в начало елемента, append() в конец. Функция before() добавляет HTML код перед каким-то елементом, after() после, все просто!

Результат:

Конец

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