What is jquery cdn and how you can use it in your website

Как добавить библиотеку в html

Работать с фреймворком можно добавив ссылку в исходный код вашего блога с официального интернет-проекта Jquery, или же скачав библиотеку к себе на сервер.

Используем первый способ

Откроется страница, где нажимаем правой кнопкой мыши по «Download the compressed» и выбираем в открывшемся окне строку «Копировать адрес ссылки».

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

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

В кавычках и будет адрес скопированной ссылки.

Атрибут «src» указывает путь к внешнему файлу. Хотелось бы отметить, что не обязательно подключать данный скрипт в тег «head». На момент написания статьи последняя версия была 3.2.1. Когда вы будете читать данный пост, она может измениться. Выйдет новая.

Важно! Перед началом работы с данным фреймворком у вас должны быть начальные знания в области веб-программирования. Это не так сложно, как кажется

На начальных этапах обучения рекомендую почитать статью «Первые шаги в коддинге».

Как подключить, скачав файл на свой сервер

На официальном сайте, так же, как и в первом способе, жмем на кнопку «Загрузить».

В новом окне нажимаем ссылку «Download the compressed» левой кнопкой мыши и прописываем путь, куда нужно скачать файл библиотеки.

На сервере создайте папку, например, «JS» и скопируйте в него этот файл.

Теперь его нужно подключить для этого в теге «head» пишем такой код:

<script type="text/javascript" src="js/ jquery-3.2.1.min.js"></script>

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

Они отличаются размером. Сжатая версия, та что использовалась в примере, имеет размер 85 килобайт, а полная — 260. В первом варианте были убраны все пробелы и переводы строк. Также сократили имена переменных. Больше между ними разницы нет. Я советую использовать способ, описанный выше, так как в нем размер подключаемого файла меньше и поэтому загружаться он будет быстрее. Полная версия используется разработчиками, и вебмастерами, которые захотят изучить работу библиотеки подробнее.

Как подключить скрипт jQuery в html

Подключение jQuery к странице осуществляется также как и любого другого JavaScript файла. Т.е. посредством добавления в HTML тега с атрибутом , в котором необходимо задать полный или относительный путь к файлу.

Подключение последней версии jQuery:

<script src="/assets/js/jquery-3.5.1.min.js"></script>

При этом разместить можно как секции в , так и в . Но где же лучше?

Раньше (до появления режимов и ) это рекомендовалось делать перед закрывающим тегом :

  ...
  <script src="/assets/js/jquery-3.5.1.min.js"></script>
</body>
</html>

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

Если бы мы сделали это по-другому, например, поместили в раздел , то создали бы «задержку» при обработке страницы в самом её начале. А это привело бы к тому, что пользователю пришлось бы дольше ждать отображения контента страницы.

Но сейчас так делать не рекомендуется. Лучше размещать скрипты как можно выше (в разделе ) с добавлением к ним атрибута или . Эти атрибуты будут «говорить» браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом основной поток обработки страницы. Это позволит сделать сайт более производительным.

  ...
  <!-- отложенная загрузка библиотеки jQuery -->
  <script defer src="/assets/js/jquery-3.5.1.min.js"></script>
  ...
</head>
...

Использовать атрибут применительно к jQuery не имеет смысла, т.к. эту библиотеку мы в основном используем для изменения DOM. Но перед тем, как править DOM, он должен быть построен. Это сделать нам поможет использование атрибута . Атрибут гарантирует что скрипт выполниться только после того, как дерево DOM будет построено, но до события .

При этом, если на странице имеется несколько внешних скриптов с атрибутом , то они будут выполняться строго в том порядке, в котором они расположены в коде.

Пример отложенного подключения jQuery и своего внешнего скрипта, зависящего от этой библиотеки:

<!-- сначала выполнится jQuery -->
<script defer src="/assets/js/jquery-3.5.1.min.js"></script>
<!-- после jQuery свой скрипт, зависящий от jQuery -->
<script defer src="/assets/js/main.min.js"></script>

При непосредственном размещении JavaScript кода в HTML документе его необходимо поместить в обработчик события DOMContentLoaded (в этом случае его код выполнится после загрузки библиотеки jQuery):

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // код, зависящий от jQuery
    ...
  });
</script>
<!-- отложенная загрузка jQuery -->
<script defer src="/assets/js/jquery-3.5.1.min.js"></script>

Как заменить элемент в jQuery?

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

Синтаксис метода :

.replaceAll( target )

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

При замене элементов метод удаляет data и обработчики событий, связанные с удаляемыми узлами.

Например, заменим все элементы на странице на элемент с текстом «здесь была ссылка».

