Как установить jquery на компьютер

Обновлено: 08.07.2024

Мы приступаем к изучению jQuery, и самое первое, что нужно сделать - это установить jQuery к себе на страницу. Также рассмотрим, какие есть версии для установки. Это всё мы разберём в данной статье.

Для скачивания имеются 2 вида библиотеки jQuery: сжатая (compressed) и несжатая (uncompressed). В плане работы они идентичны, но сжатая весит значительно меньше (за счёт удаления лишних пробельных символов), что крайне важно для страницы. Несжатая нужна, если Вам необоходимо будет заглядывать в исходный код jQuery, хотя такие ситуации случаются крайне редко, поэтому сразу скачивайте сжатую версию jQuery.

После того как Вы скачали jQuery, его нужно скопировать в папку на сайте. Допустим, путь к jQuery будет следующим: "js/jquery.js". Тогда подключается библиотека jQuery следующим образом:

И последний шаг - это проверка работоспособности библиотеки jQuery. Это нужно для того, чтобы не использовать то, что ещё даже не на 100% подключено, а потом думать, где ошибка в коде, хотя ошибка исключительно в подключении jQuery. Итак, для проверки jQuery можно использовать следующий код:

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

В следующей статье мы перейдём уже непосредственно к изучению jQuery.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 19 ):

Здравствуйте Михаил! jQuery можно установить на Joomla?Я так понимаю,что после такого как я скачала его,нужно создать для него отдельную папку на сайте,поместить его туда и подключить его.Я никогда не создавала свой сайт с нуля,так что не судите строго.

Если Вы никогда не создавали свой сайт с нуля, то забудьте об этом. Ищите готовые решения для Вашей Joomla.

Не слушайте никого, Катя! Всякие там Joomla и Wordpress ни в какое сравнение не идут с движком собственного производства. На изучение этих монстров может уйти не меньше времени, чем на изучение html и php. Последнее гораздо интереснее!

Андрей,я не спорю с Вами.Но для того чтобы написать свой движок на php с б/д mysql наверное надо много времени, а у меня его не так много.А Jommla я хотя бы знаю,хотя в ней ковыряться в её настройках это тоже не лучший вариант, иногда проще свой код написать, чем эти кнопки нажимать. Хотя в ней тоже можно редактировать html-код.и php если знаешь.Но разбираться в этой горе кода это пипец конечно.Лучше наверное самой написать своё.Например шаблон Joomla если хочешь кардинально поменять снова нужно знать php, а если не знаешь,то довольствоваться тем, какой он есть,не изменяя например расположения менюшек.

Вы зря так пишите. Я уже нашла нужную мне инфу, и это очень просто на самом деле сделать.Нужно также скачать jQuery, создать для него папку, закинуть в корень сайта. Далее его нужно подключить, тоесть зайти в шаблоны Joomla, тобиш в папку templates, найти тот шаблон который включен и в нём найти index.php.В <head> нужно вставить код скрипта,необходимый для подключения.Вот и всё.

Ну вот! И я об этом. Вы уже почти готовы написать свой движок. Все эти Ваши манипуляции с готовыми шаблонами, по сути мало чем отличаются от того, что я предлагаю. За то свой движок Вы будете знать как свои же пять пальцев. К тому же вовсе не обязательно нужны б/д. Можно и на файлах базу построить. Кстати jQuery вовсе не обязательно держать на своём сайте. Эта библиотека лежит в свободном доступе на офсайте. достаточно просто подключить её к своим страницам вписав между тэгами script путь(ссылку откуда Вы её скачали)

Но тогда скорость загрузки её будет намного меньше.

Да ладно?! Лично я разницы не заметил. Другое дело если тестировать сайт на локальном сервере, без подключения к сети.

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

А вы пробовали? А о хешировании скриптов слыхали?

Слыхал. Хорошо, тогда, допустим, у них сервер упал. И что же будет у Вас? Все скрипты, использующие эту библиотеку, перестают работать. И тут уже ничего не поделаешь. Так что у себя их хранить лучше. Да, лишний вес, но всё же плюсов больше, чем минусов у такого способа

Спорить нет смысла. Сервер скорее у Вас упадёт, чем у них (я так думаю). Дело Ваше. Поступайте, как Вам удобнее. Моё мнение это всего лишь моё мнение и я пока останусь при нём.

Екатерина, я имел ввиду, что если Вы не знаете html, css, js, то Вам бессмысленно подключать JQuery. Но, если Вы всё же знаете, то дерзайте.

Не подключается. Ни у какого браузера! Какой код на самом деле? Может нужно проверить или что?

А у меня такая проблема: из файла html все подключается, а через файл main.js - нет. Что делать?

В этой статье вы узнаете: что такое JavaScript библиотека jQuery, как скачать последнюю версию и подключить её к сайту, как установить скрипт с Google CDN и других хранилищ на страницу, а также чем отличается обычная версия от slim и сжатая от не сжатой.

Что такое jQuery и её поддержка браузерами

jQuery — это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше».

Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.

Сейчас последней версией jQuery является 3.5.1. Она поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+.

Преимущества и недостатки jQuery

Преимущества, которые даёт нам библиотеки jQuery при её использовании для написания клиентских сценариев:

компактность кода . Позволяет писать код более компактно чем на чистом javaScript, т.е. за гораздо меньшее количество строк кода.
простой и понятный синтаксис . Значительно упрощает написание многих вещей, например, таких как манипулирование DOM элементами, обработку событий, добавление эффектов анимации на страницу, AJAX запросов и т.д.
кроссбраузерность . Код написанный на jQuery будет гарантированно работать во всех основных браузерах. В то время как код, написанный на чистом JavaScript надо будет однозначно проверять во всех браузерах. Т.к. некоторые фрагменты кода могут не поддерживаться и их реализацию для этих браузеров нужно будет выполнять как-то по-другому, или например, использовать полифиллы.
открытый код . Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.

Кроме преимуществ, приведённых выше, у библиотеки jQuery имеются конечно и недостатки.

К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.

Статистика использования jQuery

Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»

Что можно делать с jQuery

jQuery позволяет очень легко:

выбирать элементы для выполнения различных манипуляций над ними;
создавать различные визуальные эффекты (например, плавное отображение и скрытие элементов);
создавать сложную анимацию, при этом реализовывая это за гораздо меньшее количество строк кода чем на чистом JavaScript;
манипулировать DOM элементами и их атрибутами;
реализовывать AJAX для асинхронного обмена данными между клиентом и сервером;
перемещаться от текущего узла к другим по иерархической структуре DOM дерева;
выполнять несколько действий над элементом посредством одной строчки кода;
получать или устанавливать размеры HTML элементам и т.д.

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

Как скачать jQuery

Для загрузки нам доступны 2 версии: полная и slim . Отличается slim от полной только тем, что в ней отсутствует часть модулей, а именно ajax и effects . Если функции входящие в эти модули нужны, то тогда следует выбрать полную версию. В противном случае – slim .

Кроме этого, каждая из них доступна нам как в сжатом (с суффиксом min ) так и в несжатом виде.

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

На продакшене лучше применять сжатый вариант jQuery (с расширением min.js ). Он меньше весит, и, следовательно, быстрее загружается. А это очень важно для производительности сайта.

Уменьшение объема JavaScript кода библиотеки jQuery осуществляется за счёт минимизации. Минимизация – это процесс, который заключается в удалении из исходного кода всего лишнего (комментариев, незначащих пробелов, переносов строк, символов табуляции) и замене имен функций и переменных на более короткие.

Кроме этого, существуют разные ветки jQuery: 1.x , 2.x и 3.x .

jQuery 1.x следует использовать если нужна поддержка IE 6 – 8.

jQuery 2.x построено на том же API, что 1.x. Но имеет меньший размер и более высокую производительность. Это было достигнуто благодаря тому, что из неё был удалён устаревший код, необходимый для поддержки IE 6 – 8. Таким образом 2.x можно использовать только в том случае, если вам не нужна поддержка этих старых браузеров.

jQuery 3.x – последняя ветка (3.5.1 – последняя версия). В большинстве случаев рекомендуется выбирать её, если конечно вам не нужна поддержка IE 6 – 8. В отличие от предыдущих веток она имеет множество улучшений (поддержку промисов, работу с анимацией через requestAnimationFrame и др.) и исправлений. Кроме этого, она доступна как в полном формате, так и slim .

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

Для скачивания jQuery с официального сайта нажмите правой кнопкой мыши на нужную ссылку и выберите пункт «Сохранить ссылку как. ».

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

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

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

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

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

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

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

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

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

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

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

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

Как подключить jQuery с CDN

CDN (Content Delivery Network) – это технология, которая позволяет увеличить скорость доставки контента конечным пользователям.

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

Т.е. CDN предоставляет ещё один способ подключить библиотеку jQuery. При этом непосредственно загружать его себе на сервер не нужно, он будет браться с CDN.

