Jquery это: Урок 1. Что такое jQuery, основные понятия и возможности

jQuery | WebReference

AJAX (асинхронный JavaScript и XML) — это средство загрузки данных с сервера без перезагрузки страницы. Он использует функциональность встроенного в браузер XMLHttpRequest (XHR), чтобы сделать запрос к серверу, а затем обработать полученные от сервера данные.

jQuery предлагает метод $.ajax и несколько удобных методов чтобы упростить работу с XHR во всех браузерах.

jQuery является библиотекой JavaScript с открытым исходным кодом, написанной Джоном Ресигом, которая упрощает взаимодействие между HTML, CSS и JavaScript. С 2006 года, когда был выпущен jQuery, он приобрёл внушительное число пользователей, будучи используемый сайтами и компаниями, большими и малыми.

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

Библиотека jQuery позволяет легко манипулировать кодом HTML после его отображения в браузере. Она также предоставляет инструменты, которые помогут пользователю взаимодействовать с вашей страницей; инструменты, которые помогут вам создавать анимацию; и инструменты, которые позволяют вам общаться с сервером без перезагрузки страницы. Мы вскоре до всего этого доберёмся. Для начала рассмотрим некоторые основы jQuery, а также применим jQuery для его основной работы: получить какие-то элементы и что-то с ними сделать.

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

Смотрите более подробную информацию об эффектах jQuery в документации.

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

В этом разделе мы рассмотрим некоторые (но не все) методы обхода и манипуляции.

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

jQuery упрощает реагирование на действия пользователя с веб-страницей. Это означает, что вы можете написать код, который выполняется, как только пользователь щёлкает по определённой части страницы или когда он перемещает курсор за пределы элемента формы. Например, этот код отслеживает, что пользователь щёлкнул по любому элементу <li> на странице:

JavaScript. Начало работы · Bootstrap v5.0.2

Индивидуальные или cкомпилированные

