TOC

Введение в jQuery

Вступление

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

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

Сравнивая простую программу «Hello, World!» На JavaScript и jQuery, мы видим разницу в том, как они написаны.

JavaScript

document.getElementById("demo").innerHTML = "Hello, World!";

JQuery

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

Этот короткий пример демонстрирует, как jQuery может получить тот же конечный результат, что и простой JavaScript, в сжатой форме.

цели

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

  • Как установить jQuery в веб-проект.

  • Определения важных концепций веб-разработки, таких как API, DOM и CDN.

  • Общие селекторы jQuery, события и эффекты.

  • Примеры для проверки понятий, изученных на протяжении всей статьи.

Предпосылки

Прежде чем начать это руководство, вам понадобится следующее:

  • Базовые знания HTML и CSS. Вы уже должны знать, как настроить простой веб-сайт, и понимать CSS-селекторы, такие как идентификаторы, классы и псевдоэлементы.

  • Понимание основ программирования. Хотя можно начать писать jQuery без углубленного знания JavaScript, знакомство с понятиями variables и datatypes, а также https: // www. taniarascia.com/javascript-day-two/[math and logic] поможет значительно.

Настройка jQuery

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

  • Загрузите локальную копию.

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

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

Мы начнем это упражнение с создания небольшого веб-проекта. Он будет состоять из + style.css + в каталоге + css / +, + scripts.js + в каталоге + js / + и основного + index.html + в корне проект.

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

Для начала создайте HTML-скелет и сохраните его как + index.html.

index.html

<!doctype html>
<html lang="en">

<head>
 <title>jQuery Demo</title>
 <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

</html>

Ссылка на jQuery 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>



</body>

</html>

Ваш файл JavaScript (+ scripts.js +) должен быть включен below в библиотеку jQuery в документе, иначе он не будет работать.

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

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

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

Https://www.digitalocean.com/community/tutorials/introduction-to-the-dom[*Document Object Model * (DOM)] - это метод, с помощью которого JavaScript (и jQuery) взаимодействуют с HTML в браузере. Чтобы точно узнать, что такое DOM, в вашем веб-браузере щелкните правой кнопкой мыши текущую веб-страницу и выберите * Inspect *. Это откроет Инструменты разработчика. Код HTML, который вы видите здесь, является DOM.

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

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

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

Создайте файл + scripts.js + в вашем каталоге + js / + и введите следующий код:

JS / scripts.js

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

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

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

index.html

...
<body>


...

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

$("selector").method();

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

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

JS / scripts.js

$(document).ready(function() {

});

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

Если вы были сбиты с толку DOM раньше, вы можете увидеть это в действии сейчас. Щелкните правой кнопкой мыши на тексте «Hello, World!» На странице и выберите * Inspect Element *. DOM теперь будет отображать + <p id =" demo "> Hello, World! </ P> +. Если вы * Просмотреть исходный код страницы *, вы увидите только + <p id =" demo "> </ p> +, необработанный HTML, который мы написали.

Селекторы

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

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

$("selector")

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

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

  • + $ (" * ") + - * Подстановочный знак: * выбирает каждый элемент на странице.

  • + $ (this) + - * Current: * выбирает текущий элемент, над которым работает функция.

  • + $ (" p ") + - * Tag: * выбирает каждый экземпляр тега + <p> +.

  • + $ (". example ") + - * Class: * выбирает элемент every, к которому применен класс + example +.

  • + $ (" # example ") + - * Id: * выбирает один экземпляр уникального + example + id.

  • + $ (" [type = 'text'] ") + - * Атрибут: * выбирает любой элемент с + text +, примененным к атрибуту + type +.

  • + $ (" p: first-of-type ") + - * Псевдоэлемент: * выбирает первый + <p> +.

Как правило, классы и идентификаторы - это то, с чем вы столкнетесь чаще всего - классы, когда вы хотите выбрать несколько элементов, и идентификаторы, когда вы хотите выбрать только один.

События jQuery

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

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

index.html

...
<body>


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

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

JS / scripts.js

$(document).ready(function() {

});

Наш элемент + <button> + имеет идентификатор, называемый + trigger +, который мы выбираем с помощью + $ (" # trigger ") +. Добавляя + click () +, мы говорим ему прослушивать событие click, но мы еще не закончили. Теперь мы вызовем функцию, которая содержит наш код, внутри метода + click () +.

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

Вот последний код.

JS / scripts.js

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


});

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

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

  • + click () + - * Click: * выполняется одним щелчком мыши.

  • + hover () + - * Hover: * выполняется, когда мышь наведена на элемент. + mouseenter () + и + mouseleave () + применяются только к мыши, входящей или выходящей из элемента, соответственно.

  • + submit () + - * Submit: * выполняется при отправке формы.

  • + scroll () + - * Scroll: * выполняется при прокрутке экрана.

  • + keydown () + - * Keydown: * выполняется, когда вы нажимаете клавишу на клавиатуре.

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

Понимание событий имеет важное значение для создания динамического содержимого веб-сайта с помощью jQuery.

jQuery Effects

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

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

Удалите текущие теги + <button> + и + <p> + в теле вашего файла + index.html и добавьте следующее в ваш HTML-документ:

index.html

...
<body>





...

В нашем файле + 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() {



});

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

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

  • + toggle () + - * Toggle: * переключает видимость элемента или элементов. + show () + и + hide () + - это односторонние эффекты.

  • + fadeToggle () + - * Fade Toggle: * переключает видимость и анимирует непрозрачность элемента или элементов. + fadeIn () + и + fadeOut () + - это односторонние эффекты.

  • + slideToggle () + - * Slide Toggle * переключает видимость элемента или элементов с эффектом скольжения. + slideDown () + и + slideUp () + - это односторонние эффекты.

  • + animate () + - * Animate * выполняет пользовательские эффекты анимации для свойства CSS элемента.

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

Заключение

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

Отсюда вы должны глубже понять возможности jQuery и быть на пути к написанию собственного кода.

Related