Загрузку jQuery с CDN предоставляют множество компаний, например, таких как Google, Microsoft, Cloudflare, jQuery, Yandex и т.д.

Подключить jQuery с CDN очень просто. Для этого нужно вставить script с атрибутом src , в котором прописать путь до этой библиотеки.

Код для онлайн подключения jQuery последней версии (3.5.1) с Google CDN:

Если нужна не эта, а какая-то другая версия, то тогда следует перейти страницу Google CDN и выбрать её.

Например, ссылка для подключения версии из ветки 1.x (1.12.4):

Google CDN для последней версии из ветки 2.x (2.2.4):

Другие популярные CDN

Yandex CDN (последняя опубликованная версия 3.3.1):

Дополнительно можно отметить, что если множество сайтов используют один и тот-же URL для подключения jQuery с CDN, то браузеру не потребуется загружать его для каждого такого ресурса. После первого скачивания он поместить jQuery в кэш и при последующих запросах будет брать её уже оттуда.

Как проверить подключён ли jQuery

Проверить подключён ли jQuery к странице можно так:

Если нужно выполнить те или иные действия в зависимости от того подключен jQuery к странице или нет:

Пример, в котором показано как можно добавить jQuery на страницу, если он ещё не загружен:

Узнать версию jQuery, которая у вас подключена к странице можно следующим образом:

Как использовать jQuery на странице

Синтаксис jQuery начинается с функции jQuery или с более короткого и красивого псевдонима - знака $ (как в этом примере).

Что делать при конфликте jQuery с другой библиотекой

Но что делать если знак $ у вас занят и используется другой библиотекой?

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

В jQuery определить положение элемента на странице можно посредством методов offset() и position() .

Первый метод ( offset ) позволяет узнать положение элемента относительно левого верхнего угла страницы (объекта document ). Второй же метод ( position ) выполняет это относительно левого верхнего угла ближайшего предка, который расположен вне основного потока (т.е. имеет в качестве значения свойства position значение absolute , fixed , relative или sticky ). Если же у элемента нет такого предка, они все располагаются в нормальном потоке, то его положение будет рассчитываться аналогично тому, как это выполняет метод offset() , т.е. относительно верхнего левого угла страницы.

В качестве результата данные методы возвращают объект, содержащий два свойства:

top – положение относительно верхней границы документа или ближайшего предка;
left – положение относительно левой границы документа или ближайшего предка.

Примечание: Если выборка содержит несколько элементов, то методы offset и position возвращают текущие координаты только для первого из них.

Установка координат

Кроме этого метод offset позволяет также установить координаты. Осуществляет это он относительно левого верхнего угла страницы (объекта document ) для всех элементов текущего набора.

Установка координат осуществляется посредством указания одного из следующих значений в качестве параметра:

объекта, содержащего свойства left и top ;
функции, которая в качестве результата должна возвращать объект со свойствами left и top (в качестве аргументов ей передаются индекс текущего элемента в выбранном наборе и текущие координаты этого элемента в виде объекта).

Рассмотрим как осуществляется установка координат с помощью следующих примеров.

Пример 1. При клике на элемент с id="mydiv" будем увеличивать его текущие координаты относительно документа на 50px по X и по Y.

Пример 2. При клике на одном из трёх элементов с классом blocks будем:

у первого элемента (индекс 0 в наборе) увеличивать его Y-координату на 50px;
у второго элемента (индекс 1 в наборе) увеличивать его X-координату на 50px;
у третьего элемента (индекс 2 в наборе) увеличивать его X и Y координаты на 50px.

Примечание: Метод position не имеет функционала для установки координат, он может использоваться только для их чтения в соответствии с алгоритмом приведённым выше.

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

Например, событие click возникает при клике пользователем на DOM-элементе. Кроме click , в браузере генерируются множество других событий. Более детально познакомиться с ними можно в этой статье. Здесь же мы остановимся на рассмотрение методов, которые предоставляет библиотека jQuery для работы с ними.

Обработка событий с помощью методов jQuery

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

В jQuery повесить событие (слушатель событий) на определённый элемент можно с помощью функций on и one , а также кратких записей on .

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

Например, добавим с помощью функции on событие click для всех элементов с классом btn :

Вышеприведённый код, записанный с использованием короткой записи функции on :

Дополнительная информация о событии

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

Пространство имён

В jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.

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

Также с его помощью очень просто удалять определённые события:

Описание и примеры использования функций trigger и off рассматриваются в статье немного ниже.

Передача дополнительных данных в обработчик

