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

Прочитайте статью или посмотрите видео!

JQuery — это библиотека, содержащая множество методов, упрощающих работу с HTML-документами, добавление анимации и многое другое. Поскольку JQuery — это библиотека, у нее есть API, который мы можем использовать для доступа к ее функциям.

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

Давайте нажмем на метод .addClass() и посмотрим, что он делает.

Скажем, у нас есть класс с именем blue, элементы которого имеют синий текст. Мы могли бы использовать метод .addClass() и добавить синий класс ко всем элементам p с чем-то подобным, где у нас будет $(“p”).addClass(“ синий"). Сейчас это может сбивать с толку, но не волнуйтесь, мы во всем разберемся.

Для начала нам нужно создать файлы index.html и script.js. Мы также поместим файл script.js в папку с именем js, а затем свяжем наш файл script.js с нашим файлом index.html. Это должно выглядеть довольно знакомо, так как мы делали это в других уроках.

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

Не забудьте добавить его над нашей ссылкой script.js, потому что нам нужно будет использовать jQuery в этом файле. С нашим jQuery мы добавим одну строку кода HTML, заголовок. Мы добавим стиль, чтобы поместить его в центр страницы и придать ему белый цвет текста. Мы также можем присвоить ему id hidden, и в заголовке будет написано «Я был скрыт!».

Теперь, когда мы обновим страницу, мы увидим, что текст заголовка есть, но мы не сможем его увидеть, пока не выделим его.

С помощью jQuery и CSS мы могли бы сделать так, чтобы при наведении курсора на него текст заголовка становился черным. Для этого мы зайдем в наш файл script.js и напишем код.

Здесь функция ready гарантирует, что DOM (на данный момент наши элементы HTML) загружены. Как только они загружены, мы выбираем наш элемент со скрытым идентификатором и вызываем для него функции наведения. Это означает, что когда мы наводим курсор на элемент, будет запущена функция в строках 2–4. Функция выберет элемент "this" (элемент со скрытым идентификатором), а в CSS элемента для свойства color будет установлено значение black. Вы можете сделать это для любого элемента, идентификатора или класса и установить для любого свойства любое значение. Затем у нас есть функция обратного вызова в строках 5–6, и это то, что вам нужно написать, даже если вы ее не используете. Мы пока оставим его пустым и вернемся к нему позже.

Теперь, когда мы обновляем страницу и наводим курсор на заголовок, текст становится черным. Однако, когда мы перестаем наводить курсор на заголовок, текст остается черным. Что, если мы хотим «повторно скрыть» наше сообщение после наведения на него курсора? Возвращаясь к коду, мы можем реализовать нашу функцию обратного вызова. Это будет вызвано, как только мы "выйдем" или перестанем наводить курсор на наш заголовок, элемент со скрытым идентификатором. Добавим еще немного кода.

Здесь мы снова выбираем «этот» элемент, то есть элемент со скрытым идентификатором, и скрываем его от средства просмотра. Эта функция, как и функции .css, .hover и .ready, встроена в библиотеку jQuery, поэтому нам не нужно беспокоиться о том, как они реализованы. Нам просто нужно знать конечный результат. Здесь функция скрытия скрывает «этот» элемент на веб-страницах. По сути, это просто устанавливает для свойства display элемента this значение none, но использование .hide() делает код немного более кратким. Давайте посмотрим, что произойдет, когда мы обновим страницу.

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

В качестве другого быстрого примера мы добавим кнопку обратно в наш HTML-код и сделаем так, чтобы оповещение появлялось на странице, когда мы нажимаем кнопку.

Теперь мы напишем JavaScript, используя библиотеку jQuery, чтобы сделать кнопку интерактивной.

Здесь мы выбираем все кнопки на странице и при нажатии одной из них запускаем функцию. Функция использует метод оповещения (встроенный в HTML), чтобы предупредить пользователя на экране сообщением «Я предупреждаю вас!». Вернувшись на нашу веб-страницу, мы обновим ее и посмотрим, как выглядит наше оповещение.

А вот и наша тревога! Могли бы мы сделать это с помощью простого ванильного JavaScript? Да, но использование библиотеки jQuery делает многое из этого гораздо легче для написания кода и чтения в дальнейшем. На следующей неделе мы поговорим об angular.js — структурной инфраструктуре JavaScript, помогающей создавать динамические веб-приложения. Впервые в этой серии мы не будем жестко кодировать наш контент, а будем получать его откуда-то еще. Я надеюсь, что вы узнали что-то новое из поста на этой неделе, и увидимся в следующий раз.

То, что нужно запомнить:

<!-- How to Import jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- How to Use a jQuery Method -->
 $("button").click(function() {
	// what you want to do when button clicked
});
<!-- How to Create a Callback Function -->
$(document).ready(function(){
    $("#idName").hover(function(){
      // do this when we hover over the element with id idName
    },
  function(){ // 
  	  // body of a callback function
  	  // do this when we stop hovering over the element with id idName
    });
});
<!-- How to Dynamically Set CSS in jQuery -->
$(p).css("font-style", "italic");
$(#hidden).css("display", "none");

Плюс небольшое дополнение:

<!-- How to Select a Class in jQuery -->
$(".className").fadeIn();
<!-- How to Animate Text -->
$("p").animate({left: '250px'});
// this uses animation to move all of the p elements left by 250px
<!-- Reveal Text After Some Time -->
 $("p").show(1000);
<!-- Modify Input Fields -->
$("input").focus(function(){
    // do this when user clicks the input field
});
$("input").blur(function(){
  // do this when input field is not clicked
});

Код из этого поста в блоге