Введение
Если вы знакомы с миром программирования, то знаете, насколько важны языки программирования. К числу наиболее важных и часто используемых относятся HTML, CSS, и JavaScript. В то время как HTML и CSS помогают вам проектировать и структурировать веб-сайт, JavaScript позволяет сделать его интерактивным. Существует множество библиотек JavaScript, которые вы можете использовать для добавления уникальных функций в свой веб-проект. Среди них — библиотека jQuery.
jQuery сам по себе не является языком программирования. Это инструмент, который вы можете использовать для облегчения веб-разработки на JavaScript. Это помогает сделать задачи более простыми и понятными. Он известен своей концепцией «Пиши меньше, делай больше» (Write Less, Do More). Помимо облегчения веб-разработки, jQuery также дает дополнительное преимущество в виде кроссбраузерности. Это означает, что код будет отображаться корректно независимо от того, какой браузер используется для вывода.
Чтобы лучше представить, как jQuery делает код более лаконичным, рассмотрим пример. Допустим, мы пишем программу «Hello, World!». Вот как она будет выглядеть на JavaScript и jQuery соответственно:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
Обе эти строки кода приведут к одному и тому же результату. Однако, как вы можете видеть, jQuery делает написание более лаконичным и точным.
В этом руководстве вы узнаете все об основах jQuery. Вы можете скачать этот инструмент для себя с этого сайта. Мы будем исходить из того, что вы абсолютный новичок и ничего не знаете о jQuery. Это руководство научит вас устанавливать jQuery и некоторым фундаментальным концепциям, связанным с ним. Мы рассмотрим некоторые распространенные селекторы, события и эффекты в jQuery. Затем вы узнаете, как протестировать такие концепции разработки, как API, DOM и CDN, на полезных примерах. Читайте дальше, чтобы познакомиться с миром jQuery.
Прежде чем мы начнем
Есть определенные вещи, знание которых заранее пойдет вам на пользу. Например, базовое понимание того, как работают HTML и CSS, очень вам поможет. Мы не будем рассматривать это в данном руководстве. Мы будем работать исходя из предположения, что вы, как минимум, умеете создавать простой веб-сайт. Вы также должны иметь базовое представление о том, как работает программирование в целом. Это не обязательно означает, что для продолжения работы вы должны быть экспертом в JavaScript. Достаточно просто иметь некоторое знакомство с такими понятиями в программировании, как логика, переменные и типы данных.
Как настроить jQuery в вашей системе
Прежде всего, давайте посмотрим, как можно настроить jQuery в вашей системе. jQuery доступна в виде файла JavaScript, поскольку это библиотека JavaScript. Вам нужно подключить этот файл в HTML-коде нашего сайта. Сделать это можно двумя способами. Как я уже упоминал ранее, один из способов — скачать его с здесь. Помимо официального сайта, вы также можете найти jQuery в Google Hosted Libraries прямо здесь.
Другой способ — использовать сеть доставки контента (Content Delivery Network) или CDN для подключения файла. CDN состоит из набора серверов, которые помогают доставлять веб-контент локально. Хостинг файла jQuery через CDN позволяет контенту доставляться пользователю гораздо быстрее. Вот почему с этого момента в данном руководстве мы будем использовать сеть доставки контента.
В нашем первом примере мы будем создавать веб-проект. Этот небольшой проект содержит style.css в css/ директории. script.js расположен в js/ директории. Наконец, index.html присутствует в корне веб-проекта:
Для этого проекта мы создадим каркас HTML. Впоследствии мы сохраним его как index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery Демо</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
Именно здесь мы подключим файл jQuery. Как я уже говорил, мы подключим его через CDN. Вы вставите ссылку на jQuery перед тегом </body> . После этого вы можете добавить свой собственный файл JavaScript, который в нашем примере был script.js в нашем примере. Не забывайте всегда помещать файл JavaScript под библиотекой jQuery, вот так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery Демо</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
Что бы вы сделали, если бы вместо этого скачали локальную копию библиотеки jQuery? В этом случае вам нужно сохранить файл jQuery в папке js/. Затем вы можете подключить его как js/jquery.min.js.
jQuery: Основы
Прежде чем мы углубимся в детали, давайте разберем некоторые основы jQuery. Основная задача jQuery — использовать DOM для связи HTML-элементов в браузере. DOM расшифровывается как объектная модель документа. Это метод, который позволяет JavaScript взаимодействовать с HTML в браузере. Вы можете визуализировать DOM, щелкнув правой кнопкой мыши на веб-странице и выбрав «Просмотреть код» (Inspect). HTML-код, который отображается в инструментах разработчика, и есть DOM.
Узел (node) — это отдельный HTML-элемент в DOM. JavaScript может изменять все эти объекты или элементы. Вы можете представить структуру этих объектов в виде дерева. <html> находится в корне, в то время как остальные элементы разветвляются дальше.
При щелчке правой кнопкой мыши и выборе пункта «Просмотр кода страницы» (View Page Source) отобразится исходный HTML-код веб-сайта. Помните, что это не то же самое, что DOM. В то время как DOM может изменяться, исходный HTML-код полностью статичен. Любые изменения, которые вы вносите в JavaScript, не повлияют на этот HTML-файл. Весь узел <html> обернут во внешний слой, называемый объектом document.
Далее мы увидим, как можно управлять веб-страницей и ее функциями с помощью jQuery. Однако перед этим необходимо убедиться, что страница готова.
Введите следующее после создания файла script.js в папке js/ директории:
|
1 2 3 4 5 |
$(document).ready(function() { // весь пользовательский код jQuery будет здесь }); |
Теперь любой код, который вы напишете, будет обернут в этот код. jQuery обнаружит готовность кода. Код внутри этой функции будет запущен только тогда, когда DOM будет готов.
Мы вернемся к скрипту «Hello, World!», о котором говорили в начале руководства. Предположим, мы хотим запустить этот скрипт. Чтобы использовать jQuery для вывода этого текста в браузер, нам нужно применить ID demo к пустому блочному абзацу следующим образом:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
Чтобы вызвать jQuery, мы должны использовать символ $ . Вы можете применять синтаксис и методы CSS для доступа к DOM с помощью jQuery. Простой пример выглядит следующим образом:
|
1 |
$("selector").method(); |
Это формат, который вы будете использовать с jQuery. Мы уже знаем, что символ # представляет ID в CSS. Таким образом, вы можете получить доступ к ID demo с помощью селектора #demo.html() . Этот метод позволит вам изменить HTML-код, присутствующий в элементе.
Следующий код показывает, как мы помещаем программу «Hello, World» в jQuery ready() обертку:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
Вам нужно добавить эту строку кода в script.js файл. Сохраните этот файл. После этого вы можете открыть index.html файл в браузере. Вы должны увидеть вывод Hello, World!. Это также отличный момент, чтобы проверить DOM для лучшего понимания. Щелкните правой кнопкой мыши на тексте «Hello, World!». Выберите «Исследовать элемент». DOM покажет <p id="demo">Hello, World!</p>. С другой стороны, нажатие на «Просмотр кода страницы» покажет только исходный HTML-код. В данном случае это будет <p id="demo"></p>.
Что такое селекторы?
Теперь мы перейдем к некоторым важным функциям в jQuery. Среди них — селекторы. Селекторы jQuery указывают программе, с какими элементами вы хотите работать или какие элементы нужно «выбрать». Они очень похожи на селекторы, которые вы используете в CSS. Вот базовый формат доступа к селектору в jQuery:
|
1 |
$("selector") |
Вы можете использовать строки в одинарных или двойных кавычках, хотя руководство по стилю jQuery предпочитает последнее. При желании вы можете просмотреть полный список селекторов jQuery на этой официальной странице. К вашему сведению, вот некоторые из наиболее часто используемых селекторов:
-
$("*")
Это универсальный селектор (Wildcard). Он выберет каждый элемент на вашей странице.
-
$(this)
Это текущий селектор (Current). Он выбирает элемент, с которым вы в данный момент работаете с помощью функции.
-
$("p")
Это селектор тегов (Tag). Он выбирает каждый экземпляр тега <p>.
-
$(".example")
Это селектор классов (Class). Он выберет абсолютно каждый элемент, к которому применен класс example.
-
$("#example")
Это селектор идентификаторов (Id). Он выбирает только один экземпляр с идентификатором example.
-
$("[type='text']")
Это селектор атрибутов (Attribute). Он выберет любой элемент с атрибутом text, примененным к type атрибуту.
-
$("p:first-of-type")
Это селектор псевдоэлементов (Pseudo Element). Он помогает выбрать первый <p>.
Что такое события?
Некоторые элементы веб-страницы загружаются сразу после загрузки страницы. Рассмотрим пример «Hello, World». В этом случае мы могли бы добавить код непосредственно в исходный HTML. Но что происходит, когда для загрузки функции требуется взаимодействие с пользователем? Именно здесь jQuery становится полезным.
Допустим, мы хотим, чтобы после нажатия пользователем кнопки появлялся некоторый текст. Чтобы добавить эту функцию, вам нужно добавить элемент <button> в файл index.html. Эта кнопка будет ожидать «события» клика:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Click me</button> <p id="demo"></p> |
Любое взаимодействие пользователя с браузером считается событием. Взаимодействие может осуществляться с помощью указателя мыши или клавиатуры. В приведенном выше примере событием является нажатие кнопки. Вот почему оно называется событием клика (click event).
Далее нам нужно вызвать функцию, содержащую код «Hello, World». Для этого мы будем использовать метод click():
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
Как видите, идентификатор (ID) нашего элемента <button> имеет имя trigger. Мы можем выбрать его с помощью $(“#trigger"). Цель добавления метода click() заключается в том, чтобы заставить программу ожидать события клика. Далее мы поместим функцию с кодом текста внутрь метода:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
В итоге наш код будет выглядеть примерно так:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
Теперь вы можете сохранить файл script.js файл. Обновите index.html в браузере, чтобы применить изменения. После нажатия кнопки появится тестовый вывод «Hello, World!».
Существуют и другие типы событий jQuery, помимо click. Вы можете просмотреть полный список этих методов событий в этом официальном документе. Вот некоторые из наиболее часто используемых, с которыми вы можете время от времени сталкиваться:
-
click()
Событие click выполняет код при одиночном щелчке мыши.
-
hover()
Событие hover выполняет код, когда указатель мыши наводится на элемент. Вы также можете указать, запускается ли код при входе или выходе указателя мыши с помощью mouseenter() и mouseleave() соответственно.
-
submit()
Отправка формы запускает выполнение кода.
-
scroll()
Прокрутка экрана вниз будет событием, которое запускает выполнение кода.
-
keydown()
Нажатие клавиши на клавиатуре приведет к выполнению кода.
Что такое эффекты?
Эффекты jQuery работают вместе с событиями jQuery. Основная цель эффектов, как следует из названия, — добавление анимации на страницу. Это позволяет вам манипулировать элементами для применения различных видов эффектов. Эти эффекты могут запускаться определенными событиями.
Чтобы лучше понять, рассмотрим пример. Допустим, мы хотим открывать и закрывать всплывающий оверлей. Один из способов сделать это — использовать два разных ID. Один будет открывать оверлей, а другой — закрывать его. Другой способ — использовать для этого класс. Преимущество использования класса заключается в том, что одна и та же функция может открывать и закрывать оверлей.
Откройте ваш index.html файл. Затем удалите теги <button> и <p> из body. Теперь добавьте следующие строки кода в HTML:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Open</button> <section class="overlay"> <button class="trigger">Close</button> </section> ... |
Давайте теперь посмотрим на наш файл style.css. Здесь наша цель — использовать минимум CSS, чтобы скрыть оверлей. Для этого мы будем использовать display: none и центрировать его следующим образом:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
Далее мы будем использовать метод toggle(). Этот метод позволит нам переключать свойство display между значениями none и block. Таким образом, оверлей будет скрываться и показываться при каждом клике. Добавьте этот код в файл script.js файл:
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
Наконец, обновите index.html, чтобы применить изменения. Теперь вы сможете переключать видимость модального окна. Все, что вам нужно сделать, это нажать на кнопки. Существуют и другие эффекты jQuery, которые вы можете использовать в сочетании с этим. Например, вы можете изменить простой toggle() на slideToggle() или fadeToggle().
Ниже приведены некоторые из наиболее часто используемых методов эффектов в jQuery:
-
toggle()
Этот метод позволяет изменять видимость элемента. Связанные с ним односторонние эффекты — это show() и hide().
-
fadeToggle()
Этот метод позволяет переключать видимость и непрозрачность элемента с помощью анимации. Односторонними эффектами в данном случае являются fadeIn() и fadeOut().
-
slideToggle()
Этот метод позволяет использовать эффекты скольжения для переключения видимости элемента. Односторонними эффектами в данном случае являются slideUp() и slideDown().
-
animate()
Этот метод эффекта позволяет выполнять пользовательские анимационные эффекты. Он использует CSS-свойство данного элемента.
Заключение
Надеемся, это руководство помогло вам получить подробное представление о jQuery. Это невероятно полезный инструмент, который значительно облегчает веб-разработку и написание кода. Особенно это актуально, если вы относительно недавно в мире программирования.
Мы изучили различные элементы, составляющие основы jQuery. Мы также узнали, как выбирать и изменять эти элементы, а также как эффективно использовать события и эффекты. Освоение таких инструментов, как jQuery, поможет вам создавать веб-сайты, наполненные интерактивными функциями, обеспечивающими увлекательный пользовательский опыт.
Ознакомьтесь с некоторыми ресурсами из нашего блога, которые помогут вам при работе с JavaScript:
- Руководство по добавлению JavaScript в HTML
- Работа с JavaScript: как работают классы
- Работа с JavaScript: как работают прототипы и наследование
Приятного программирования!
Комментарии
Комментариев пока нет. Будьте первым.