При необходимости вы можете передать данные в обработчик события (посредством указания дополнительного аргумента в функции on ). Доступ к переданным данным внутри обработчика осуществляется через объект Event .

Осуществляется это так (пример):

Как повесить несколько событий на один элемент

Пример использования одного обработчика для нескольких (2 или более) событий:

Для каждого события своя функция:

Пример использования в jQuery несколько обработчиков (функций) на одно событие:

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

Программный вызов события

Для вызова события из кода в jQuery есть 2 метода:

trigger - вызывает указанное событие у элемента.
triggerHandler - вызывает обработчик события, при этом само событие не происходит.

jQuery - Событие загрузки страницы (ready)

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

Самая короткая запись события загрузки страницы в jQuery выглядит так:

Но, можно использовать и более длинную запись:

jQuery - Событие загрузки (load)

Событие load браузер генерирует элементу, когда он и все вложенные в него элементы были полностью загружены. Данное событие предназначено только для элементов, в которых присутствует URL: image , script , iframe и window .

Например, выполнить функцию, когда страница будет полностью загружена (включая картинки):

jQuery - События мыши

В jQuery для отслеживания действий мыши наиболее часто используют следующие события:

mousedown
mouseup
click
mousemove
wheel
hover
mouseenter
mouseover
mouseleave
mouseout

jQuery - Событие клик (click)

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

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

Например, повесим событие onclick на все элементы с классом btn :

Краткая запись события по клику:

Например, разберем, как можно скрыть блок через некоторое время после события click :

jQuery - Событие при наведении (hover)

Событие при поднесении курсора является сложным и состоит из 2 событий:

вхождения (mouseenter, mouseover);
покидания (mouseleave, mouseout).

События mouseenter и mouseleave в jQuery отличаются от mouseover и mouseout только тем, что они не возникают когда курсор соответственно входит и покидает внутренние элементы прослушиваемого элемента. Другими словами события mouseover и mouseout всплывают, а mouseenter и mouseleave – нет.

Например, изменим цвет элемента списка при поднесении к нему курсора:

Те же самые действия, но использованиям mouseover и mouseout :

Данные методы необязательно использовать вместе, их можно также применять по отдельности.

Например, подсчитаем количество посещений элемента при наступлении события "Навести мышью":

Вместо использования mouseenter и mouseleave можно использовать событие hover .

Например, перепишем вышеприведённый пример, используя hover :

При использовании события hover в jQuery, первый обработчик используется для задания действий при вхождении курсора в элемент ( mouseenter ), а второй - при покидании ( mouseleave ).

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

jQuery - Событие движения мыши

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

jQuery - Событие колёсика мыши (wheel)

Прослушивание события прокрутки колёсика (wheel) мышки можно осуществить так:

Данное событие в отличие от scroll генерируется браузером только для колёсика мышки, при этом неважно прокручивается элемент или нет, т.е. с ним можно работать на элементах с overflow , равным hidden . Еще одно отличие заключается в том, что wheel генерируется до прокрутки, а scroll - после неё.

jQuery – События клавиатуры

При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:

keydown (клавиша нажата, но ещё не отпущена);
keypress (событие генерируется для букв, цифр и других клавиш, за исключением управляющих) – предназначено для того чтобы получить код символа (события keydown и keyup позволяют узнать только о коде клавиши, но не символа);
keyup (генерируется браузером при отпускании клавиши).

Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:

Пример, в котором показано, как можно прослушать событие keypress и узнать, нажато ли указанное сочетание клавиш:

Пример, как можно прослушать сочетание клавиш Ctrl+Enter :

Пример, с использованием событий keydown и keyup :

jQuery – События элементов формы

В jQuery можно выделить следующие события для элементов формы и не только:

focus (focusin)
blur (focusout)
change
input (для текстовых элементов формы)
select
submit

jQuery - События получения и потери фокуса

Событие focus посылается элементу, когда он получает фокус. Данное событие генерируется для элементов input , select и ссылок ( a href=". " ), а также любых других элементов, у которых установлено свойство tabindex . Получение элементом фокуса обычно осуществляется посредством клика или нажатия клавиши Tab на клавиатуре. Событие focus не всплывает.

Кроме focus есть ещё похожее событие, называется оно focusin . В отличие от focus данное событие всплывает, и оно может, например, использоваться для обнаружения события фокуса родительскими элементами.

Событие blur посылается элементу, когда он теряет фокус. Так же как и focus , событие blur имеет похожее событие focusout . Данное событие отличается от blur тем, что оно может всплывать. Это возможность можно использовать, например, для получения его на родительских элементах, а не только на том элементе, который его вызвал ( target ).

