Site icon 8HOST.COM

Основы jQuery

Amber

HTML, CSS и JavaScript – три основных языка в Интернете. Сайты структурируются в HTML, в CSS разрабатываются стили, а JavaScript позволяет добавить интерактивные функции. Большая часть анимации и любые действия, которые происходят в результате кликов или прокрутки, также созданы в JavaScript.

jQuery – это библиотека JavaScript, основанная на принципе «пиши меньше, делай больше». Это не язык программирования, а инструмент, который упрощает написание общих задач JavaScript. Кроме того, jQuery обладает кроссбраузерной совместимостью, а значит, вы можете быть уверены в том, что любой современный браузер корректно отобразит вывод программы.

Сравните код простого приложения «Hello, World» в JavaScript и jQuery:

#JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";
#jQuery
$("#demo").html("Hello, World!");

Как видите, jQuery позволяет достичь того же результата гораздо быстрее.

Данное руководство охватывает основы работы с jQuery, а именно такие темы:

Требования

Установка и настройка jQuery

jQuery – это файл JavaScript, на который можно сослаться в HTML-файле. Добавить jQuery в проект можно двумя способами:

Примечание: Сеть доставки контента (Content Delivery Network, CDN) – это система серверов, которая обслуживает веб-контент на основе географического положения пользователя. Файл jQuery по CDN будет обслуживаться быстрее и эффективнее, чем файл, размещённый на сервере вместе с остальными компонентами приложения.

Ниже показано, как сослаться на jQuery в CDN. Найти последнюю версию jQuery можно здесь. Если же вы все же хотите загрузить jQuery на сервер, скопируйте пакет с официального сайта.

Для начала создайте простой веб-проект. Он будет включать в себя файл style.css в каталоге css/, scripts.js в js/ и index.html в корневом каталоге проекта.

project/
├── css/
|   └── style.css
├── js/
|   └── scripts.js
└── index.html

Создайте простой HTML-файл и назовите его index.html.

<!doctype html>
<html lang="en">
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

Сошлитесь на CDN jQuery перед тем, как закрыть тег </body>, и укажите свой пользовательский файл JavaScript, scripts.js.

<!doctype html>
<html lang="en">
<head>
<title>jQuery Demo</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/scripts.js"></script>
</body>
</html>

Файл JavaScript scripts.js нужно добавить под библиотекой jQuery, или же он не будет работать.

Примечание: Если вы используете локальную копию пакета jQuery, сохраните её в каталоге js/ и сошлитесь на неё в js/jquery.min.js.

Теперь библиотека jQuery загружена на сайт, а у вас есть полный доступ к jQuery API.

Примечание: Интерфейс прикладного программирования (Application Programming Interface, или API) – это интерфейс, который позволяет программам взаимодействовать друг с другом. API JQuery содержит всю необходимую информацию и документацию, необходимую для доступа к JQuery.

Использование jQuery

В общих чертах, jQuery используется для соединения с HTML-элементами в браузере с помощью DOM.

Document Object Model (DOM) – это метод, с помощью которого JavaScript (и JQuery) взаимодействует с HTML в браузере. Чтобы понять, что такое DOM, щелкните правой кнопкой мыши по текущей веб-странице и выберите Inspect, это откроет инструменты разработчика. Здесь вы увидите HTML код – это и есть DOM.

Каждый HTML-элемент в DOM считается нодой – это объект, с которым может взаимодействовать JavaScript.

Эти объекты расположены в виде древовидной структуры, где каждый вложенный элемент является ветвью, а <html> – корнем. JavaScript может добавлять, удалять и изменять такие элементы.

Снова кликните правой кнопкой мыши и выберите View Page Source. Вы увидите неформатированный HTML-вывод сайта. Сначала можно легко спутать DOM с исходным HTML-кодом, но они отличаются. Исходный код страницы – это тот же код, что написан в файле HTML. Он статичен, не изменяется, JavaScript не влияет на него. DOM динамичен и может меняться.

Наружный уровень DOM, нода <html>, является объектом document. Чтобы начать управлять страницей с помощью JQuery, сначала нужно обеспечить этот уровень.

Создайте файл scripts.js в каталоге js/ и добавьте в него код:

$(document).ready(function() {
// all custom jQuery will go here
});

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

Во вступительной части статьи вы видели пример сценария Hello, World!. Чтобы инициировать этот сценарий и вывести фразу в браузере с помощью jQuery, создайте пустой блок и присвойте ему идентификатор demo. Поместите в index.html:

...
<body>
<p id="demo"></p>
...

