Основы jQuery

17 марта, 2017 12:33 пп 4 247 views | Комментариев нет

| | Комментировать запись

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 в веб-проект;
  • Определения важных понятий веб-разработки (API, DOM и CDN).
  • Общие селекторы, события и эффекты jQuery.
  • Примеры использования jQuery.

Требования

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

Установка и настройка 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, хотя одинарные кавычки также часто используются.

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

  • $(“*”): Wildcard, выбирает все элементы страницы.
  • $(this): Current, выбирает текущий элемент.
  • $(“p”): Tag, выбирает каждый экземпляр тега <p>.
  • $(“.example”): Class, выбирает каждый элемент класса example.
  • $(“#example”): ID, выбирает один экземпляр уникального ID example.
  • $(“[type=’text’]”): Attribute, выбирает любой элемент с text атрибута type.
  • $(“p:first-of-type”): Pseudo Element, выбирает первый тег <p>.

Обычно используются селекторы класса (чтобы выбрать несколько элементов) и 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. Ниже перечислены наиболее популярные события:

  • click(): прослушивает клики на странице.
  • hover(): выполняет действие при наведении курсора на элемент. Методы mouseenter() и mouseleave() относятся только к перемещениям курсора с помощью мыши (навести и отвести курсор соответственно).
  • submit(): выполняется при заполнении формы.
  • scroll(): выполняется при прокрутке экрана.
  • keydown():выполняется при нажатии кнопки на клавиатуре.

Чтобы изображения двигались или исчезали при прокрутке экрана, используйте 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().

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

  • toggle(): управляет видимостью элемента; с ним связаны эффекты show() и hide().
  • fadeToggle(): управляет видимостью элемента с помощью прозрачности/непрозрачности; к нему относятся эффекты fadeIn() и fadeOut().
  • slideToggle(): управляет видимостью элемента с помощью эффекта скольжения; с ним связаны slideDown() и slideUp().
  • animate(): пользовательские эффекты анимации.

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

Tags: , , ,

Добавить комментарий