$('<span style="background-color: yellow;">здесь была ссылка</span>').replaceAll('a');

Ещё в jQuery есть метод .

Данный метод работает наоборот. Здесь мы сначала выбираем элементы, которые хотим заменить, а затем в круглых скобках метода указываем то, на что их хотим заменить.

Синтаксис метода :

.replaceWith( newContent или function )

В качестве параметра этому методу можно передать новый контент в виде html-строки, DOM-элемента, массива или jQuery, а также определить его посредством функции.

Пример. При нажатию на кнопку заменим её на элемент с текстом, который был у кнопки.

<button>Кнопка</button>

<script>
  $('button').click(function () {
    $(this).replaceWith(function (index, content) {
      // index - инлекс элемента в текущем наборе
      // content - содержимое элемента
      return $('<span>', {
        css: { display: 'inline-block', 'background-color': 'yellow', border: '1px solid black', padding: '3px 10px' },
        text: content
      })
    });
  });
</script>

Подключение jQuery с помощью файла js

Этот способ предусматривает копирование файла с актуальной версией jQuery на свой сервер. На главной странице официального сайта кликнуть по кнопке, как указано на скриншоте.

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

Этот файл закидываем в папку со своим сайтом. Можно создать для файла отдельную папку, например, js, если её до сих пор нет.

Теперь подключим js-файл. Для этого, опять же перед закрывающим тегом head, запишем:

<script src="js/jquery-3.5.1.js"></script>

Здесь важно правильно прописать путь к файлу jquery-3.5.1.js. Если он лежит прямо в корневом каталоге сайта вне каких-либо папок, то код скрипта будет выглядеть так:

<script src="jquery-3.5.1.js"></script>

Плюс: простой доступ к странице

В чистом JavaScript обратиться к объекту на странице можно одним из способов:

и еще несколько подобных

В jQuery то же самое делает одна прекрасная команда. Заодно она же совмещает в себе кучу других функций. Фактически она говорит jQuery: «Возьми ЭТО и сделай с ним что-то»:

Поэтому какие-то простые манипуляции с объектами на странице выглядят элегантнее именно с jQuery. Это не значит, что их нельзя делать с простым JavaScript — можно. Но это не так красиво.

Представьте, что у нас есть страница, на которой есть важные плашки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зависимости от времени суток, браузера или настроения программиста сайт должен эти плашки скрывать, добавлять новые или как-то их менять. Вот, что можно, к примеру, с ними делать:

 добавлять новые:

 вставлять ещё одни перед ними:

 заменять их на что-то другое:

 и просто плавно показывать на экране:

Защита от подключения jQuery несколько раз

2010-04-28

В больших проектах может возникнуть проблема, когда jQuery подключается несколько раз. Что же делать?
Действительно, когда проект большой, и состоит из многих независимых логических частей, которые могут присутствовать или отсутствовать по наперед неопределенному принципу — может возникнуть подобная проблема.
К примеру, Вы в своей части кода подключили jQuery и повесили некоторый набор плагинов. После этого другой программист добавляет другую часть кода, которая расположена ниже. Он тоже подключает эту замечательную библиотеку jQuery, не подозревая о том, что она в некоторых вариантах станицы уже может быть подключена. Естественно все ваши плагины и навешанные функции умножатся на ноль, то-есть — исчезнут в неизвестном направлении. Как же избежать подобной проблемы?

И тут нас спасает структура самого jQuery, а именно то, что jQuery не засоряет пространство имён, а инициализирует всего лишь объект window.jQuery и более короткий псевдоним — window.$.
Таким образом нам нужно всего лишь проверить инициализирован ли уже jQuery, и если нет — то проинициализировать его.

Это можно сделать несколькими вариантами:

1. Самый простой и безопасный:
Открываем саму библиотеку, и оборачиваем ее таким вот образом:

После этого можно переименовать имя файла, к примеру, на такое:jquery-1.3.2.if-undefined.min.js во избежание случайного перетирания и подключать его. Хотя в этом случае придется изменить имя библиотеки во всех файлах где она подключается, а это не очень эффективно. К тому же в будущем может найтись человек, который не будет знать об этом фиксе или просто забудет о нем, и подключит библиотеку со стандартным именем.Если же имя оставить стандартным, эта защита сработает везде автоматически.
Так что решать Вам.

Недостаток этого фикса тот, что библиотека может полностью подгружаться несколько раз. Хотя, если Вы не используете различные javascript-миксеры, оптимизацию яваскриптового кода путём склеивания, прочее, то, скорее всего, браузер просто повторно возьмёт эту библиотеку со своего кэша. Тем не менее есть второй, более красивый вариант:

2. Этот способ заключается в том, чтобы проверить яваскриптом инициализирована ли библиотека, и если нет — то сгенерировать запрос на ее подключение. Делается это просто:
Особенностью данного метода является то, что jQuery начнёт грузиться только после полной загрузки страницы. Это значит, что Вы должны учесть это, чтобы Ваш код не начал выполнять раньше чем подключится библиотера. А также все плагины придется подключить таким же образом через document.write.

Why using jQuery CDN is good for your website

When you use jQuery CDN then you are actually doing 2 positive things:

• 1. Decreasing the load on your website since the jQuery file will be loaded from a CDN and not from your website.
• 2. jQuery loads faster from CDNs than from your website. This is because CDNs are made for speed, they serve jQuery from the nearest position to the users. They also have lots of data servers and load balancing algorithms that make sure the jQuery is served very fast.

The article What is CDN? explains all about CDN from starting to the end. Do check it.

There can be issues when loading jQuery from CDNs

a. The CDN hosted jQuery might be blocked by a filter or proxy service on the user’s connnection.b. The CDN is down or timing out, since the browsers typically have a timeout of 30 seconds therefore the jQuery fails to load in these conditions.

Falling Back from CDN to Local Copy of jQuery present on the Website

Luckily there is a simple solution for these CDN issues. You can easily provide a locally-hosted fallback version of jQuery. The basic idea for CDN fallback is to check for a type or variable that should be present after a script loads. If it’s not there then try getting the jQuery file locally.

Notice the escape characters inside the document.write method.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
    if (typeof jQuery == 'undefined') {
        document.write(unescape("%3Cscript src='/js/jquery-3.2.1.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>

Or, slightly differently.

// First try loading jQuery from CDN
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
// If the CDN fails then Fallback to a local copy of jQuery 
<script>
    window.jQuery || document.write('<script src="/js/jquery-3.2.1.min.js"><\/script>'))
</script>

Next tutorial – Select elements with their index using jQuery Eq Method – .eq()

Подключение библиотеки jQuery

Всё что нужно знать о подключении библиотеки jQuery — это, что библиотека подключается как обычный ,js скрипт, а код который будет использоваться вместе с этой библиотекой и плагинами, под строкой подключения jQuery

Подключение jQuery с CDN

Если вы не исправляете саму библиотеку jquery, а используете только версию Compressed (файлик  min.js), то есть смысл не загружать библиотеку на локальный сервер, а подключать его напрямую с CDN (Content Delivery Networks) — в данном случае библиотека jQuery находится физически в ctnb CDN — а мы просто ссылаемся на неё.

Что такое CDN

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

Строка подключения библиотеки jQuery с CDN сервера

Строка подключения к CDN серверу также находится на странице  http://jquery.com/download и выглядит следующим образом (в зависимости от версии):

Что можно сделать, чтобы устранить проблему?

Первое — использовать PageSpeed Insights. Это может и не дать существенного прироста производительности. Результат в значительной степени зависит от целого ряда условий. В первую очередь, есть ли на сайте другие блокирующие кроме JQuery. Например, CSS или другие файлы JavaScript.

Если на сайте есть хотя бы один такой ресурс, то их количество уже не имеет особого значения. Потому что они будут загружаться браузером параллельно (в отличие от JQuery Google CDN). Если только для загрузки одного из них не требуется значительно больше времени, чем для других.

Но нужно постараться устранить блокираторы. И многим это удается, пока они не упрутся в JQuery. Рассмотрим некоторые способы решения этой проблемы:

1. Удалить или не использовать функционал, зависящий от JQuery

Например, если вы используете плагин отложенной загрузки, который дает сбой при попытке асинхронного вызова или объединения JQuery с другими скриптами сайта, то удалите этот плагин или найдите альтернативу, независимую от JQuery.

Существует плагин Rocket Lazy Load, для работы которого не требуется JQuery. После того как вы успешно удалите JQuery зависимый функционал, проблемы при отложенной загрузке, асинхронном вызове или объединении JQuery должны исчезнуть.

3. Загрузить Jquery с Google, а не локально

Если JQuery загружается с , то он (технически) все равно остается ресурсом, блокирующим загрузку. Но он таковым не является. Почему? Потому что миллионы сайтов используют JQuery Google.

Это означает, что с огромной долей вероятности пользователь вашего сайта уже посещал сайт с JQuery, и он сохранен в кэше его браузера. То есть JQuery не будет загружаться еще раз. Получается, что JQuery не блокирует отображение страницы (в отличие от локального варианта использования).

Как загрузить копию JQuery от Google

Шаг 1: Определите, какая версия Jquery используется на вашем сайте

• Просмотрите исходный код вашей страницы;
• Найдите JQuery. Он будет выглядеть примерно так: http://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.3;
• Три цифры в конце, в данном примере 1.11.3, обозначают версию JQuery;
• Если вы не видите номер версии подключаемого JQuery Google, откройте файл;
• В верхней части файла (в начале кода) вы увидите что-то вроде JQuery v1.11.3;
• В этом примере 1.11.3 — это версия JQuery.

Шаг 2: Исключите из очереди загрузки локальную копию JQuery и добавьте копию Google

Вставьте в файл functions.php темы следующий код или используйте плагин, наподобие Code Snippets:

function modify_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js’, false, ‘x.x.x’);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘init’, ‘modify_jquery’);

