Введение в jQuery

Введение

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

JQuery имеет дополнительное преимущество — кроссбраузерную совместимость. Можете быть уверены, что ваш код будет интерпретироваться в любом современном браузере.

Сравнив написание простой программы «Hello, World!» с помощью JavaScript и jQuery, можно увидеть разницу между ними.

JavaScriptdocument.getElementById("demo").innerHTML = "Hello, World!";JQuery$("#demo").html("Hello, World!");

Этот короткий пример иллюстрирует, как с помощью jQuery можно получить тот же результат, что и с помощью стандартного JavaScript, но более кратко.

Цели

Данное руководство не предполагает наличие базовых познаний в jQuery, оно охватывает следующие темы:

  • Как установить jQuery в веб-проекте;
  • Определение важных концепций веб-разработки, таких как API, DOM и CDN;
  • Общие селекторы, события и эффекты jQuery;
  • Примеры для проверки концепций, изученных в рамках этой статьи.

Настройка jQuery

JQuery — это файл JavaScript, на который вы будете ссылаться в документе. Как подключить JQuery в HTML:

  • Скачать локальную копию;
  • Добавить ссылку на файл через сеть доставки контента (CDN).

Примечание. Сеть доставки контента (CDN) представляет собой систему из нескольких серверов, которые предоставляют пользователю веб-контент в зависимости от его географического положения. Когда вы добавляете ссылку на файл jQuery через CDN, он будет предоставлен пользователю быстрее и эффективнее, чем в случае его размещения на собственном сервере.

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

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

Введение в jQuery

Задайте основную HTML-разметку и сохраните ее в index.html.

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

Ссылка на jQuery в HTML CDN размещается непосредственно перед тегом </body>. За ней мы размещаем ссылку на JavaScript-файл scripts.js.

Index.html<!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 добавлена в HTML, и у нас есть полный доступ к API jQuery.

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

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

Объектная модель документа (DOM) — это метод, с помощью которого JavaScript (и jQuery) взаимодействуют с HTML в браузере. Чтобы увидеть, что собой представляет DOM, в браузере кликните правой кнопкой мыши на текущей веб-странице и выберите пункт «Просмотреть код«. В результате откроется панель «Инструментов для разработчиков«. HTML-код, который вы увидите в ней, это и есть DOM.

Каждый элемент HTML считается узлом DOM — объектом, к которому может обратиться JavaScript. Эти объекты имеют древовидную структуру, в которой элемент <html> является ближайшим к корню, а каждый — ветвью дерева. JavaScript может добавлять, удалять и изменять любые из этих элементов.

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

Внешний слой DOM, который обертывает весь узел <html>, является объектом документа. Чтобы использовать на странице jQuery, нужно убедиться, что документ «готов».

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

js/scripts.js$(document).ready(function() {
// здесь будет размещаться весь пользовательский код jQuery
});

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

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

Index.html

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

JQuery вызывается и обозначается знаком доллара ($). Мы обращаемся к DOM с помощью jQuery, используя синтаксис CSS, и применяем действие с помощью method:

$("selector").method();

Так как идентификатор в CSS обозначается символом (#), мы получаем доступ к идентификатору demo с помощью селектора #demo. html() — метод, который изменяет HTML-разметку внутри элемента.

Теперь мы поместим программу «Hello, World!» внутрь оболочки jQuery ready(). Добавьте эту строку в существующую функцию в файле scripts.js:

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

После сохранения изменений можно открыть в браузере файл index.html. Если все работает правильно, то вы увидите надпись «Hello, World!«

Кликните правой кнопкой мыши по надписи «Hello, World!» и выберите пункт «Просмотреть код«. Теперь в DOM отображается <p id="demo">Hello, World!</p>. Если вы просмотрите исходный код страницы, то увидите только <p id="demo"></p>, исходный HTML-код, который мы написали.

Селекторы

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

Чтобы получить доступ к селектору, используйте символ $, за которым следуют круглые скобки ().

$("селектор")

Строки с двойными кавычками являются предпочтительными (согласно руководству jQuery). Хотя часто используются и строки с одиночными кавычками.

Ниже приведен краткий обзор часто используемых селекторов.

  • $(«*») — подстановочный знак: выбирает каждый элемент на странице;
  • $(this) — текущий: выбирает текущий элемент, управляемый в данный момент внутри функции;
  • $(«p») — тег: выбирает все экземпляры тега <p>;
  • $(«.example») — класс: выбирает все элементы, к которым применяется класс example;
  • $(«#example») — идентификатор: выбирает один экземпляр с уникальным идентификатором example;
  • $(«[type=’text’]») — атрибут: выбирает все элементы, в атрибуте type которых задано значение text;
  • $(«p:first-of-type») — псевдоэлемент: выбирает первый элемент <p>.

При подключении JQuery к HTML вы будете иметь дело с классами и идентификаторами. Классы используются, когда нужно выбрать несколько элементов, а идентификаторы — когда только один.

События jQuery

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

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

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

Мы используем метод click() для вызова функции, содержащей код «Hello, World!».

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

Иидентификатор элемента — trigger, мы выбираем его с помощью $(«#trigger»). Добавив click(), мы отслеживаем событие клика. Далее мы вызываем функцию, которая содержит наш код внутри метода click().

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

Вот полный код JQuery HTML элемента.

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

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

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

  • click() — клик: происходит при одиночном клике мыши;
  • hover() — наведение курсора: происходит при наведении указателя мыши на элемент;
  • submit() — отправка: происходит при отправке данных формы;
  • scroll() — прокрутка: происходит при прокрутке страницы или элемента;
  • keydown() — нажатие клавиши: происходит при нажатии на клавишу на клавиатуре.

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

Чтобы выйти из меню с помощью клавиши ESC, используется метод keydown(). Чтобы создать выпадающее меню или с помощью JQuery добавить HTML в div, используется метод click().

Эффекты jQuery

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

В следующем примере мы создадим всплывающее и скрывающееся окно. Мы могли бы использовать два идентификатора — один для открытия окна, а второй для его закрытия, но применим класс для открытия и закрытия окна с помощью той же функции.

Удалите существующие теги <button> и <p> из файла index.html и добавьте следующий код:

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

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

css/style.css.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 и наоборот, скрывая и выводя окно при нажатии мыши.

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

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

Ниже приведен перечень часто используемых эффектов:

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

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

Заключение

Из этого руководства вы узнали, как выбирать элементы jQuery HTML и управлять ими, а также как работают события и эффекты, чтобы создать для пользователя интерактивный веб-интерфейс.

Перевод статьи «An Introduction to jQuery» дружной командой проекта Сайтостроение от А до Я.

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

Определение типа данных double в C, C++ и C#

Double – 64-разрядная переменная с плавающей запятой Тип double — это основной тип данных, который ...