Что такое jQuery и как его использовать
Во время разработки на JavaScript часто приходиться использовать довольно громоздкие конструкции из кода, чтобы выполнить простую функцию. Для упрощения работы существует библиотека jQuery, которая представляет собой набор JavaScript функций. Особенно удобно использовать jQuery для создания интерактивных сайтов.
Как подключить jQuery?
Нельзя просто начать использовать функции из библиотеки jQuery. Её надо сначала подключить. Для этого можно в секцию сайта поставить подключение скрипта по ссылке. К примеру, можно взять библиотеку jQuery с серверов гугла. Вот так:
Содержание страницы
После подключения jQuery (на строчках ниже подключения) можно использовать методы jQuery.
В примере была использована библиотека jQuery, которая находится на серверах Google. Ссылаться именно на эти серверы — это довольно распространённая практика.
Но настоятельно рекомендуем скопировать библиотеку jQuery себе на сайт и загружать непосредственно со своего сайта. Потому что в некоторых странах серверы Google заблокированы, к примеру, в Китае. Это означает, что для пользователей из Китая библиотека jQuery не загрузится, и скрипты на вашем сайте для них не будут работать.
JQUERY ПРОТИВ JAVASCRIPT. Стоит ли учить jQuery в 2021? Что лучше для развития программиста?
Код на jQuery компактнее, чем на JavaScript
Сравните код на JavaScript и jQuery. Вот код на чистом JavaScript:
document.getElementById(‘id’).innerHTML = ‘Тише мыши, кот на крыше’;
$(‘#id’).html(‘Тише мыши, кот на крыше’);
Очевидно, код стал компактнее. Приведём ещё один пример, в котором разница в удобстве будет более очевидной. Допустим, нам надо изменить CSS свойство в нескольких тегах с одним и тем же классом.
К примеру, сделать текст синим. На чистом JavaScript нам надо будет получить массив ссылок на найденные элементы с помощью метода getElementsByClassName, затем пройтись по массиву и установить CSS свойство для каждого из найденных тегов. Выглядеть это будет так:
var a = document.getElementsByClassName(‘class’); for (var i = 0; i
Перепишем этот пример, используя функцию из jQuery:
$(‘.class’).css(‘color’, ‘blue’);
Получилось, что четыре строчки кода были заменены одной, в которой находится довольно наглядная функция изменения CSS свойства.
Селекторы jQuery
Знак доллара $ в начале строки в приведённых выше примерах — это универсальная функция jQuery. Чаще всего её используют для выбора HTML элементов, поэтому после этого знака стоят круглые скобки, в которых находится указание на селектор.
Селекторы в jQuery точно такие же, как и в CSS. Поэтому рекомендуем посмотреть цикл наших статей по CSS.
Попробуем выбрать все элементы с классом «mouse» используя jQuery:
var a = $(‘.mouse’);
Теперь выберем все с :
var a = $(‘#mouse’);
А теперь выберем все с классом «mouse», но являющиеся div контейнерами:
var a = $(‘div.mouse’);
Всё обращение к элементам происходит точно так же, как и в селекторах CSS.
Цепочки методов jQuery
Большое количество методов jQuery возвращают набор элементов. Поэтому можно составлять цепочки из этих методов. Попробуем модифицировать примеры из первого параграфа этой статьи. То есть совместим изменение цвета с изменением HTML содержания тега. Получится такой код:
Что такое Jquery и зачем он нужен
$(‘.mouse’).html(‘Тише мыши, кот на крыше’).css(‘color’, ‘blue’);
Cмотрите другие статьи:
Была ли эта статья полезна? Есть вопрос?
Закажите недорогой хостинг Заказать
всего от 290 руб
Также Вы можете отправить нам свой отзыв на наши услуги, замечание или предложение. Мы ценим наших клиентов и внимательно прислушиваемся ко всем замечаниям!
Последние новости
- Генератор паролей
- Генератор .htpasswd
Коврик для мыши новым клиентам
Оплатите хостинг на год и получите удобный коврик
Помощь в переносе
с другого хостинга
Хотите переехать? Мы поможем перенести всё
Запишитесь на интенсивные курсы по созданию сайтов.
Приветствуем всех в нашем уютном дата центре! Мы предоставляем качественный и надёжный хостинг. У нас можно заказать домены и VPS, прочитать статьи по созданию сайтов и информационной безопасности. А из наших видео подкастов можно узнать о том, как продвигать и развивать iT-проекты.
- Пользовательское соглашение
- Политика конфиденциальности
- Публичная оферта
- Антиспам соглашение
Источник: www.mousedc.ru
Зачем вам jQuery
Каждый год говорят о том, что jQuery уже не тот, но продолжают его использовать. Почему? Вот почему.
Представьте, что вам нужно на сайт добавить форму обратной связи и кнопку быстрого заказа. Вы пишете 200 строк на JavaScript: нужно, чтобы поля проверялись, данные отправлялись, если человек не заполнил — на него выпадала выпадайка и т. д. Всё это нужно внимательно описать, запрограммировать и протестировать. На это уходит, допустим, полтора-два часа. Работает? Да. Получилось быстро?
Не очень. Чтобы было быстрее, многие используют jQuery.
jQuery — специальная библиотека, написанная на JavaScript, в которой многие типовые действия прописаны как одна команда. Представьте, что это набор готовых деталей конструктора, из которого собрать программу получается быстрее. Правда, не все задачи решаются деталями конструктора…
Чтобы было понятно, насколько jQuery может ускорить написание кода, вот пример. Двум программистам дали задачу: сделать так, чтобы по клику в самом низу страницы она сама плавно прокручивалась до самого верха. Один решил эту задачу на чистом JavaScript:
Другой использовал jQuery. У него код состоит из одной строки:
У обоих программистов код работает одинаково, но второй решил задачу гораздо быстрее.
Чтобы вся магия jQuery заработала, нужно его подключить в HTML-странице:
Эта команда говорит браузеру: «Иди на сервер Яндекса по вот такому пути, найди там файл jquery.min.js, будем работать с этой библиотекой и писать на ней скрипты». Дальше мы собрали список плюсов и самых веских причин использовать jQuery в проектах. Это будет полезно знать тем, кто хочет делать что-то для веба или лучше понимать, как устроены сайты изнутри.
Плюс: простой синтаксис
jQuery читается несколько проще, чем JavaScript, многие вещи сделаны понятнее. Например, нам нужно скрыть на странице второй по счету заголовок уровня H2.
Плюс: плагины на любой случай
Что бы вы ни хотели сделать на веб-странице, скорее всего, для этого уже есть готовые плагины на jQuery. Формы подписки, всплывающая реклама, захват телефонного номера — всё это уже есть и доступно за пару команд.
Scrollpane — кроссбраузерный скролбар любого элемента на странице;
jReject — проверяет, не устарел ли используемый браузер;
GridScrolling — навигация по сайту с помощью клавиш;
FlickerPlate — плагин для слайдеров с поддержкой сенсорных экранов;
Animsition — создание анимированной загрузки страниц на сайте;
SlideBars — создание адаптивного меню на сайте
и ещё тысячи готовых плагинов.
Плюс: простой доступ к странице
В чистом JavaScript обратиться к объекту на странице можно одним из способов:
document.getElementsByTagName(«td»)
document.getElementsByClassName(«myClass»)
и еще несколько подобных
В jQuery то же самое делает одна прекрасная команда. Заодно она же совмещает в себе кучу других функций. Фактически она говорит jQuery: «Возьми ЭТО и сделай с ним что-то»:
Поэтому какие-то простые манипуляции с объектами на странице выглядят элегантнее именно с jQuery. Это не значит, что их нельзя делать с простым JavaScript — можно. Но это не так красиво.
Представьте, что у нас есть страница, на которой есть важные плашки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зависимости от времени суток, браузера или настроения программиста сайт должен эти плашки скрывать, добавлять новые или как-то их менять. Вот, что можно, к примеру, с ними делать:
- удалять все плашки:
var $elem = $(«.SomeClass») //Выбираем элементы.
$elem.remove(); //Удаляем их.
- добавлять новые:
- вставлять ещё одни перед ними:
- заменять их на что-то другое:
- и просто плавно показывать на экране:
Плюс: кроссбраузерность
Многие пользователи используют старые браузеры, например Internet Explorer 11. Они это делают не потому, что не знают, как обновиться, а потому что на работе админ запретил установку любого софта; или в госучереждениях давно не обновляли компьютеры.
Тут и спасает jQuery: разработчики сами предусмотрели поддержку старых браузеров. Например, вот как может выглядеть проверка на версии Intertet Explorer:
< !—[if expression]>рабочий код < ![endif]— >// если Internet Explorer [if IE] // если НЕ Internet Explorer [if !IE] // если Internet Explorer 7 [if IE 7] // если НЕ Internet Explorer 7 [if !(IE 7)]
И такие условные блоки есть для всех старых версий IE.
Если всё настолько круто, как здесь написано, то все должны уже были давно перейти на jQuery и забыть про JavaScript, но этого не происходит. Более того, у jQuery есть свои существенные минусы и ограничения.
Минус: вы контролируете не всё
Если вам нужен максимальный контроль за всем, что происходит на сайте, то лучше использовать чистый JavaScript. В этом случае вы полностью уверены в том, как ведёт себя страница, и не зависите от стороннего кода.
Если используете редкий плагин, есть риск, что он может не работать настолько надёжно, как вам нужно. К тому же, не все сторонние плагины так же хорошо оптимизированы, как сам jQuery: в итоге у вас ради какого-то одного эффекта или блока на странице появится огромная библиотека, которая будет всё страшно замедлять.
Минус: много всего
Подключать целую библиотеку ради одного эффекта — не самая лучшая идея. Иногда проще потратить лишних пять минут и сделать то же самое на JavaScript, чем тащить в проект лишних 64 килобайта кода.
Например, чтобы однократно вызвать обработчик события, можно подключить jQuery и написать так:
А можно ничего не подключать и использовать простой JavaScript, который уже научился делать то же самое через третий, необязательный, параметр в addEventListener:
Плюс-минус: многое можно уже сделать и на JavaScript
В самом начале, когда jQuery только появился, он сильно помогал разработчикам, потому что сам JavaScript многое не умел делать так же легко и изящно. Сейчас JS по возможностям и удобству почти догнал jQ, и то, на что раньше уходило 10 команд, теперь делается одной.
Замена одного элемента на странице на другой.
Минус: нет понимания технологии
Чрезмерное увлечение jQuery может привести к тому, что программист просто не будет понимать, как работают механизмы у него на странице и не сможет их исправить, если что-то пойдёт не так.
Например, программист прикрутил на страницу какой-то эффект на базе jQuery. Потом еще один, и они начали конфликтовать. Если программист не может разобраться в устройстве этих библиотек, он не сможет разрешить конфликт — а для этого нужно понимать чистый javaScript и уметь отлаживать код.
Получается, что знать jQuery всё-таки полезно, но нужно понимать, когда без него можно обойтись.
Скоро возьмем эту библиотеку за основу и сделаем какой-нибудь полезный проект. Подписывайтесь, мы напишем, когда что-нибудь такое выйдет.
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Источник: thecode.media
Что такое 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 при её использовании для написания клиентских сценариев:
- компактность кода . Позволяет писать код более компактно чем на чистом javaScript, т.е. за гораздо меньшее количество строк кода.
- простой и понятный синтаксис . Значительно упрощает написание многих вещей, например, таких как манипулирование DOM элементами, обработку событий, добавление эффектов анимации на страницу, AJAX запросов и т.д.
- кроссбраузерность . Код написанный на jQuery будет гарантированно работать во всех основных браузерах. В то время как код, написанный на чистом JavaScript надо будет однозначно проверять во всех браузерах. Т.к. некоторые фрагменты кода могут не поддерживаться и их реализацию для этих браузеров нужно будет выполнять как-то по-другому, или например, использовать полифиллы.
- открытый код . Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.
Кроме преимуществ, приведённых выше, у библиотеки jQuery имеются конечно и недостатки.
К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.
Статистика использования jQuery
Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»
Что можно делать с jQuery
jQuery позволяет очень легко:
- выбирать элементы для выполнения различных манипуляций над ними;
- создавать различные визуальные эффекты (например, плавное отображение и скрытие элементов);
- создавать сложную анимацию, при этом реализовывая это за гораздо меньшее количество строк кода чем на чистом JavaScript;
- манипулировать DOM элементами и их атрибутами;
- реализовывать AJAX для асинхронного обмена данными между клиентом и сервером;
- перемещаться от текущего узла к другим по иерархической структуре DOM дерева;
- выполнять несколько действий над элементом посредством одной строчки кода;
- получать или устанавливать размеры HTML элементам и т.д.
Этот список можно продолжить дальше, т.к. jQuery содержит большое количество функций, которые значительно упрощают написание кода для решения различных задач, стоящих перед веб-разработчиками.
Как скачать 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 тега с атрибутом src , в котором необходимо задать полный или относительный путь к файлу.
Подключение последней версии jQuery:
При этом разместить можно как секции в , так и в . Но где же лучше?
Раньше (до появления режимов async и defer ) это рекомендовалось делать перед закрывающим тегом body :
При таком размещении скрипт не будет блокировать парсинг веб-страницы, т.к. его загрузка и выполнение будет осуществляться в самом конце. В результате, это приведёт к тому, что пользователь увидит содержимое страницы быстрее и сможет раньше с ней начать взаимодействовать.
Если бы мы сделали это по-другому, например, поместили script в раздел head , то создали бы «задержку» при обработке страницы в самом её начале. А это привело бы к тому, что пользователю пришлось бы дольше ждать отображения контента страницы.
Но сейчас так делать не рекомендуется. Лучше размещать скрипты как можно выше (в разделе ) с добавлением к ним атрибута defer или async . Эти атрибуты будут «говорить» браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом основной поток обработки страницы. Это позволит сделать сайт более производительным.
Использовать атрибут async применительно к jQuery не имеет смысла, т.к. эту библиотеку мы в основном используем для изменения DOM. Но перед тем, как править DOM, он должен быть построен. Это сделать нам поможет использование атрибута defer . Атрибут defer гарантирует что скрипт выполниться только после того, как дерево DOM будет построено, но до события DOMContentLoaded .
При этом, если на странице имеется несколько внешних скриптов с атрибутом defer , то они будут выполняться строго в том порядке, в котором они расположены в коде.
Пример отложенного подключения jQuery и своего внешнего скрипта, зависящего от этой библиотеки:
При непосредственном размещении JavaScript кода в HTML документе его необходимо поместить в обработчик события DOMContentLoaded (в этом случае его код выполнится после загрузки библиотеки jQuery):
document.addEventListener(‘DOMContentLoaded’, function() { // код, зависящий от 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):
Источник: itchief.ru
Зачем нам jQuery?
Здравствуйте, дамы и господа! Вот уже без малого десять лет минуло с первого релиза библиотеки jQuery, и мы решили отряхнуть пыль веков с классики. Подумываем о выпуске третьего издания гусарской баллады об этой библиотеке:
Чтобы пояснить, чем она нас привлекает в эпоху Node и ES6 (у нас в ассортименте и этого добра навалом) предлагаем познакомиться со статьей Коди Линдли, вышедшей вскоре после вышеупомянутого третьего издания
Поскольку давно не утихают разговоры о ненужности jQuery, я буквально не могу избавиться от мысли, что мы забыли основную ценность jQuery. Время о ней напомнить.
В этой статье хотелось бы всем еще раз рассказать, что же такое jQuery, поскольку сегодня она не менее актуальна, чем на момент появления. Вопрос о ее важности нужно соотнести с исходным назначением всего этого решения (то есть, самого API 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, то это прозвучит довольно обыденно: данная библиотека позволяет изменять содержимое HTML-документов путем манипулирования объектами модели, создаваемой браузерами в процессе обработки HTML-кода (так называемые DOM-манипуляции).
Вам, наверное, уже приходилось манипулировать объектами с помощью других библиотек JavaScript или встроенных функций , которые поддерживаются большинством современных браузеров. Однако библиотека jQuery работает намного лучше. Она превращает манипулирование объектами DOM в увлекательное занятие, временами напоминающее настоящее развлечение.
В работе с jQuery есть нечто настолько элегантное и притягательное, что задачи, решение которых обычно требует выполнения множества скучных рутинных операций, внезапно чрезвычайно упрощаются, так что, начав использовать jQuery, вы уже не сможете от этого отказаться. Что касается лично меня, то я использую jQuery в своих проектах по следующим причинам:
- Средства jQuery необычайно выразительны. Эта библиотека позволяет добиться гораздо большего при намного меньшем объеме кода, чем в случае использования программных DOM-интерфейсов браузеров.
- Методы jQuery применимы к целым группам элементов. Предлагаемый в DOM-модели стандартный подход, основанный на шаблонной цепочке действий «выбрать-повторить-изменить», больше не требуется. Следствием этого является уменьшение количества циклов for в коде, а значит, и снижение вероятности появления в нем ошибок.
- Библиотека jQuery справляется с различиями в реализации DOM в различных браузерах (проблемы кросс-браузерности). Например, меня не должна беспокоить мысль об особенностях поддержки того или иного средства, чем печально славится браузер Internet Explorer (IE). Достаточно всего лишь сформулировать jQuery свои пожелания, и библиотека самостоятельно обеспечит совместимость с конкретным браузером.
- Библиотека jQuery имеет открытый исходный код. Если принципы работы какого-либо средства для меня не совсем ясны или получаемый результат не совпадает с ожидаемым, я могу обратиться непосредственно к коду библиотеки на JavaScript и, если это необходимо, внести соответствующие изменения.
Здесь также рассматриваются библиотека jQuery UI — это набор инструментальных средств, который предназначен для создания универсальных пользовательских интерфейсов и может применяться на любых устройствах.
Описание библиотеки jQuery:
1. Основы jQuery, работа с DOM-моделью
- Установка библиотеки jQuery
- Работа с DOM-объектами
- Работа с выбранными элементами
- Навигация по дереву DOM
- Создание новых элементов
- Вставка дочерних, сестринских и родительских элементов
- Замена и удаление элементов
- Атрибуты и свойства
- Классы
- Работа с CSS
- Содержимое элементов
- Элементы формы
- Связывание данных с элементами
2. Обработка событий, эффекты и анимация
- Обработка событий
- Использование прямых методов событий
- Базовые эффекты
- Пользовательские эффекты
- Очередь эффектов
3. Работа с данными и Ajax
- Шаблоны данных
- Обработка форм
- Валидация форм
- jQuery и Ajax
- Использование Ajax
4. Библиотека jQuery UI
- Установка библиотеки jQuery UI
- Виджет Button
- Виджет Progress Bar
- Виджет Slider
- Виджет Autocomplete
- Виджет Accordion
- Виджет Tabs
- Виджет Datepicker
- Виджет Dialog
- Эффекты jQuery UI
- CSS-фреймворк jQuery UI
- Перетаскивание элементов (взаимодействия Draggable и Droppable)
- Сортировка элементов (взаимодействие Sortable)
- Выборка элементов (взаимодействие Selectable)
- Масштабирование элементов (взаимодействие Resizable)
- Использование библиотеки jQuery UI на практике
Источник: professorweb.ru