Важно:

Везде, где вы видите в приведенном выше коде «x.x.x«, замените эти символы номером версии подключаемого JQuery Google.

Шаг 3: Танцуйте от радости

Когда не следует использовать копию JQuery от Google

1. Когда вы можете объединить JQuery с другими скриптами.
2. Когда у вас есть много китайских пользователей, так как сервисы запрещены в этой стране.

Это все, ребята!

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

Вадим Дворниковавтор-переводчик статьи «When and How to Load jQuery From Google’s CDN»

Формы jQuery, доступные на CodeCanyon

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

1. Конструктор пошаговых jQuery форм Timon Step Form

Если вам нужна пошаговая форма, обратите внимание на пакет Timon Step Form. В состав этого набора входит множество готовых элементов форм, а также коллекция эффектов перехода

Это визуальный конструктор, для его использования не нужны навыки программирования. Имеется встроенная jQuery-валидация входных данных.

2. Smart Forms

Smart Forms представляет собой полнофункциональный фреймворк для создания, как простых, так и сложных форм. В его состав входит поддержка Google reCAPTCHA, проверка номеров телефонов и многое другое. Валидация реализована на jQuery, что делает данный фреймворк отличным выбором.

3. Just Forms Advanced

Название данного пакета говорит само за себя – это инструмент для создания продвинутых форм. В поставку входит более 110 готовых форм, а сам фреймворк позволяет разработать уникальную форму самостоятельно.

4. Forms Plus JS

Forms Plus – фреймворк для создания форм с валидацией и вычислениями. Включает в себя более 100 шаблонов для разработки форм. Поддерживает:

• ввод капчи;
• выбор даты, времени и цвета;
• группировку полей;
• скрытые поля;
• создание блоков для действий.

5. Sky Forms

Мы заканчиваем обзор на фреймворке Sky Forms. Данный пакет включает в себя обширный набор стильных элементов, более 300 векторных иконок и множество цветовых схем, поддерживает любую кастомизацию. Предусматривает обработку шести состояний для элементов ввода, включая наведение курсора, фокус и так далее. Формы, созданные с помощью Sky Forms, корректно работают во всех наиболее популярных браузерах.

Валидация первой формы

Рассматриваемый нами плагин можно использовать без внесения каких-либо заметных изменений в разметку страницы. Единственная поправка, которую вам потребуется сделать – это добавить id или class к форме, к которой нужно подключить валидацию.

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

<form id="basic-form" action="" method="post">
<p>
<label for="name">Name <span>(required, at least 3 characters)</span></label>
<input id="name" name="name" minlength="3" type="text" required>
</p>
<p>
<label for="email">E-Mail <span>(required)</span></label>
<input id="email" type="email" name="email" required>
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>

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

Для подключения валидации к этой форме надо всего лишь вставить приведенный ниже фрагмент, написанный на JavaScript, в код страницы:

$(document).ready(function() {
$("#basic-form").validate();
});

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

Сообщения об ошибках передаются в DOM (объектную модель документа) с помощью элемента label. Поскольку этот элемент предусматривает класс error, к сообщениям можно легко применить собственные стили. То же самое справедливо в отношении invalid input, у которого тоже имеется класс error.

Добавление правил валидации для полей ввода

Вы также можете передать определенные правила в метод validate() для установления правил, в соответствии с которыми должна проверяться введенная информация. Значением параметра rules должны быть пары «ключ-значение». Ключом в каждом случае является название проверяемого элемента, а значением – набор правил для проверки информации.

Также можно добавить проверку условий данных в различных полях – с использованием ключевого слова depends («зависит от») и возвращая, соответственно, результат true («истинно») или false («ложно»). Ниже приведен пример использования простого набора правил для определения корректности введенных данных:

