Введение в JQuery

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

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

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

JavaScript

document.getElementById("demo").innerHTML = "Привет, мир!";

Jquery

$("#demo").html("Привет, мир!");

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

Цели

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

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

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

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

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

Предпосылки

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

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

Понимание основ программирования. В то время как можно начать писать JQuery без передовых знаний JavaScript, знакомство с понятиями переменных и типов данных , а также математики и логики существенно поможет.

Настройка Jquery

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

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

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

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

Мы будем использовать CDN, чтобы ссылаться на Jquery в наших примерах. Вы можете найти последнюю версию JQuery в библиотеке компании Google . Если вместо этого вы хотите загрузить его, вы можете получить копию 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="ru">

<head>
  <title>Демо jQuery</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

</html>

Ссылка на файл JQuery CDN перед закрывающим тегом </body>, а затем свой собственный файл JavaScript, scripts.js.

index.html

<!doctype html>
<html lang="ru">

<head>
  <title>Демо jQuery</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

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

Объектная модель документа (DOM) является метод, с помощью которого JavaScript (и JQuery) взаимодействуют с HTML в браузере. Для просмотра именно того, что DOM является, в вашем веб — браузере, щелкните правой кнопкой мыши на текущей веб — странице выберите Inspect. Это откроет Инструменты разработчика. HTML код, который Вы видите здесь DOM.

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

Если вы щелкните правой кнопкой мыши на сайте снова и нажмите View Page Source, вы увидите необработанный HTML вывод веб — сайта. Легко сначала запутать DOM с источником HTML, но они разные — исходная страница именно то, что написано в HTML — файле. Это является статическим и не будет меняться, и не будет зависеть от JavaScript. DOM является динамическим, и может измениться.

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

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

JS/scripts.js

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

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

Во введении этой статьи, вы видели простой скрипт «Привет, мир!». Для того, чтобы инициировать этот сценарий и печать текста в браузере с JQuery, сначала мы создадим пустой абзац элемента уровня блока с идентификатором demo, приложенного к нему.

index.html

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

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

$("selector").method();

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

Теперь мы собираемся поставить наш пример «Привет, мир!» внутри Jquery ready(). Добавьте эту строку в файл scripts.js в пределах существующей функции:

js/scripts.js

$(document).ready(function() {
    $("#demo").html("Привет, мир!");
});

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

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

Селекторы

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

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

$("selector")

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

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

$("*")— Джокер: выбирает каждый элемент на странице.

$(this)— Ток: выбирает текущий элемент эксплуатирующийся на внутри функции.

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

$(".example")— Класс: выбирает каждый элемент, который имеет класс example, примененных к нему.

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

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

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

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

События Jquery

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

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

index.html

...
<body>

<button id="trigger">Кликни по мне</button>
<p id="demo"></p>

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

JS/scripts.js

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

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

function() {
    $("#demo").html("Привет, мир!");
}

Вот окончательный код.

JS/scripts.js

$(document).ready(function() {
    $("#trigger").click(function() {
    $("#demo").html("Привет, мир!");
    });
});

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

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

click()— Нажмите: выполняется при нажатии кнопки мыши.

hover()— Hover: выполняется, когда мышь зависает над элементом. mouseenter() и mouseleave()применяются только при появлении мыши на элементе или оставляет элемент.

submit()— Отправить: выполняется, когда форма была отправлена.

scroll()— Свиток: выполняется, когда на экране прокручивается.

keydown()— KeyDown: выполняется при нажатии вниз на клавиши на клавиатуре.

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

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

Эффекты JQuery

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

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

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

index.html

...
<body>
<button class="trigger">Открыть</button>

<section class="overlay">
  <button class="trigger">Закрыть</button>
</section>
...

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

css/style.css

.overlay {
  display: none;
  position: fixed;
  top: 45%;
  left: 45%;
  transform: translate(-45%, -45%);
  height: 210px;
  width: 150px;
  background: blue;
}

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

JS / scripts.js

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

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

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

toggle()— Переключение: переключает видимость элемента или элементов. show()и hide()являются соответствующие эффекты в одну сторону.

fadeToggle()— Fade Переключение: переключает видимость и одушевляет непрозрачность элемента или элементов. fadeIn() и fadeOut() являются соответствующие эффекты в одну сторону.

slideToggle()— Slide Переключение переключает видимость элемента или элементов со скользящим эффектом. slideDown() и slideUp() являются соответствующие эффекты в одну сторону.

animate()— Анимация выполняет пользовательские эффекты анимации на CSS свойство элемента.

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

Вывод

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

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

2017-02-11T00:54:35

Лучшие учебники по Wodpress

ReadMag.ru

рецепты по настройке программного обеспечения

Введение в JQuery

Цели

Предпосылки

Настройка Jquery

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

Селекторы

События Jquery

Эффекты JQuery

Вывод