Поиск по сайту:

Введение в jQuery

Введение

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

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

Это руководство предполагает отсутствие предварительных знаний о jQuery. Вы пройдете установку jQuery в веб-проекте. Важные концепции веб-разработки, такие как API, DOM и CDN, будут определены в отношении jQuery. Когда у вас будет эта база знаний и установлен jQuery, вы научитесь использовать общие селекторы, события и эффекты.

Предпосылки

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

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

Настройка jQuery

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

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

CDN будет использоваться для ссылки на jQuery здесь в примерах. Вы можете найти последнюю версию 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 прямо перед закрывающим тегом , за которым следует ваш собственный файл 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 загружается на ваш сайт, и у вас есть полный доступ к API jQuery.

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

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

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

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

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

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

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

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

Если вы снова щелкните сайт правой кнопкой мыши и выберите «Просмотреть исходный код страницы», вы увидите исходный 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:

...
<body>

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

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

$("selector").method();

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

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

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

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

Если раньше вас смущал DOM, теперь вы можете увидеть его в действии. Щелкните правой кнопкой мыши на \Hello, World! текст на странице и выберите «Проверить элемент». Теперь DOM будет отображать

Hello, World!

. Если вы \Просмотр исходного кода страницы, вы увидите только

, необработанный HTML-код, который вы написали.

Селекторы

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

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

$("selector")

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

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

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

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

jQuery-события

В разделе «Привет, мир!» Например, код запускался, как только страница загружалась и документ был готов, и, следовательно, не требовал вмешательства пользователя. В этом случае вы могли бы написать текст прямо в 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> имеет идентификатор с именем 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! появится текст.

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

  • click() Щелчок: выполняется одним щелчком мыши.
  • hover() Наведение: выполняется при наведении указателя мыши на элемент. mouseenter() и mouseleave() применяются только к входу или выходу мыши из элемента соответственно.
  • submit() Отправить: выполняется при отправке формы.
  • scroll() Прокрутка: выполняется при прокрутке экрана.
  • keydown() Keydown: выполняется, когда вы нажимаете клавишу на клавиатуре.

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

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

JQuery-эффекты

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

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

Удалите текущие теги <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() на fadeToggle() или slideToggle(), чтобы увидеть несколько других встроенных эффектов jQuery.

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

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

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

Заключение

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

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