$(document).ready(function() {
$("#basic-form").validate({
rules: {
name : {
required: true,
minlength: 3
},
age: {
required: true,
number: true,
min: 18
},
email: {
required: true,
email: true
},
weight: {
required: {
depends: function(elem) {
return $("#age").val() > 50
}
},
number: true,
min: 0
}
}
});
});

Такие опции валидации схожи с атрибутами, которые вы можете добавить в разметку формы. Например, установка параметра required на true сделает элемент обязательно необходимым для успешной отправки формы. Установление minlength на значение 3 обяжет пользователей вводить в поле как минимум три символа. Есть и другие встроенные методы валидации, с которыми можно ознакомиться на странице с технической документацией.

Важный момент, на который необходимо обратить внимание в приведенном выше коде – использование depends для того, чтобы сделать обязательным условием ввод веса, если возраст превышает 50 лет. Условие реализовано с помощью возвращения значения true функцией обратного вызова в том случае, если значение, введенное в поле age, превышает 50

Кастомизация сообщений об ошибках

Иногда возникает необходимость добавления собственных классов к элементам ввода – для использования дополнительных правил или для лучшей интеграции с существующей темой оформления сайта.

Классы, связанные с корректными и неверными элементами ввода, можно менять с использованием ключей errorClass и validClass. Это поможет предотвратить нежелательные конфликты, которые могут возникать при повторном использовании одного и того же названия класса. По умолчанию класс ошибки errorприсваивается каждому недопустимому входному элементу и метке. Допустимый класс valid присваивается каждому корректному входному элементу.

При этом важно помнить, что присвоение errorClass уведомлениям fail-alert удаляет класс error из недопустимых элементов. Для присвоения нескольких классов одному и тому же элементу следует использовать errorClass: «error fail-alert»

То же самое касается validClass.

Если пользователь вводит корректные данные, дополнительные метки к форме не добавляются. Таким образом, классы validClass остаются присвоенными корректным входным элементам.

Дополнительный JavaScript-код используется только для присвоения классов:

$(document).ready(function() {
$("#basic-form").validate({
errorClass: "error fail-alert",
validClass: "valid success-alert",
// ... More validation code from previous example
Далее приведен CSS -код, который мы будем использовать для оформления сообщений об ошибках:
label.error.fail-alert {
border: 2px solid red;
border-radius: 4px;
line-height: 1;
padding: 2px 0 6px 6px;
background: #ffe6eb;
}
input.valid.success-alert {
border: 2px solid #4CAF50;
color: green;
}

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

Плюс: кроссбраузерность

Многие пользователи используют старые браузеры, например Internet Explorer 11. Они это делают не потому, что не знают, как обновиться, а потому что на работе админ запретил установку любого софта; или в госучереждениях давно не обновляли компьютеры.

Тут и спасает jQuery: разработчики сами предусмотрели поддержку старых браузеров. Например, вот как может выглядеть проверка на версии Intertet Explorer:

И такие условные блоки есть для всех старых версий IE.

Если всё настолько круто, как здесь написано, то все должны уже были давно перейти на jQuery и забыть про JavaScript, но этого не происходит. Более того, у jQuery есть свои существенные минусы и ограничения.

jQuery Events

In the “Hello, World!” example, the code ran as soon as the page loaded and the document was ready, and therefore required no user interaction. In this case, we could have written the text directly into the HTML without bothering with jQuery. However, we will need to utilize jQuery if we want to make text appear on the page with the click of a button.

Return to your file and add a element. We will use this button to listen for our click event.

index.html

We will use the method to call a function containing our “Hello, World!” code.

js/scripts.js

Our element has an ID called , which we select with . By adding , we’re telling it to listen for a click event, but we’re not done yet. Now we’ll invoke a function that contains our code, inside the method.

Here’s the final code.

js/scripts.js

Save the file, and refresh in the browser. Now when you click the button, the “Hello, World!” text will appear.

An event is any time the user interacts with the browser. Usually this is done with the mouse or keyboard. The example we just created used a click event. From the official jQuery documentation, you can view a full list of jQuery event methods. Below is a brief overview of some of the most commonly used event methods.

• — Click: executes on a single mouse click.
• — Hover: executes when the mouse is hovered over an element. and apply only to the mouse entering or leaving an element, respectively.
• — Submit: executes when a form is submitted.
• — Scroll: executes when the screen is scrolled.
• — Keydown: executes when you press down on a key on the keyboard.

To make images animate or fade in as a user scrolls down the screen, use the method. To exit a menu using the key, use the method. To make a dropdown accordion menu, use the method.

Understanding events is essential to creating dynamic website content with jQuery.