Что за программа jquery

Цель jQuery — облегчить использование JavaScript на вашем веб-сайте.

Что вы должны уже знать

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

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

Что такое jQuery?

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

Основная задача jQuery — упростить разработчику использование JavaScript на веб-сайте.

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

Также, jQuery упрощает множество сложных вещей от JavaScript, вроде вызовов AJAX и манипулирование деревом DOM.

Библиотека jQuery реализует следующие функции:

• Манипулирование HTML/DOM
• Манипулирование CSS
• Методы событий HTML
• Различные эффекты и анимация
• AJAX
• Вспомогательные утилиты

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

Что такое jQuery? Актуальна ли данная библиотека JavaScript в 2023-м году?

Почему jQuery?

Существует множество самых разнообразных библиотек JavaScript, однако jQuery — самый популярный и расширяемый фреймворк.

jQuery на своих сайтах используют крупнейшие мировые бренды — Google, Microsoft, IBM, Netflix и др.

Работает ли jQuery во всех браузерах?

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

Источник: msiter.ru

Зачем нам jQuery?

Здравствуйте, дамы и господа! Вот уже без малого десять лет минуло с первого релиза библиотеки jQuery, и мы решили отряхнуть пыль веков с классики. Подумываем о выпуске третьего издания гусарской баллады об этой библиотеке:

Чтобы пояснить, чем она нас привлекает в эпоху Node и ES6 (у нас в ассортименте и этого добра навалом) предлагаем познакомиться со статьей Коди Линдли, вышедшей вскоре после вышеупомянутого третьего издания

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

В этой статье хотелось бы всем еще раз рассказать, что же такое jQuery, поскольку сегодня она не менее актуальна, чем на момент появления. Вопрос о ее важности нужно соотнести с исходным назначением всего этого решения (то есть, самого API jQuery), а не с браузерными багами или недостающими возможностями. Если исходить из чего-то другого, то мы рискуем встать на позиции, с которых бракуется любая абстракция, которая может быть не абсолютно необходимой, но, все-таки, мощной и полезной.

Что такое Jquery и зачем он нужен

Прежде чем я начну пылко отстаивать честь jQuery, давайте вернемся к ее истокам, чтобы всем стало понятно, «что» такое jQuery, и «зачем» она нужна.

Что такое jQuery?

jQuery – это библиотека JavaScript (т.e., она написана на JavaScript), предназначенная для абстрагирования, выравнивания, исправления и упрощения скриптинга при работе с узлами HTML-элементов в браузере или для работы в браузере без графического интерфейса.

• Абстрагируется интерфейс объектной модели документа (он же DOM API).
• Выравниваются все различия реализаций DOM, существующие между браузерами.
• Исправляются известные браузерные баги, связанные с CSS и DOM.

Теперь позвольте объяснить, что я понимаю под “скриптингом HTML-элементов”. При помощи jQuery совершенно тривиально решаются задачи вроде «визуально скрыть второй элемент h2 в документе .html. Код jQuery для такой задачи выглядел бы так:

jQuery(‘h2:eq(1)’).hide();

Давайте немного разберем эту строку с кодом jQuery. Сначала вызывается функция jQuery() , ей мы передаем специальный CSS-селектор библиотеки jQuery, выбирающий второй элемент h2 в HTML-документе. Затем вызывается метод jQuery .hide() , скрывающий элемент h2 . Вот как прост и семантически выразителен код jQuery.

Теперь сравним его с нативным DOM-кодом, который потребовалось бы написать, если бы мы не работали с jQuery.

document.querySelectorAll(‘h2’)[1].style.setProperty(‘display’,’none’);

Какой вариант было бы удобнее написать? А читать, а отлаживать? Также учтите, что вышеприведенный нативный DOM-код предполагает, что все браузеры поддерживают использованные здесь методы DOM.

Однако оказывается, что некоторые старые браузеры не поддерживают querySelectorAll() или setProperty() . Поэтому вышеприведенный код jQuery вполне нормально работал бы в IE8, а нативный код DOM вызвал бы ошибку JavaScript. Но, все-таки, даже если бы обе строки кода работали повсюду, какую из них было бы проще читать и писать?

Имея дело с jQuery, можно не беспокоиться о том, какой браузер что поддерживает, либо какой DOM API в каком браузере может забарахлить. Работая с jQuery, вы сможете работать быстрее решать задачи на более простом коде, и при этом не беспокоиться, так как jQuery абстрагирует за вас многие проблемы.

jQuery = JavaScript?

Поскольку jQuery повсеместно распространена, то вы, возможно, не вполне представляете, где заканчивается JavaScript и начинается jQuery. Для многих веб-дизайнеров и начинающих разработчиков HTML/CSS, библиотека jQuery — это первый контакт с языком программирования JavaScript. Поэтому jQuery иногда путают с JavaScript.

Первым делом давайте оговоримся, что JavaScript – это не jQuery и даже не сам DOM API. jQuery – это сторонняя свободная библиотека, написанная на JavaScript и поддерживаемая целым сообществом разработчиков. Кроме того, jQuery не относится к числу стандартов тех организаций (напр., W3C), которые пишут спецификации HTML, CSS или DOM.

Не забывайте, что jQuery служит прежде всего как «сахар» и используется поверх DOM API. Этот сахар помогает работать с интерфейсом DOM, который печально известен своей сложностью и обилием багов.

jQuery – это просто полезная библиотека, которой можно пользоваться при написании сценариев для HTML-элементов. На практике большинство разработчиков прибегают к ней при DOM-скриптинге, поскольку ее API позволяет решить больше задач меньшим количеством кода.

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

Два краеугольных камня jQuery

Две базовые концепции, на которых основана jQuery, таковы: “найди и сделай” и “пиши меньше, делай больше.”
Две этих концепции можно развернуть и переформулировать в виде следующего утверждения: первоочередная задача jQuery заключается в организации выбора (то есть, нахождении) или в создании HTML-элементов для решения практических задач. Без jQuery для этого потребовалось бы больше кода и больше сноровки в обращении с DOM. Достаточно вспомнить рассмотренный выше пример с сокрытием элемента h2 .

Следует отметить, что круг возможностей jQuery этим не ограничивается. Она не просто абстрагирует нативные DOM-взаимодействия, но и абстрагирует асинхронные HTTP-запросы (т.н. AJAX) при помощи объекта XMLHttpRequest. Кроме того, в ней есть еще ряд вспомогательных решений на JavaScript и мелких инструментов. Но основная польза jQuery заключается именно в упрощении HTML-скриптинга и просто в том, что с ней приятно работать.

Еще добавлю, что польза jQuery – не в успешном устранении браузерных багов. «Краеугольные камни» нисколько не связаны с этими аспектами jQuery. В долгосрочном отношении самая сильная сторона jQuery заключается в том, что ее API абстрагирует DOM. И эта ценность никуда не денется.

Как jQuery сочетается с современной веб-разработкой

Библиотеке jQuery уже десять лет. Она создавалась для той эпохи веб-разработки, которую мы уже безусловно миновали. jQuery не является незаменимой технологией для работы с DOM или выполнения асинхронных HTTP-запросов. Практически все, что можно сделать с jQuery, можно сделать и без нее. А если вас интересует всего лишь пара мелких простых взаимодействий с DOM в одном-двух современных браузерах, то возможно, лучше будет воспользоваться нативными DOM-методами, а не jQuery.

Однако, при любых разработках, связанных с BOM (браузерной моделью документа) или DOM, а не только с косметическими взаимодействиями, следует пользоваться jQuery. В противном случае вы станете изобретать велосипед (т.e. элементы абстракций jQuery), а потом испытывать его на всевозможных дорожках (т.e в мобильных браузерах и браузерах для ПК).

Опытные разработчики знают, что такое «стоять на плечах гигантов», и когда следует избегать излишней сложности. В большинстве случаев нам все равно не обойтись без jQuery, когда нужно в сжатые сроки выполнить нетривиальную работу, связанную с HTML и DOM.

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

Причем jQuery совершенствуется, и с ее помощью программисты могут работать толковее и быстрее. Такова ситуация сегодня, так было и на момент создания библиотеки. Сказать «мне не нужна jQuery» — все равно, что утверждать «обойдусь без lo-dash или underscore.js». Разумеется, можно без них обойтись. Но об их ценности судят не по этому.
Их ценность — в API. Из-за излишней сложности разработка может замедляться. Поэтому нам и нравятся такие вещи как lo-dash и jQuery – с ними все упрощается. А поскольку jQuery облегчает выполнение сложных задач (например, писать сценарии для HTML), она не устареет.

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

Приложение – важные факты об jQuery

Наконец, перечислю некоторые важные факты, касающиеся jQuery.

• Библиотеку jQuery написал Джон Резиг (John Resig), ее релиз состоялся 26 августа 2006. Джон признавался, что написал этот код, чтобы “произвести революцию во взаимодействии JavaScript с HTML”.
• jQuery считается наиболее популярной и востребованной современной библиотекой JavaScript.
• jQuery – свободное ПО, предоставляемое по лицензии MIT.
• Существует две версии jQuery. Версия 1.x поддерживает Internet Explorer 6, 7 и 8, а 2.x поддерживает только IE9+. Если вам требуется поддержка IE8, то придется работать с версией 1.x. Но это нормально, обе версии по-прежнему активно разрабатываются.
• Минимальная версия jQuery 2.x имеет размер 82kb. В архиве Gzip — около 28k.
• Минимальная версия jQuery 1.x имеет размер 96kb. В архиве Gzip — около 32k.
• Исходный код jQuery доступен на Github.
• На основе исходного кода с Github можно создать собственную версию jQuery.
• jQuery можно установить при помощи менеджера пакетов bower или npm (т.e. $ bower install jquery or npm install jquery ).
• У jQuery есть официальная сеть CDN, в которой можно взять различные версии jQuery.
• jQuery имеет простую архитектуру на основе плагинов, поэтому любой желающий может добавлять в нее собственные методы.
• jQuery обладает обширным набором плагинов. Можно приобрести высококачественные плагины для enterprise-разработки (напр. Kendo UI) или воспользоваться не менее классными бесплатными (напр. Bootstrap).
• jQuery можно разбить на категории (в соответствии с разбиением документации API ).

• ajax
• attributes
• callbacks object
• core
• CSS
• data
• deferred object
• dimensions
• effects
• events
• forms
• internals
• manipulation
• miscellaneous
• offset
• properties
• selectors
• traversing
• utilities

Источник: habr.com

Что такое JQuery?

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

Все о JQuery

John Resig, выпустив в 2006 году библиотеку JQuery, видел ее, как кроссплатформенную JS библиотеку, призванную облегчить написание программных решений на стороне клиента.

Библиотека была очень нужна в то время, так как на момент релиза в браузерах Internet Explorer, Firefox и позже Google Chrome (вышедший в 2008) были разные подходы к написанию JS кода.

Из Wikipedia: «JQuery – кроссплатформенная JavaScript библиотека, призванная упростить написание скриптов в HTML. На сегодняшний день JQuery является самой популярной JS библиотекой. 65% из 10 миллионов веб-сайтов с самым высоким трафиком используют данную библиотеку. JQuery является абсолютно бесплатным программным обеспечением с открытым исходным кодом, распространяющемся по лицензии MIT License.»

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

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

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

С сайта jQuery: «JQuery – быстрая, легковесная и многофункциональная JavaScript библиотека. С помощью простого и кроссбраузерного API библиотека сильно упрощает перемещение и манипуляции с HTML документами, обработку событий, анимацию, а также работу с технологией Ajax. Благодаря своей гибкости и расширяемости JQuery изменил жизнь миллионов людей, пишущих на JavaScript.»

И что это все значит для нас, разработчиков? Лучший способ понять все возможности библиотеки это посмотреть, что она может нам предложить.

Перемещение по HTML документу

Когда браузер отрисовывает веб-страницу, мы видим перед собой только визуальное представление такого понятия, как DOM (объектной модели документа). Эту модель можно концептуально представить в виде дерева с узлами, корнями и листьями. К примеру, представление модели с сайта Web Step Book:

В JQuery вы легко можете перемещаться по DOM в поисках нужных узлов, элементов или значений, которые нужно получить. Т.е. если вы ищите DIV с каким-либо текстом, у которого задан ID, то это очень просто.

* Код ищет блок div с ID «my unique element»
* и прячет его.
$ ( ‘div#my-unique-element’ ) . hide ( ) ;

Если нужно пройтись циклом по всем тегам span, это тоже можно сделать:

* Основной способ объявления циклов в jQuery. Будут
* найдены все теги span на странице, и вы сможете
* пройтись по каждому из них в цикле.
$ ( ‘span’ ) . each ( function ( ) <
// Тут можно работать с тегами span

Циклы мы подробнее разберем в следующей секции, там мы покажем кое-какой дополнительный функционал по манипуляциям над страницей. Это простые примеры, но код может стать гораздо сложнее, особенно если использовать сцепку методов. К примеру:

$ excerpt . on ( ‘keydown’ , function ( evt ) <
if ( ( 17 === evt . keyCode | | 91 === evt . keyCode ) | | 86 === evt . keyCode ) <
if ( — 1 === $ . inArray ( evt . keyCode , keymap ) ) <
keymap . push ( evt . keyCode ) ;
> ) . on ( ‘keyup’ , function ( ) <
if ( user_has_pasted_content ( keymap ) ) <
resize_textarea ( this ) ;

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

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

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

Манипуляции с HTML документами

Если говорить о реальной манипуляции DOM, в JQuery обширный функционал, с помощью которого можно изменять то, что видят пользователи.

Некоторые из функций совсем простые, такие как show и hide, с помощью которых можно показывать и прятать элементы, которые не должны быть видимыми на странице. С помощью других функций можно создавать новые элементы и вставлять их перед закрывающим тегом существующего элемента (функция append) или вставлять новые теги после открывающего тега существующего элемента (функция prepend). Добавить класс ко всем элементам span можно через цикл:

* Основной способ объявления циклов в jQuery. Сначала будут
* найдены все теги span на странице, потом
* к ним будет добавлен специальный класс.
$ ( ‘span’ ) . each ( function ( ) <
$ ( this ) . addClass ( ‘my-custom-class’ ) ;

Это лишь малая толика того, что можно сделать с DOM в JQuery. Если зайти на сайт API, под разделом Manipulation можно посмотреть весь список доступных манипуляций (а также хорошие примеры). Мы можем:

Задавать высоту и ширину документа в целом, окна или одного элемента

Получать значения заданного элемента (если они у него есть)

И многое другое

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

Обработка событий

Если вы совсем новичок в JavaScript, то ключом к пониманию того, как JS взаимодействует со страницей, отображаемой в браузере, является понимание того, как язык обрабатывает различные события.

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

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

К счастью в JQuery всем именам присвоены специальные имена, с помощью которых мы можем обрабатывать все события во всех браузерах одинаково.

Анимация

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

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

В последнем случае предполагается некоторый опыт работы с API, который приходит постепенно при работе с библиотекой и документацией.

Ajax

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

Поддержка у Ajax уже намного лучше, чем 5 лет назад, но реализация API все же может чуть-чуть отличаться в разных браузерах. Т.е. нам нужно писать Ajax код под браузеры от Microsoft, Google, Apple, Chrome и т.д. отдельно.

Без JQuery нам бы пришлось писать код под все браузеры, однако благодаря JQuery мы получаем кроссбраузерный способ. По факту, библиотека облегчает обработку GET и POST запросов, а более продвинутые запросы можно делать через метод $.ajax. Как только вы привыкнете к этому API в ваших приложениях, вы не сможете без него обойтись.

Немного о расширяемости

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

К примеру, вы работаете в определенной области и создаете один и тот же функционал для приложений. Или у вас есть продукт, который вы продаете, и у вас есть какой-то код, который нужно интегрировать в JQuery, но для разных проектов будут нужны различные параметры. Что тогда делать?

К нашему счастью в JQuery поддерживаются плагины. Т.е. мы, как разработчики, можем не просто выбирать из списка готовых плагинов (некоторые из них можно посмотреть на сайте jQuery и GitHub), но можем и сами их писать.