что это за библиотека JavaScript
jQuery — библиотека для языка программирования JavaScript, набор инструментов для веб-разработки. С ее помощью разработчик обращается к разным элементам интернет-страницы и управляет ее содержимым. Так можно изменять страницу в зависимости от настроек и действий пользователя.
Логотип jQueryjQuery написана на JavaScript, популярном языке для веб-приложений и работы с интерфейсами. Первоначальная цель создания библиотеки — сделать язык более гибким и удобным, чтобы разрабатывать сайты было проще.
Библиотека кроссплатформенная и кроссбраузерная. Это значит, что ей можно пользоваться в любых операционных системах, а написанный на ней код поддерживают любые браузеры. Исключение для новых версий составляют старые браузеры вроде Internet Explorer 6, но ими сейчас практически не пользуются.
jQuery имеет лицензию MIT, она бесплатная и открытая. Существуют и другие проекты: jQuery UI и jQuery Mobile. Их можно считать дополнительными расширениями для основной библиотеки, они предназначены для сложных интерфейсов и для мобильной разработки.
Название читается как «джейквери».
Для чего нужна jQuery
Библиотекой пользуются фронтенд-разработчики, которые занимаются созданием видимой части сайтов и веб-приложений. Часто это программисты, которые поддерживают legacy-код в долгоиграющих проектах.
jQuery используется:
- для быстрой связи JavaScript с HTML-элементами.
- работы с селекторами CSS.
- навигации по DOM-дереву: обхода, поиска элементов, их изменения.
- работы с событиями на странице и реакциями на них.
- реализации AJAX — подхода, при котором страница фоново обменивается данными с сервером.
- создания анимации и визуальных эффектов на веб-странице.
Актуальность jQuery в 2022 году
Сейчас jQuery во многом вытеснили другие популярные фреймворки и расширения для JavaScript. Поэтому библиотека частично считается устаревшей, и в новых проектах ей пользуются нечасто. Это произошло, потому что новые фреймворки и обновления языка реализовали практически ту же функциональность, что у нее.
Но jQuery была актуальной много лет начиная с момента появления, и на ней написано много проектов, которые поддерживаются до сих пор. Поэтому начинающему веб-разработчику стоит иметь представление о библиотеке. Скорее всего, он рано или поздно столкнется с кодом на jQuery, особенно если будет работать в проектах с долгой историей.
А вот в новых проектах обычно пользуются другими инструментами. Они актуальнее и современнее.
Как работает jQuery
Принцип библиотеки — JavaScript отделяется от HTML-разметки. Сейчас эта идея применяется в веб-разработке повсеместно. Скрипты должны одинаково работать в разных браузерах, и их должно быть легко масштабировать, а при слишком сильной связи с элементами это сложно.
Поэтому jQuery не встраивается в разметку напрямую — вместо этого она ищет нужный элемент по селектору и управляет им после нахождения. Сейчас так можно сделать и в «чистом» JavaScript, но в старых версиях языка это была непростая задача.
Еще одна идея библиотеки — расширяемость.
Она состоит из компактного ядра, в котором собраны самые важные для веб-разработки возможности, и дополнительных плагинов. Если разработчику понадобится работать с какой-то специфической задачей, он может скачать плагин для этой задачи. Такое разделение нужно, чтобы не перегружать основное ядро: если оно будет слишком большим, это негативно скажется на скорости загрузки сайта.
Что можно делать с помощью jQuery
Искать элементы. HTML-элементы — это кнопки, блоки текста, ссылки, картинки и остальное содержимое веб-страницы. Их можно искать с помощью селекторов — обращений по типу, классу, имени и другим свойствам. Например, если у элемента есть класс page-header, то селектор по классу page-header найдет его.
jQuery умеет находить элементы по селекторам и умела делать это даже тогда, когда такой возможности не было в самом JavaScript. И сейчас ее методы бывают удобнее, чем поиск элементов с помощью нативного языка.
Это называется возможностью проходить по DOM-дереву — представлению страницы в виде древовидной схемы.
jQuery может легко найти любую «ветку» или узел этой схемы.
Изменять элементы. Простой поиск элементов сам по себе ничего не дает. Он нужен, чтобы изменять найденные сущности. Например, заменить информацию в блоке или сделать невидимой неактуальную подсказку — это можно сделать с помощью jQuery. Это только примеры, возможных изменений куда больше. Но суть одинакова: страница становится динамичной и меняется в зависимости от обстоятельств.
Реагировать на события. Манипуляции с элементами обычно происходят не просто так, а если случится какое-то событие. Например, нажатие кнопки или переход по ссылке, прокручивание колесика мыши, нахождение на странице 10 секунд и дольше. Событий в языке огромное количество, и jQuery умеет их обрабатывать.
JavaScript тоже может работать с событиями, но изначально каждый браузер реализовывал эту обработку по-своему. jQuery унифицировала процесс и упростила создание сайтов, чтобы они могли одинаково работать во всех браузерах.
Фоново подгружать контент. В jQuery реализована удобная и простая работа с AJAX. Мы уже упоминали его выше. Это технология фоновой загрузки данных: человек просматривает страницу, и по необходимости на ней подгружается нужная информация. При этом страница не перезагружается, данные не пропадают, и пользователю не приходится ждать. Загрузка происходит очень быстро. Пример — автоматическая подгрузка товаров при пролистывании каталога интернет-магазина. Так сайты становятся более «отзывчивыми» и удобными, и jQuery в этом помогает.
Создавать эффекты и анимацию. В годы появления jQuery в «чистом» языке не было возможности с легкостью создавать нужные эффекты. Иногда для анимации использовали тяжеловесный Flash, который медленно грузился. jQuery сделала визуализацию и анимацию легче. С ней можно «научить» элемент правильно реагировать на определенные события: изменять внешний вид или проигрывать какую-нибудь анимацию. Эффекты в ней призваны показать пользователю, что происходит на экране.
Преимущества jQuery
Простота. jQuery относительно легко освоить, у библиотеки низкий порог вхождения, и в ней легко сможет разобраться новичок. По ней хорошая документация и много обучающих материалов, в том числе на русском языке. Уже через короткое время можно начать работать с реальными проектами.
Понятный код. Написанный на jQuery код понятный и просто читается, у него ясный синтаксис. Поэтому в нем относительно легко разобраться, и это важно, если вы работаете с кодом других людей.
Компактность. В сжатом виде jQuery весит 30 Кб, это не так много. А код на ней компактный и короткий, поэтому быстро пишется.
Распространенность. На jQuery написано огромное количество проектов разных лет. Это в том числе CMS, системы для быстрого создания сайтов — на них работает большинство веб-ресурсов.
Расширяемость. Идея с небольшим ядром и плагинами, которые подключаются по необходимости, экономит место и ресурсы.
Если разработчику не нужно решать специфические задачи, то и функции для их решения не нужны. Поэтому они не входят в библиотеку по умолчанию, но если понадобятся, их легко скачать и установить.
Благодаря этому подходу jQuery небольшая, легкая и быстрая.
Недостатки jQuery
Большое количество legacy-кода. Большинство проектов на jQuery сейчас — это старый код. Его сложнее поддерживать, есть много решений, которые уже не используются, считаются неоптимальными или неактуальными. Документация по такому коду может быть хуже, чем по современному, а писавшие его программисты обычно уже не помнят, что в нем происходило.
Избыточность. Когда библиотека только появилась, JavaScript умел меньше, чем сейчас. jQuery помогала выполнять действия, с которыми не мог справиться нативный язык. Но с тех пор JavaScript сильно изменился, стал более функциональным и гибким. Поэтому сейчас многие возможности jQuery избыточны — то же самое можно выполнить с помощью нативного языка или других фреймворков вроде React или Vue.
Есть смысл ее применять, если на ней завязаны важные функции сайта. Для небольших элементов лучше воспользоваться «чистым» языком или фреймворками. Подключение еще одной библиотеки — это лишняя нагрузка.
Снижение производительности. Страницы, написанные с jQuery, могут дольше грузиться, а сам код — работать несколько медленнее, чем при использовании нативных возможностей языка. Это не всегда критично, но это стоит учитывать в ситуациях, когда без jQuery можно легко обойтись.
Как начать работать с jQuery
Библиотеку можно скачать с официального сайта, с помощью CDN или из репозитория на GitHub. Она существует в двух версиях: полная и облегченная (slim). В полной версии есть поддержка AJAX и некоторые дополнительные эффекты. Это нужно не для всех сайтов, поэтому для многих проектов достаточно облегченной версии.
Каждая из версий есть в двух вариантах. Один из них — для разработки: там приведен полный код библиотеки, понятный для чтения человеком.
Второй — для продакшна: это так называемый минимизированный файл с припиской min в названии. В нем убраны пробелы, переносы строк, комментарии и табуляция, а имена переменных сокращены и сжаты. Функциональность у кода та же самая, но читать его очень сложно. Он нужен не для чтения, а для выкладывания проекта. Минимизированный файл меньше весит и быстрее грузится, поэтому используется для выпущенных в продакшн версий.
Библиотеку можно скачать через браузер, а можно установить с помощью пакетных менеджеров npm или yarn. Она выглядит как файл с расширением .js: его разработчик помещает в папку проекта и просто подключает к своему коду.
После этого можно пользоваться всеми возможностями jQuery.
Переход с jQuery на Vue.js
Об авторе
Сара Дрезнер — заслуженный спикер и senior разработчик в Microsoft, автор статьей о трюках и хитростях CSS.
Нельзя просто так упустить все интриги, возросшие вокруг существующий JavaScript — фреймворков, но также не стоит забывать, что они явно не являются универсальными и каждый тип проекта требует что-то «свое».
Что многие люди могут не знать, так это то, что вы можете легко внедрить Vue.js в ваш проект точно так же, как вы внедряете jQuery. Не нужно ничего перестраивать. Vue достаточно гибкий — в том плане, что вы можете его использовать прямо в HTML.
Итак, представим, что ваш код имеет следующий вид:
Вы можете в буквальном смысле изменить скрипт-тег и продолжить использовать HTML & JS точно так же, как вы использовали его до этого. Вам не нужно ничего переписывать.
Вы можете заменить тэги и оставить разметку «как есть». Что радует, так это несказанная простота, гибкость и адаптируемость Vue.js, что вы можете увидеть на протяжении чтения данной статьи. Что же касательно размера, тут нас тоже ждет приятная особенность: всего лишь 86 КБ для версии 2.5.3 и 87 для более новой версии 3.2.1.
Давайте рассмотрим некоторые наиболее распространенные примеры использования нового фреймворка и убедимся в его неоспоримых преимуществах.
Перехват пользовательского ввода
Наиболее распространенным примером использования JavaScript является отлавливание введенной пользователем в веб-формы информации. В нашем примере для упрощения мы не будем рассматривать комплексные формы, но для понимания этого будет целиком достаточно.
Чтобы отловить информацию, вводимую пользователем, мы можем сделать следующее:
Я использую этот пример, потому что он наглядно демонстрирует некоторые сильные стороны Vue.
js. Он реализует особенности react, что делает его очень чуствительным в плане изменений. Демонстрацию вы можете увидеть, когда попытаетесь ввести что-то. Как можно заметить, вся информация обновляется практически мгновенно.
Вы также можете заметить это и в версии с JQuery — контролируя элементы DOM-дерева и работая с событиями, вызываемыми при изменении содержания его элементов.
В версии Vue.js мы сохраняем состояние элемента. Если более детально, то мы привязываем к нашему конечному скрипту DOM-элемент напрямую. Особенность в том, что даже в случае изменения структуры DOM-дерева и HTML в целом, конкретный DOM-элемент будет надежно привязан к нашему Vue.js — событию. Де-факто, на вводе мы используем атрибут v-model, тем самым обозначая хранение информации этого поля в JavaScript.
Однако это далеко не единственный способ хранения состояния. Потому двигаемся дальше.
Хранение введенных данных в рамках индивидуального события
Особенность работы Vue.
js заключается в том, что нам не нужно думать об особенностях реализации конкретного DOM-события. По сути, мы уже знаем, что мы желаем «перехватить». Мы просто указываем событию, на который из элементов срабатывать. Тогда как с использованием JQuery мы жестко привязываемся к структуре DOM и прочим DOM-событиям. Увидеть разницу мы сможем в следующем примере:
В этой версии JQuery был упрощен, так как нам не нужно было отлавливать события при каждом нажатии клавиши, но в то же время все остальные условия соблюдены. Наш код в jQuery также будет подобен этому:
«Отловите элемент, просмотрите, что он делает, перехватывайте изменения, обрабатывайте полученные данные.»
Сравним: во Vue мы контролируем все изменения DOM-дерева. Мы привязываемся к конкретным элементам. По сути, мы имеем небольшую абстракцию под названием v-model.
Классы
Следующая вещь, которую мы сейчас рассмотрим, является привязкой CSS-классов, так как наш всеми любимый и обожаемый Гугл сообщает, что это также наиболее популярный случай использования jQuery.
Опять же, что мы здесь можем видеть, так это то, что в версии с jQuery мы храним состояние объекта в DOM-дереве. Элемент имеет свой класс, jQuery принимает решение на базе существующего класса, проверяющего привязку к DOM. В версии с Vue мы храним условие и применяем к нему стили в зависимости от состояния этого условия. Мы не обращаемся к DOM за этой информацией, мы храним ее сами.
red. Даже состояния доступа, aria-pressed, сохраняются гораздо быстрее, так как у нас нет необходимости хранить все в vue-скрипте. Мы можем изменять состояние напрямую при помощи слова active.
Если вы думали, что использование Vue породит большее количество кода, последние несколько примеров должны были заставить вас убедиться в обратном.
Скрытие и отображение
Другой общий случай использования jQuery является отображением и сокрытием элементов. jQuery всегда хорошо справлялся с этой задачей, потому давайте посмотрим, как все будет выглядеть со стороны Vue.
Видео курсы по схожей тематике:
Java Стартовый
Евгений Тихонов
Ruby Базовый
Юля Гончаренко
Практикум курса C# Стартовый на примерах из GTA 5
Роман Самчук
Оба фреймворка успешно справляются с поставленной задачей, но все же и здесь есть свои причины, почему я отдаю предпочтение Vue.
js. Vue обладает инструментом под названием Vue devtolls. Это не то же самое, что Chrome devtools, но когда я их использую, я получаю больше специфической информации, связанной непосредственно с Vue.js
И в jQuery и в Vue элементы успешно скрываются и появляются вновь. Но что, если что-то пойдет не так? Что, если что-то в нашем коде работает не так, как это было задумано? В случае с jQuery для отладки мы бы скорее всего использовали console.log и были бы таковы.
Это все, конечно, хорошо, но в случае с Vue он сам нам предоставит всю необходимую информацию о нем самом. На пикче ниже мы можем увидеть, как элемент скрывается\появляется и как изменяется его состояние в специальном окне. Если DOM по какой-то причине не будет работать так, как мы от него ожидаем, вся необходимая информация будет легко отображена во Vue.
Что еще мне нравится, так это то, что v-if очень удобно принять в других случаях. Я могу использовать v-show, если вещь будет скрыватся и отображатся часто: v-if полностью «демонтирует» элемент, тогда как v-show просто изменит видимость.
В этом примере значения с приставкой Vue реагируют на код достаточно натурально и с меньшим объемом кода. Однажды попробовав этот стиль, логику приложений, разработанных под Vue, использовать будет значительно проще.
Передача формы
Так уж исторически сложилось, что отправка формы посредством Ajax является наиболее «каноничным» примером использования jQuery. А потому мы просто обязаны рассмотреть альтернативу. На самом деле, Vue не обладает встроенными вещами навроде Ajax. Обычно вместо этого здесь используется Axious (js-библиотека для генерации http-запросов).
Этот пример будет несколько более сложным, чем предыдущие.
Мы собираемся произвести следующее:
- До начала ввода в форму клавиша будет серой. После чего она примет «активный» класс и станет голубой.
- Когда мы отправляем форму, страница не будет перезагружаться.
- Как только форма принята, мы отобразим ответ на странице.
Здесь за управление классом клавиши отвечают строки 2-10. Похоже на то, что мы делали ранее. Мы передаем в параметр под названием событие форму и говорим event.preventDefault(), дабы запретить перезагрузку страницы. После чего мы собираем всю информацию с формы и отправляем через Ajax запрос (.done()).
В версии Vue мы биндим поля через v-model. Мы проверяем имена для связки с классом. Вместо передачи информации и загрузки страницы event.preventDefault(), нам всего лишь нужно написать @submit.
prevent в нашем элементе формы. Для передачи запроса же мы используем Axious.
Конечно, так же можно произвести и валидацию, отлавливание ошибок, тесты и так далее. Но для понимания логики работы с Vue, как мне кажется, достаточно и этих небольших примеров.
И в заключение
Бесплатные вебинары по схожей тематике:
День открытых дверей в CyberBionic Systematics.
Редакция ITVDN
Как стать PHP разработчиком? — вебинары ITVDN
Артем Кондранин
Кто есть кто в IT компании. Структуры и роли
Александр Марченко
Нет ничего плохого в том, чтобы продолжать использовать jQuery.
Цель этой статьи — всего лишь показать, что Vue так же хорош в качестве некой такой абстракции для небольших сайтов. Этот фреймворк оптимален в размерах, прост в работе и освоении, достаточно тривиален и прекрасно интегрируется в HTML & JS без необходимости перестраивать приложение.
Благодаря гибкости Vue передача кода на стадию билда и общая компонентная структура не являются чем-то сложным. На самом деле — это очень даже весело. Попробуйте сами! Вы можете скаффолдить весь Vue на уровне продакшена просто при помощи пары терминальных команд. Подобным образом вы можете работать с отдельными компонентами, не трогая HTML & JS. Вам не нужно менять конфигурацию вашего веб-пака, разве что вы не захотите сделать что-то специфическое.
Vue хорош во всем, что касается адаптивности, так как вам не нужно ничего менять в вашей разметке, чтобы работать с новым, качественными фреймворком.
Удачи в разработке!
Автор перевода: Евгений Лукашук
Источник
Как использовать метод jQuery replaceWith | Кевин Чисхолм
Метод replaceWith() позволяет полностью удалить элемент и поместить на его место другой.
В большинстве случаев jQuery используется для добавления обработчиков событий щелчка к элементам DOM, и в этом нет ничего плохого. На самом деле, jQuery настолько полезен в этом контексте, что трудно возражать против его использования для обработки/делегирования событий. Но просто имейте в виду… есть и другие задачи, которые могут возникнуть, и некоторые из них могут быть довольно запутанными. Одним из примеров является замена одного элемента DOM другим. Сейчас это может показаться простым, но с ванильным JavaScript такая работа может стать довольно утомительной. Обычно я рекомендую научиться делать с помощью ванильного JavaScript то, что вы хотели бы делать с помощью jQuery, но бывают случаи, когда такое переизобретение колеса становится плохой идеей.
Итак, здесь на помощь приходит метод jQuery replaceWith() ; это позволяет вам вырезать один кусок страницы и заменить его другим. Вы просто указываете исходный раздел DOM, а также новый фрагмент, а затем jQuery позаботится обо всей работе.
И что делает этот метод таким полезным, так это выразительный синтаксис; на высоком уровне это просто A.replaceWith(B) . Вы действительно должны поблагодарить людей из jQuery за то, что они вложили много абстракции в этот единственный метод. Если вы мне не верите, попробуйте сделать это сами, используя обычный JavaScript. Я думаю, вы обнаружите, что это довольно утомительно.
Пример №1
В примере №1 мы прикрепили обработчик события к элементу с идентификатором: «foo». При щелчке этот элемент удаляется со страницы и заменяется фрагментом разметки, определенным в строке. Да, это так просто, и, безусловно, с помощью этого метода jQuery можно делать гораздо больше интересных вещей.
Резюме
Заменить один раздел страницы другим фрагментом разметки довольно просто с помощью метода jQuery replaceWith(). Синтаксис очень простой, и если вы уже знакомы с jQuery, у вас есть немало возможностей.
Полезные ссылки для метода jQuery replaceWith
http://api.
jquery.com/replaceWith/
http://www.w3schools.com/jquery/html_replacewith.asp
http://stackoverflow.com/ вопросы/730916/в чем разница между jquerys-replacewith-and-html
http://stackoverflow.com/questions/5248721/jquery-replacewith-fade-animate
Скидка 10%! — Используйте код KEVIN10
Подпишитесь на этот блог
Получайте уведомления по электронной почте о новых сообщениях.
Оставить это пустым:Оставить это тоже пустым:Не изменять: Ваш адрес электронной почты:
Поиск в этом блоге
Искать:Категории
АЯКС
Веб-сервисы Amazon (AWS)
Угловой
Угловой 2
Угловые сервисы
Массив.прототип
Массивы
Асинхронный
Определение асинхронного модуля
Магистраль
Комбинаторы
CSS
CSS3
Экспресс JS
Функции
Gulp.js
HTML5
Интернет
Жасмин
Джава
JavaScript
JavaScript-шаблоны
Инструменты JavaScript
Весенняя загрузка Java
jQuery
JSON
Меньше CSS
Мапбокс
Мобильный
MongoDB
Node.
js
Шаблоны Node.js
НПМ
Объектно-ориентированный JavaScript
Позиция
Реагировать
Реагировать на родной
Строка.прототип
Видео
Веб-разработка
Веб-производительность
Веб-скрейпинг
Теги
ajax угловатый угловой.js множество асинхронный хребет backbone.js перезвонить Каскадные таблицы стилей сорт контекст css директива событие выражать функция функции как HTML HTML5 http JavaScript jquery json урок литералы карта модуль узел узел.js нпм объект объектно-ориентированный объекты упс Опытный образец требовать маршрут объем сервер одностраничное приложение спа этот руководство просмотр
Контактное лицо
Электронная почта : [email protected]
Телефон: : + 1 (212) 465-3196
Последние сообщения
- Scraper API — введение 17 октября 2020 г.
- addEventListener — введение в собственные обработчики событий JavaScript
9 июня 2020 г.