jQuery вызывается и представляется с помощью символа доллара, $. Доступ к DOM jQuery обычно получает с помощью синтаксиса CSS, действие определяется методом. Базовый синтаксис jQuery выглядит так:

$("selector").method();

В CSS ID представляется с помощью символа #; получить доступ к ID demo можно с помощью селектора #demo.

html() – это метод, который изменяет HTML внутри элемента.

Теперь нужно поместить программу «Hello, World» в функцию ready(). Добавьте в scripts.js такую строку:

$(document).ready(function() {
$("#demo").html("Hello, World!");
});

Сохраните файл, а затем откройте файл index.html в браузере. Если все настройки выполнены правильно, вы увидите на экране:

Hello, World!

Если вы спутали DOM, сейчас вы об этом узнаете. Кликните правой кнопкой мыши по тексту «Hello, World!» и выберите Inspect Element. DOM будет отображать:

<p id="demo">Hello, World!</p>

Выберите View Page Source, и вы увидите только:

<p id="demo"></p>

то есть неформатированный HTML.

Селекторы

Селекторы сообщают jQuery, с каким элементом нужно работать. Большинство селекторов jQuery похожи на CSS, но все же они имеют некоторые особенности. Полный список селекторов jQuery можно найти в документации.

Чтобы получить доступ к селектору, используйте символ jQuery, $, и круглые скобки:

$("selector")

Двойные кавычки рекомендуется использовать в jQuery style guide, хотя одинарные кавычки также часто используются.

Ниже перечислены некоторые популярные селекторы:

Обычно используются селекторы класса (чтобы выбрать несколько элементов) и id (чтобы выбрать всего один элемент).

События jQuery

В программе «Hello, World!»2 код запустился как только загрузилась страница и был готов документ, потому она не нуждается во взаимодействии с пользователем. В этом случае написать текст можно было непосредственно в HTML, не применяя JQuery. Однако JQuery нужно использовать, чтобы настроить появление текста после нажатия кнопки.

Вернитесь в файл index.html и добавьте элемент <button>, который будет отслеживать клики на странице.

...
<body>
<button id="trigger">Click me</button>
<p id="demo"></p>

С помощью метода click() вызовите функцию с кодом «Hello, World!».

$(document).ready(function() {
$("#trigger").click();
});

Элементу <button> присвоен ID trigger, который выбирается при помощи селектора $(“#trigger”). С помощью метода click() элемент будет прослушивать клики. Теперь нужно реализовать внутри click() функцию, которая содержит код.

function() {
$("#demo").html("Hello, World!");
}

В результате получится такой код:

$(document).ready(function() {
$("#trigger").click(function() {
$("#demo").html("Hello, World!");
});
});

Сохраните файл scripts.js и обновите index.html в браузере. Кликните мышью, и только тогда появится текст «Hello, World!».

Событие – это любое взаимодействие пользователя с браузером (обычно с помощью мыши или клавиатуры). В данном случае событием был клик мыши. Полный список методов событий можно найти в документации jQuery. Ниже перечислены наиболее популярные события:

Чтобы изображения двигались или исчезали при прокрутке экрана, используйте scroll(). Чтобы закрыть меню с помощью кнопки Esc, используйте keydown(). Чтобы добавить выпадающее меню, используйте click().

Разобравшись с событиями, вы сможете создавать динамический контент для сайта.

Эффекты jQuery

Эффекты jQuery часто работают вместе с событиями и позволяют добавлять анимацию и иным образом управлять элементами на странице.

Для примера создайте наплывающий элемент, который можно закрывать и открывать. Для этого можно использовать два ID (один, чтобы открыть, а второй – чтобы закрыть элемент). Но мы используем для этого класс.

Удалите теги <button> и <p> из тела файла index.html, затем добавьте в документ HTML:

...
<body>
<button class="trigger">Open</button>
<section class="overlay">
<button class="trigger">Close</button>
</section>
...

В файле style.css используйте CSS, чтобы спрятать элемент overlay с помощью display: none и поместить его в центре экрана.

.overlay {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
background: gray;
}

Вернитесь в файл scripts.js и используйте метод toggle(), который будет включать и отключать свойство CSS display (переключать none и block), скрывая и отображая наплывающий элемент при клике.

$(document).ready(function() {
$(".trigger").click(function() {
$(".overlay").toggle();
});
});

Обновите index.html. Теперь вы можете управлять наплывающим элементом, кликая по кнопкам. Вместо toggle() вы можете использовать другие встроенные элементы jQuery, например, fadeToggle() или slideToggle().

Вот краткий список популярных эффектов:

События jQuery прослушивают взаимодействие пользователя с сайтом, а эффекты jQuery управляют элементами, если указанное действие происходит.