Плагины можно подключать по одному (файлами js/dist/*. js) или все сразу – с помощью bootstrap.js или «облегченного» bootstrap.min.js (не подключайте оба сразу).

Если вы используете сборщики пакетов (например, Webpack, Rollup), то вы можете использовать файлы /js/dist/*.js готовые к UMD. Universal Module Definition — это набор шаблонов для обеспечения работы модуля в разных средах выполнения.

Использование Bootstrap в качестве модуля

Мы предоставляем версию Bootstrap, построенную как ESM (bootstrap.esm.js и bootstrap.esm.min.js), которая позволяет вам использовать Bootstrap в качестве модуля в вашем браузере, если ваши целевые браузеры поддерживают его.

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Несовместимые плагины

Из-за ограничений браузера некоторые из наших плагинов, а именно плагины Dropdown, Tooltip и Popover, нельзя использовать в теге <script> в качестве module, поскольку они зависят от Popper. js. Для получения дополнительной информации о проблеме см. Здесь.

Зависимости

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации.

Наши выпадающие списки, всплывающие окна и подсказки также зависят от Popper.

Хотите использовать jQuery? Это возможно!

Bootstrap 5 разработан для использования без jQuery, но вы можете использовать наши компоненты с jQuery. Если Bootstrap обнаружит jQuery в объекте window он добавит все наши компоненты в систему плагинов jQuery; это означает, что вы сможете использовать $('[data-toggle="tooltip"]').tooltip() для включения подсказок. То же самое касается других наших компонентов.

Атрибуты данных

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

Селекторы

В настоящее время для запроса элементов DOM мы используем собственные методы querySelector и querySelectorAll по соображениям производительности, поэтому вы должны использовать допустимые селекторы. Если вы используете специальные селекторы, например: collapse:Example, не забудьте их «экранировать».

События

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

show) запускается в начале события, а его причастие (например, shown) – по окончанию события.

Все инфинитивные события предоставляют функциональные возможности preventDefault(). Это дает возможность остановить выполнение действия до его начала. Возвращение false из обработчика событий также автоматически вызовет preventDefault().

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // останавливает отображение модального окна
  }
})

Cобытия jQuery

Bootstrap обнаружит jQuery если jQuery присутствует в объекте window и не установлен атрибут data-no-jquery в <body>. Если jQuery найден, Bootstrap будет генерировать события благодаря системе событий jQuery. Поэтому, если вы хотите прослушивать события Bootstrap, вам придется использовать методы jQuery (.on и .one) вместо addEventListener.

$('#myTab a').on('shown.bs.tab', function () {
  // сделайте что-нибудь. ..
})

Алгоритмическое API

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

var myModalEl = document.getElementById('myModal')
var modal = new bootstrap.Modal(myModalEl) // инициализирован по умолчанию
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // инициализирован без клавиатуры

Если вы хотите получить конкретный экземпляр плагина, каждый плагин предоставляет метод getInstance. Чтобы извлечь его непосредственно из элемента, сделайте это: bootstrap.Popover.getInstance (myPopoverEl).

Селекторы CSS в конструкторах

Вы также можете использовать селектор CSS в качестве первого аргумента вместо элемента DOM для инициализации плагина. В настоящее время элемент для плагина находится с помощью метода querySelector, поскольку наши плагины поддерживают только один элемент.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Асинхронные функции и библиотека «переходов»

Все методы алгоритмических API

асинхронны и возвращают пользователю значение после того, как «переход» начат и до того, как «переход» закончен.

Чтобы выполнить действие по завершению «перехода», вы можете отследить соответствующее событие.

var myCollapseEl = document.getElementById('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Действие, выполняемое после раскрытия сворачиваемой области
})

Кроме того, вызов метода переходного компонента будет проигнорирован.

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Получить экземпляр карусели

myCarouselEl. addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Перейдет к слайду 2, как только переход к слайду 1 завершится
})

carousel.to('1') // Начнется переход к слайду 1 и вернется к вызывающему
carousel.to('2') // !! Будет проигнорировано, так как переход к слайду 1 не завершен !!

Настройки по умолчанию

Вы можете изменить их для плагина, изменяя объект плагина Constructor.Default:

// изменяет значение по умолчанию для опции `keyboard` модального плагина на false
bootstrap.Modal.Default.keyboard = false

Нет конфликта (только если вы используете jQuery)

Иногда необходимо использовать плагины Bootstrap с другими средами пользовательского интерфейса. В этих обстоятельствах иногда могут возникать коллизии пространства имен. Если это произойдет, вы можете вызвать .noConflict для плагина, значение которого вы хотите вернуть.

var bootstrapButton = $.
fn.button.noConflict() // возвращает $.fn.button к ранее присвоенному значению $.fn.bootstrapBtn = bootstrapButton // придаёт $().bootstrapBtn функциональность Bootstrap

Номера версий

Доступ к версии каждого из плагинов Bootstrap можно получить через свойство VERSION конструктора плагина. Например, для плагина всплывающей подсказки:

bootstrap.Tooltip.VERSION // => "5.0.1"

Отсутствие fallback’a при отключеном JavaScript

Плагины Bootstrap не особенно изящны, когда JavaScript отключен. Если вы хотите подсказать юзеру, что делать в таком случае, используйте тэг <noscript> для пояснений о пере-включении JavaScript.

Сторонние библиотеки

Официально Bootstrap не поддерживает сторонние JavaScript библиотеки, такие как Prototype или UI-jQuery. Несмотря на использование .noConflict и группированных по функциональности обработчиков событий, при подключении сторонних библиотек могут возникнуть проблемы при компиляции. aria-[\w-]*$/i var DefaultAllowlist = { // Глобальные атрибуты разрешены для любого указанного ниже элемента. ‘*’: [‘class’, ‘dir’, ‘id’, ‘lang’, ‘role’, ARIA_ATTRIBUTE_PATTERN], a: [‘target’, ‘href’, ‘title’, ‘rel’], area: [], b: [], br: [], col: [], code: [], div: [], em: [], hr: [], h2: [], h3: [], h4: [], h5: [], h5: [], h6: [], i: [], img: [‘src’, ‘srcset’, ‘alt’, ‘title’, ‘width’, ‘height’], li: [], ol: [], p: [], pre: [], s: [], small: [], span: [], sub: [], sup: [], strong: [], u: [], ul: [] }

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

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

// Чтобы разрешить элементы таблицы
myDefaultAllowList. data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Если Вы хотите обойти нашу очистку, потому что предпочитаете использовать специальную библиотеку, например DOMPurify, Вам следует сделать следующее:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Почему устаревший jQuery по-прежнему является доминирующей библиотекой JavaScript

Richard MacManus

Ричард является старшим редактором The New Stack и ведет еженедельную колонку о тенденциях в веб-разработке и разработке приложений. Ранее он основал ReadWriteWeb в 2003 году и превратил его в один из самых влиятельных в мире новостных и аналитических сайтов о технологиях. Подпишитесь на него в Твиттере @ricmac.

jQuery — одна из старейших и наиболее влиятельных библиотек JavaScript в Интернете.

По данным BuiltWith, ошеломляющие 78% из 1 миллиона лучших веб-сайтов так или иначе используют jQuery. Что касается самой обсуждаемой сегодня библиотеки JavaScript, React, то ее используют относительно ничтожные 14%.

jQuery был запущен еще в 2006 году, когда термин «Ajax» был на пике популярности. Ajax (асинхронный JavaScript и XML) давно ушел из языка разработчиков, как и другие технологии JavaScript той ранней эры Web 2.0. Но jQuery выдержал испытание временем. Действительно, до недавнего времени он все еще рос из года в год. Чтобы узнать последние новости об этой устойчивой технологии, я поговорил с одним из разработчиков, который продолжает поддерживать jQuery, Михалом Голембиовски-Овчареком.

Gołębiowski-Owczarek был соавтором двух статей в блоге OpenJS Foundation в начале этого месяца, в которых рассказывалось о текущих «усилиях по модернизации» в проекте jQuery. В первом посте было объявлено о новой версии jQuery UI — библиотеки пользовательского интерфейса, построенной поверх основной библиотеки jQuery.

Это будет «последний запланированный выпуск проекта», что означает, что пользовательский интерфейс jQuery теперь находится «в режиме обслуживания». Во втором сообщении было объявлено об устаревании jQuery Mobile, еще одного подпроекта jQuery, который предоставил «систему пользовательского интерфейса на основе HTML5» для мобильных браузеров.

Оба этих проекта сворачиваются с 2018 года, когда они стали «почетными проектами» OpenJS Foundation. Однако ни одно из объявлений не затрагивает так называемый проект jQuery Core, который продолжает оставаться «проектом воздействия» OpenJS Foundation. Другими словами, основной проект jQuery не исчезнет в ближайшее время.

Фактор WordPress

Несмотря на его огромное использование, современные разработчики могут даже не знать, что они используют jQuery. Это потому, что он встроен в ряд крупных проектов, в первую очередь в платформу WordPress. Многие темы и плагины WordPress основаны на jQuery. Библиотека jQuery также является базовым слоем некоторых из самых популярных на сегодняшний день фреймворков и наборов инструментов JavaScript, таких как AngularJS и Bootstrap (версия 4. 0 и ниже).

«Многие сюрпризы в статистике использования jQuery происходят из-за того, что мы живем в пузыре», — сказал мне Голембиовски-Овчарек. «Большинство веб-сайтов не являются сложными веб-приложениями, нуждающимися в сложной структуре, [это] в основном статические сайты с некоторым динамическим поведением — часто написанные с использованием WordPress. jQuery по-прежнему очень популярен там; он работает и прост, поэтому люди не чувствуют необходимости прекращать его использовать».

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

«Я думаю, что это уже частично происходит», — ответил он. «Редактор Gutenberg, созданный WordPress, не зависит от jQuery. Так что, по крайней мере, на стороне администратора у них есть варианты, которые от него не зависят».

Он ожидает, что со временем WordPress перейдет на новые технологии, но это будет постепенный процесс.

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

Тем не менее, есть еще один документ, который предупреждает, что «разработчики должны знать, что отказ от библиотек, таких как jQuery, может легко потребовать большого количества исследований с их стороны, чтобы избежать ошибок (даже в современных браузерах)». Итак, несмотря на то, что «JQuery мертв?» статьи циркулируют уже несколько лет, по крайней мере, они все еще живы в экосистеме WordPress. Разработчикам предлагается заменить его, но на свой страх и риск.

Роль jQuery тогда…

Так как же jQuery стал таким внедрил в сегодняшнюю сеть? Чтобы ответить на этот вопрос, нужно немного истории.

Когда создатель jQuery Джон Резиг выпустил его в январе 2006 года на BarCampNYC, он написал, что «этот код революционизирует то, как вы можете заставить Javascript взаимодействовать с HTML». В первую очередь он имел в виду тот факт, что jQuery упростил разработчикам работу с DOM (объектной моделью документа). Помните, это было до того, как появился Google Chrome, чтобы встряхнуть мир, так что это была эпоха небольших инноваций в браузерах. У Microsoft Internet Explorer было 85-90% рынка браузеров с доминирующей версией IE6. Даже в то время IE6 имел репутацию исторически плохого браузера.

Саймон Уиллисон, которого Резиг назвал одним из тех, кто оказал на него влияние при создании jQuery, в июньском сообщении 2006 года отметил некоторые проблемы, с которыми разработчики JavaScript столкнулись с браузерами:

с несовместимостью браузера), с которыми придется иметь дело любому умеренно сложному приложению — такие вещи, как нормализованная обработка событий, выбор узла DOM, разумная анимация или перетаскивание».

Именно эту проблему и намеревался решить Ресиг, хотя сама jQuery не упоминалась в сообщении Уиллисона. В «большую четверку» ведущих библиотек JavaScript в то время входили Dojo, MochiKit, Prototype/Scriptaculous и библиотека пользовательского интерфейса Yahoo. В своем блоге примерно год спустя Уиллисон признался, что сначала он думал, что jQuery был «милым приемом», но теперь признал его «исключительно умным инженерным решением».

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

… Роль jQuery сейчас

Какова роль jQuery в современной сети, когда ведущие браузеры (даже Safari!) намного лучше соответствуют веб-стандартам? Кроме того, сам стандарт JavaScript значительно улучшился за последнее десятилетие, особенно после выпуска ECMAScript 6 в 2015 году.

Как уже отмечалось, React стал самой обсуждаемой библиотекой JavaScript на сегодняшний день. Современные фреймворки, особенно Next. js, основаны на React. Другие популярные фреймворки, такие как Angular (преемник AngularJS), имеют собственную экосистему библиотек. Современные фреймворки JavaScript также позволяют разбивать пользовательский интерфейс на компоненты, что упрощает масштабирование приложения.

«Эти фреймворки предоставляют абстракции для упрощения синхронизации между данными и представлением», — сказал Голембиовски-Овчарек о таких платформах, как Next.js и Angular. «Поэтому их пользователям больше не нужно так часто изменять DOM или обращаться к нему напрямую, и им часто не рекомендуется это делать. В такой среде использование jQuery не имеет особого смысла. Но это лишь малая часть всей веб-экосистемы».

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

«За эти годы мы значительно улучшили производительность jQuery, — сказал он, — но есть некоторые препятствия, с которыми трудно справиться. Один из них заключается в том, что, чтобы не конфликтовать с браузером, jQuery не изменяет нативные прототипы — как это делали некоторые другие библиотеки (часто позже вызывая проблемы со стандартизацией конфликтующих API), — а вместо этого оборачивает узлы DOM объектами-оболочками jQuery. Каждая операция над такой оберткой создает новую. В большинстве случаев это не имеет значения, но для очень сложных приложений с большим количеством манипуляций с DOM это иногда может стать проблемой».

Заключение

Очевидно, что jQuery больше не является оптимальным способом для разработчиков добавлять функциональные возможности JavaScript на свой веб-сайт или в приложение, особенно если его необходимо масштабировать. Тот факт, что вклад GitHub в jQuery значительно снизился в пиковые годы (с 2006 по 2013 год), также означает, что мало что можно сделать, чтобы сделать jQuery более совместимым с нашей текущей сетью.

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

В любом случае jQuery будет встроен в десятки миллионов сайтов WordPress в ближайшие годы. Он может даже пережить React.

Группа, созданная с помощью Sketch.

Ричард Макманус — старший редактор The New Stack, пишет о тенденциях в области веб-разработки и разработки приложений. Ранее он основал ReadWriteWeb в 2003 году и превратил его в один из самых влиятельных в мире новостных сайтов о технологиях. С раннего…

Узнайте больше от Ричарда Макмануса

Как исправить ошибку «jQuery не определен»

На вашем сайте что-то сломалось, вы проверили консоль браузера на наличие ошибок и обнаружили следующую ошибку:
jQuery не определен

Что теперь?!

К счастью, это одна из самых простых ошибок JavaScript для исправления 🙂 

Ошибка означает, что jQuery требуется для другого скрипта, но из-за оптимизации он недоступен при запуске этого начального скрипта и поэтому вызывает ошибку.

Сначала убедитесь, что эта ошибка вызвана WP Rocket.

Загрузите свою страницу в обход WP Rocket, добавив ?nowprocket к URL-адресу (например, example.org?nowprocket ) и проверьте, существует ли там ошибка.

Если это так, WP Rocket не является причиной, и вам следует проверить параметры JavaScript в других плагинах оптимизации или код в файле functions.php на вашем сайте.

Ошибка отсутствует на ?nowprocket

Если ошибка появляется только тогда, когда WP Rocket активен на странице, это связано с одним из этих параметров на Оптимизация файлов Вкладка:

  • Задержка выполнения JavaScript (если настроено)
  • Объединить JavaScript
  • Загрузка JavaScript отложена

Задержка выполнения JavaScript

Чтобы исключить jQuery из списка отложенных, добавьте в поле Исключенные файлы JavaScript следующее:

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js

(Этот шаблон улавливает варианты имени файла)

Объединить JavaScript

Добавьте следующее в поле Исключенные файлы JavaScript

/wp-includes/js/jquery/jquery. min.js

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

  • Загрузите свой сайт в обход WP Rocket, добавив ?nowprocket к вашему URL.
  • Перейдите на вкладку «Сеть» в инструментах разработчика вашего браузера
  • Фильтр для jquery.min.js , и если это не даст результата, попробуйте jquery.js
  • Скопируйте URL-адрес и вставьте его в поле исключения в WP Rocket
  • .

Загрузка JavaScript отложена

Чтобы исключить jQuery из списка отложенных, добавьте в поле Исключенные файлы JavaScript следующее:

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js

(Этот шаблон улавливает варианты имени файла)

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *