jQuery — javascript библиотека, использование которой делает разработку на javascript кода намного быстрее и проще. В недалеком прошлом эта библиотека позволяла быстро разрабатывать скрипты. В настоящее время чистый javascript продвинулся настолько, что использование jQuery для многих проектов становится ненужным. Например: как обойтись без jQuery.
Подключение jQuery к вашему сайту
Можно скачать библиотеку jQuery с официального сайта и положить у себя на сайте, после этого подключить следующей командой:
Можно воспользоваться хостингом библиотек от гугла или яндекса, тогда соответственно вызов будет следующий:
Особенно актуально, если используете метрику или аналитику.
Возможности библиотеки jQuery
Формат запроса jQuery выглядит следующим образом:
$(‘селектор’).действие(‘свойства действия’);
Поиск элемента на странице (селекторы)
Комбинированные селекторы
Селекторы, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах CSS
next»
Селекторы по атрибутам
= value]»
Простые фильтры
Фильтры, с помощью которых можно уточнить результат других селекторов. По назначению и синтаксису они очень похожи на псевдоклассы в CSS
| «:focus» | элемент, находящийся в фокусе |
| «:first» | первый найденный элемент |
| «:last» | последний найденный элемент |
| «:eq( )» | элемент идущий под заданным номером среди выбранных |
| «:not(selector)» | все найденные элементы, кроме указанных в selector |
| «:even» | элементы с четными номерами позиций, в наборе выбранных элементов |
| «:odd» | элементы с нечетными номерами позиций, в наборе выбранных элементов |
| «:gt( )» | элементы с индексом превышающим n |
| «:lt( )» | элементы с индексом меньшим, чем n |
| «:header» | элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.) |
| «:animated» | элементы, которые в данный момент задействованы в анимации |
| «:hidden» | невидимые элементы страницы |
| «:visible» | видимые элементы страницы |
| «:lang(language)» | элементы, в которых указаны языки содержимого |
| «:root» | элемент, который является корневым в документе |
Фильтры по содержимому
| «:contains(text)» | элементы, содержащие заданный текст |
| «:empty» | элементы без содержимого (без текста и других элементов) |
| «:has(selector)» | элементы, которые содержат хотя бы один элемент из selector |
| «:parent» | непустые элементы |
Фильтры дочерних элементов
Данные селекторы отфильтровывают элементы по их расположению в родительских элементах
Что такое jQuery? Как его скачать и подключить к сайту?
В этой статье вы узнаете: что такое JavaScript библиотека jQuery, как скачать последнюю версию и подключить её к сайту, как установить скрипт с Google CDN и других хранилищ на страницу, а также чем отличается обычная версия от slim и сжатая от не сжатой.
Что такое jQuery и её поддержка браузерами
jQuery — это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше».
Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.
Сейчас последней версией jQuery является 3.5.1. Она поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+.
Преимущества и недостатки jQuery
Преимущества, которые даёт нам библиотеки jQuery при её использовании для написания клиентских сценариев:
Кроме преимуществ, приведённых выше, у библиотеки jQuery имеются конечно и недостатки.
К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.
Статистика использования jQuery
Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»
Что можно делать с jQuery
jQuery позволяет очень легко:
Этот список можно продолжить дальше, т.к. jQuery содержит большое количество функций, которые значительно упрощают написание кода для решения различных задач, стоящих перед веб-разработчиками.
Как скачать jQuery
Скачать бесплатно библиотеку jQuery можно с официального сайта.
Кроме этого, каждая из них доступна нам как в сжатом (с суффиксом min ) так и в несжатом виде.
Несжатый вариант библиотеки рекомендуется использовать только во время разработки проекта или его отладки. Кроме этого, его ещё используют для изучения исходного кода jQuery. В нём можно посмотреть устройство как всей библиотеки, так и определённой функции.
На продакшене лучше применять сжатый вариант jQuery (с расширением min.js ). Он меньше весит, и, следовательно, быстрее загружается. А это очень важно для производительности сайта.
Уменьшение объема JavaScript кода библиотеки jQuery осуществляется за счёт минимизации. Минимизация – это процесс, который заключается в удалении из исходного кода всего лишнего (комментариев, незначащих пробелов, переносов строк, символов табуляции) и замене имен функций и переменных на более короткие.
jQuery 1.x следует использовать если нужна поддержка IE 6 – 8.
jQuery 2.x построено на том же API, что 1.x. Но имеет меньший размер и более высокую производительность. Это было достигнуто благодаря тому, что из неё был удалён устаревший код, необходимый для поддержки IE 6 – 8. Таким образом 2.x можно использовать только в том случае, если вам не нужна поддержка этих старых браузеров.
После того как вы определись какой вариант библиотеки вам нужен, его необходимо загрузить.
Для скачивания jQuery с официального сайта нажмите правой кнопкой мыши на нужную ссылку и выберите пункт «Сохранить ссылку как. ».
Как подключить скрипт jQuery в html
Подключение jQuery к странице осуществляется также как и любого другого JavaScript файла. Т.е. посредством добавления в HTML тега
Зачем вам jQuery
Каждый год говорят о том, что jQuery уже не тот, но продолжают его использовать. Почему? Вот почему.
Представьте, что вам нужно на сайт добавить форму обратной связи и кнопку быстрого заказа. Вы пишете 200 строк на JavaScript: нужно, чтобы поля проверялись, данные отправлялись, если человек не заполнил — на него выпадала выпадайка и т. д. Всё это нужно внимательно описать, запрограммировать и протестировать. На это уходит, допустим, полтора-два часа. Работает? Да. Получилось быстро? Не очень. Чтобы было быстрее, многие используют jQuery.
jQuery — специальная библиотека, написанная на JavaScript, в которой многие типовые действия прописаны как одна команда. Представьте, что это набор готовых деталей конструктора, из которого собрать программу получается быстрее. Правда, не все задачи решаются деталями конструктора…
Чтобы было понятно, насколько jQuery может ускорить написание кода, вот пример. Двум программистам дали задачу: сделать так, чтобы по клику в самом низу страницы она сама плавно прокручивалась до самого верха. Один решил эту задачу на чистом JavaScript:
Другой использовал jQuery. У него код состоит из одной строки:
У обоих программистов код работает одинаково, но второй решил задачу гораздо быстрее.
Эта команда говорит браузеру: «Иди на сервер Яндекса по вот такому пути, найди там файл jquery.min.js, будем работать с этой библиотекой и писать на ней скрипты». Дальше мы собрали список плюсов и самых веских причин использовать jQuery в проектах. Это будет полезно знать тем, кто хочет делать что-то для веба или лучше понимать, как устроены сайты изнутри.
Плюс: простой синтаксис
jQuery читается несколько проще, чем JavaScript, многие вещи сделаны понятнее. Например, нам нужно скрыть на странице второй по счету заголовок уровня H2.
Плюс: плагины на любой случай
Что бы вы ни хотели сделать на веб-странице, скорее всего, для этого уже есть готовые плагины на jQuery. Формы подписки, всплывающая реклама, захват телефонного номера — всё это уже есть и доступно за пару команд.
Scrollpane — кроссбраузерный скролбар любого элемента на странице;
jReject — проверяет, не устарел ли используемый браузер;
GridScrolling — навигация по сайту с помощью клавиш;
FlickerPlate — плагин для слайдеров с поддержкой сенсорных экранов;
Animsition — создание анимированной загрузки страниц на сайте;
SlideBars — создание адаптивного меню на сайте
и ещё тысячи готовых плагинов.
Плюс: простой доступ к странице
В чистом JavaScript обратиться к объекту на странице можно одним из способов:
и еще несколько подобных
В jQuery то же самое делает одна прекрасная команда. Заодно она же совмещает в себе кучу других функций. Фактически она говорит jQuery: «Возьми ЭТО и сделай с ним что-то»:
Поэтому какие-то простые манипуляции с объектами на странице выглядят элегантнее именно с jQuery. Это не значит, что их нельзя делать с простым JavaScript — можно. Но это не так красиво.
Представьте, что у нас есть страница, на которой есть важные плашки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зависимости от времени суток, браузера или настроения программиста сайт должен эти плашки скрывать, добавлять новые или как-то их менять. Вот, что можно, к примеру, с ними делать:
$elem.remove(); //Удаляем их.
Плюс: кроссбраузерность
Многие пользователи используют старые браузеры, например Internet Explorer 11. Они это делают не потому, что не знают, как обновиться, а потому что на работе админ запретил установку любого софта; или в госучереждениях давно не обновляли компьютеры.
Тут и спасает jQuery: разработчики сами предусмотрели поддержку старых браузеров. Например, вот как может выглядеть проверка на версии Intertet Explorer:
И такие условные блоки есть для всех старых версий IE.
Если всё настолько круто, как здесь написано, то все должны уже были давно перейти на jQuery и забыть про JavaScript, но этого не происходит. Более того, у jQuery есть свои существенные минусы и ограничения.
Минус: вы контролируете не всё
Если вам нужен максимальный контроль за всем, что происходит на сайте, то лучше использовать чистый JavaScript. В этом случае вы полностью уверены в том, как ведёт себя страница, и не зависите от стороннего кода.
Если используете редкий плагин, есть риск, что он может не работать настолько надёжно, как вам нужно. К тому же, не все сторонние плагины так же хорошо оптимизированы, как сам jQuery: в итоге у вас ради какого-то одного эффекта или блока на странице появится огромная библиотека, которая будет всё страшно замедлять.
Минус: много всего
Подключать целую библиотеку ради одного эффекта — не самая лучшая идея. Иногда проще потратить лишних пять минут и сделать то же самое на JavaScript, чем тащить в проект лишних 64 килобайта кода.
Например, чтобы однократно вызвать обработчик события, можно подключить jQuery и написать так:
А можно ничего не подключать и использовать простой JavaScript, который уже научился делать то же самое через третий, необязательный, параметр в addEventListener:
Плюс-минус: многое можно уже сделать и на JavaScript
В самом начале, когда jQuery только появился, он сильно помогал разработчикам, потому что сам JavaScript многое не умел делать так же легко и изящно. Сейчас JS по возможностям и удобству почти догнал jQ, и то, на что раньше уходило 10 команд, теперь делается одной.
Замена одного элемента на странице на другой.
Минус: нет понимания технологии
Чрезмерное увлечение jQuery может привести к тому, что программист просто не будет понимать, как работают механизмы у него на странице и не сможет их исправить, если что-то пойдёт не так.
Например, программист прикрутил на страницу какой-то эффект на базе jQuery. Потом еще один, и они начали конфликтовать. Если программист не может разобраться в устройстве этих библиотек, он не сможет разрешить конфликт — а для этого нужно понимать чистый javaScript и уметь отлаживать код.
Получается, что знать jQuery всё-таки полезно, но нужно понимать, когда без него можно обойтись.
Скоро возьмем эту библиотеку за основу и сделаем какой-нибудь полезный проект. Подписывайтесь, мы напишем, когда что-нибудь такое выйдет.
Что такое jQuery?
Дата публикации: 2016-12-05
От автора: приветствую вас, друзья. В этой статье мы с вами начнем знакомиться с замечательной и популярнейшей javascript библиотекой – jQuery. Мы узнаем, для его она нужна и чем может помочь нам в работе, а также научимся подключать библиотеку jQuery к нашему проекту.
Итак, что же такое jQuery. jQuery – это javascript библиотека, т.е. библиотека, написанная на языке JavaScript. Проще говоря, это некий набор готовых функций, которые упрощают жизнь разработчика и написание кода на JavaScript.
Если вы не забыли JavaScript, тогда должны помнить, как непросто выбрать элементы на странице, чтобы затем манипулировать ими. Вспомните все эти длинные названия методов: getElementById, getElementsByClassName и т.п. Писать эту связку слов долго и неудобно на самом деле. Библиотека jQuery позволяет сделать то же самое гораздо проще и понятнее. Сравните хотя бы вот эти две строчки кода:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Обе строки выберут один и тот же элемент – параграф с указанным идентификатором. Но, согласитесь, вторая строка гораздо короче и, что главное, понятнее. Кстати, ее синтаксис, скорее всего, вам мог что-то напомнить. Верно, это CSS селектор — #p – выборка элемента с указанным ID. jQuery для выборки элементов использует тот же синтаксис, что использует и CSS, поэтому если вы знаете CSS – вам будет гораздо проще понять и работать с jQuery. Это дополнительный плюс.
Однако, jQuery хорош не только тем, что обеспечивает выборку любого элемента на странице, при этом выборку гибкую. Используя jQuery вы получаете еще ряд плюсов по сравнению с нативным JS. Вот некоторые из них:
простая работа с событиями;
удобная работа с AJAX (асинхронные запросы к серверу);
удобные методы для работы с эффектами (скрытие / появление элементов с добавлением визуальных эффектов);
и главный плюс – тысячи готовых плагинов на любой вкус (галереи, слайдшоу, работа с формами и другими элементами страницы).
На сегодняшний день знание и работа с библиотекой jQuery – это фактически стандарт для любого веб-разработчика. Без нее не обходится практически ни один проект в сети, поскольку jQuery реально упрощает написание кода на JavaScript.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Давайте же попробуем подключить библиотеку jQuery к нашей странице, тем более что сделать это очень просто. Первый способ – локальное подключение. Заключается он в том, что мы скачиваем jQuery в наш проект и подключаем его. Идем на официальный сайт jQuery и скачиваем актуальную версию библиотеки. На момент написания статьи это версия 3.1.1.
Обратите внимание, мы можем скачать сжатую и несжатую версию библиотеки. Чем они отличаются?
Если мы скачаем обе версии библиотеки, то увидим, что они отличаются весом. Сжатая версия весит 84 Кб, несжатая – 260 Кб. Разница в том, что из сжатой версии убрали все пробелы и переводы строк, а также сократили все имена переменных. В остальном – никакой разницы, т.е. обе версии библиотеки одинаковы и выполняют одну и ту же работу. Рекомендую подключать сжатую версию, поскольку она весит меньше и, следовательно, загрузится быстрее. А зачем же тогда нужна несжатая версия – спросите вы? Она нужна для разработчиков, т.е. для тех, кто захочет заглянуть внутрь библиотеки, чтобы изучить ее детальнее.
Зачем нам jQuery?
Здравствуйте, дамы и господа! Вот уже без малого десять лет минуло с первого релиза библиотеки jQuery, и мы решили отряхнуть пыль веков с классики. Подумываем о выпуске третьего издания гусарской баллады об этой библиотеке:
Чтобы пояснить, чем она нас привлекает в эпоху Node и ES6 (у нас в ассортименте и этого добра навалом) предлагаем познакомиться со статьей Коди Линдли, вышедшей вскоре после вышеупомянутого третьего издания
Поскольку давно не утихают разговоры о ненужности jQuery, я буквально не могу избавиться от мысли, что мы забыли основную ценность jQuery. Время о ней напомнить.
В этой статье хотелось бы всем еще раз рассказать, что же такое jQuery, поскольку сегодня она не менее актуальна, чем на момент появления. Вопрос о ее важности нужно соотнести с исходным назначением всего этого решения (то есть, самого API jQuery), а не с браузерными багами или недостающими возможностями. Если исходить из чего-то другого, то мы рискуем встать на позиции, с которых бракуется любая абстракция, которая может быть не абсолютно необходимой, но, все-таки, мощной и полезной.
Прежде чем я начну пылко отстаивать честь jQuery, давайте вернемся к ее истокам, чтобы всем стало понятно, «что» такое jQuery, и «зачем» она нужна.
Что такое jQuery?
jQuery – это библиотека JavaScript (т.e., она написана на JavaScript), предназначенная для абстрагирования, выравнивания, исправления и упрощения скриптинга при работе с узлами HTML-элементов в браузере или для работы в браузере без графического интерфейса.
Теперь сравним его с нативным DOM-кодом, который потребовалось бы написать, если бы мы не работали с jQuery.
Имея дело с 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 этим не ограничивается. Она не просто абстрагирует нативные 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.