Например, при получении элементом div события фокуса установим ему фон оранжевого цвета:

Точно такое же выполнить с помощью событий focus и blur не получится, т.к. они не всплывают:

jQuery - Событие изменения (change)

Событие change предназначено для регистрации изменения значения элементов input , textarea и select . Для элементов select , checkboxes , и radio кнопок данное событие возникает сразу (т.е. как только пользователь делает какой-то выбор). Но для других элементов данное событие не будет происходить до тех пор, пока этот элемент не потеряет фокус.

Пример использования события change для слежения за состоянием элемента checkbox . Доступность кнопки будет определять в зависимости от того в каком состоянии ( checked или нет) находиться флажок:

Пример, в котором рассмотрим, как получить значение элемента select при его изменении:

Пример, в котором рассмотрим, как получить все выбранные элементы select при его изменении:

Пример программного вызова события change для элемента select :

Пример использования события изменения change для получения значения элемента input :

Но кроме события change есть ещё событие input для текстовых элементов. Данное событие в отличие от change генерируется сразу, а не после того как данный элемент потеряет фокус.

Пример, использования события ввода для получения значения элемента input :

Пример, в котором представлен один из способов получения значения элемента textarea :

Пример, в котором рассмотрим, как с помощью события change получить значение выбранного элемента input с type , равным radio :

jQuery - Событие выбора (select)

Событие выбора select генерируется браузером, когда пользователь внутри элементов input с type="text" или textarea выделяет текст.

jQuery – Событие отправки формы (submit)

Пример, использования события submit :

Программный вызов отправки формы:

jQuery - Событие прокрутки (scroll)

Для отслеживания состояния скроллинга в jQuery используется событие scroll .

Например, повесим на событие прокрутки страницы функцию, которая будет отображать элемент с классом scrollup , если величина прокрутки больше 200px и скрывать его, если значение прокрутки меньше этой величины.

jQuery - Событие изменения размеров окна (resize)

Для прослушивания события изменения окна браузера используется resize :

Например, создадим обработчик, который будет при изменении окна браузера выводить в конец страницы её ширину и высоту:

jQuery - Отмена стандартного поведения события

Некоторые элементы в HTML имеют стандартное поведение. Например, когда пользователь нажимает на ссылку, он переходит по адресу указанному в атрибуте href . Если вам это действие не нужно, то его можно отменить. Для отмены стандартного поведения необходимо вызвать в обработчике этого события метод preventDefault объекта event .

Например, отменим стандартное поведение всех ссылок на странице, имеющих класс service :

Что такое всплытие и как его остановить

Кроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:

В jQuery бывают сценарии, когда в представленной цепочке у какого-нибудь элемента то же есть обработчик для этого события, который выполнять не нужно. И чтобы это событие не распространилось на этот элемент, его необходимо остановить. Для этого в обработчике нужного элемента необходимо вызвать метод stopPropagation объекта event . После вызова этого метода событие остановится, и не будет всплывать.

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

В данном случае если не указывать метод stopPropagation , то при поднесении курсора к элементу span с классом mark данное событие возникнет не только у него, но и у всех его родительских элементов. А это в этом примере приведёт к тому, что изменится цвет не только текста, заключенного в span , но и всего абзаца.

Если вам необходимо отменить стандартное поведение браузера и остановить всплытие события, то в jQuery вместо вызова двух этих методов можно просто вернуть в качестве результата функции значение false .

Добавление событий к динамически созданным объектам

Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции on :

Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является document . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция on может программно отобрать среди элементов (элемента, который вызвал это событие ( target ) и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции on обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.

Например, добавим событие к элементу, которого ещё нет на странице:

Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.

Например, запретим в комментариях переходить по внешним ссылкам (такие действия будем перенаправлять на страницу away):

jQuery - Удалить обработчик события

Удаление обработчиков события осуществляется с помощью метода off . При этом с помощью него можно удалить только те обработчики, которые добавлены посредством метода on .

Вызов метода off без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.

Например, отключим все обработчики у элементов с классом link:

Например, удалим событие click у всех элементов с классом link :

Специальный селектор ( ** ) позволяет удалить только делегированные события с сохранением не делегированных:

Удалить только указанные делегированные события (с помощью селектора):

Удалить все обработчики openModal делегированного события click в пространстве имён modal для элементов с классом show :

Создание пользовательского события

Для создания пользовательских событий в jQuery используются методы on и trigger .

Принцип создания специального события jQuery рассмотрим посредством следующего примера:

Читайте также: