Последние новости:

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

Многие люди подобны колбасам: чем их начинят, то и носят в себе (К. Прутков).

Введение в JQuery3 мин для чтения

FavoriteLoadingДобавить в избранное
11.02.2017
Введение в 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 в документе или он не будет работать.

Читать  Nginx. Перенаправление ошибки 404 на главную страницу в WordPress

Примечание
Если вы загрузили локальную копию 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("Привет, мир!");
});

 

Читать  Извлечение подузла из многоузловой сети с помощью WP-CLI и Bash

После того как вы сохранили файл, вы можете открыть файл 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: выполняется при нажатии вниз на клавиши на клавиатуре.
Читать  Как создать виджет на приборной панели в WordPress

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Поделиться в соц. сетях:

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Это может быть вам интересно

Статьи партнеров:

Рекомендуемое
Всегда нужно делать полный тест вашей темы WordPress, прежде чем…
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить

Спасибо! Ваша заявка принята

close

Спасибо! Ваша заявка принята

close