jQuery — это библиотека JavaScript, которая была разработана Джоном Резигом в 2006 году. Её последняя версия 3.5.1 совместима с основными браузерами: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+. Несмотря на то, что сегодня JQ считается устаревшей библиотекой и у неё уже есть достойные альтернативы, большинство программистов плотно работает с ней и использует для решения своих задач.
Для начинающих jQuery привлекателен тем, что дает возможность экономить время при написании распространенных скриптов. Представьте ситуацию. Клиент просит разработчика написать для него скрипт на JS, который бы отвечал за быструю регистрацию заказа клиента. Должно выпадать окно, в котором предлагалось бы заполнить анкету для оформления покупки. Если писать код на чистом JS, то у неопытного разработчика может уйти до часа работы. Придется написать 10+ строк кода и еще протестировать работу скрипта. С jQuery для этой процедуры понадобится одна строка кода и пара секунд на ее написание.
Все это возможно т.к. в jquery все типовые действия прописаны в форме одной команды. Можно даже провести аналогию между библиотекой jQuery и конструктором.
Возможности jQuery
Мы поняли, что javascript jquery может помочь с упрощением кода и помогает экономить время разработчика. Двигаемся дальше и отвечаем на вопрос, в каких направлениях используется библиотека?
Основные функции jquery:
- Предоставление доступа к элементам документа. Джейквери помогает вносить изменения в код благодаря облегченному доступу к DOM (Document Object Model). Искать определенные элементы HTML- кода на чистом JS – долго и муторно. Библиотека позволяет писать код для обращения к отдельным элементам DOM быстрее и компактнее с помощью селекторов.
- Изменение внешнего вида сайта. Библиотека Джейквери позволяет изменять классы или отдельные стилевые свойства, применяемые к фрагменту документа, даже после того, как он будет отображен. Это особенно важно в тех случаях, когда браузер не поддерживает единые стандарты распознавания команд CSS.
- Изменение содержимого документа. Библиотека Джейквери позволяет воздействовать не только на каскадную таблицу стилей CSS, но и дает возможность изменять HTML код документа. Программист может изменять текст, упорядочивать списки и даже полностью изменять и расширять структуру документа HTML.
- Взаимодействие с пользователем. Об этом мы уже говорили. Первоочередная задача JS – сделать содержимое страницы интерактивным. jQuery позволяет писать скрипт для проигрывания событий в разы быстрее, чем чистый JS.
- Воспроизведение анимации. Для удобного взаимодействия пользователя с содержимым страницы программист должен обеспечить обратную визуальную связь. Библиотека Джейквери помогает разработчику справиться с этой задачей, предоставляя ряд анимационных эффектов, таких как растворение и стирание элементов, а также удобные инструментальные средства для реализации новых эффектов.
Мы перечислили основные возможности джейквери, которые подталкивают программистов обращаться к её помощи. Все задачи, которые мы перечислили выше, можно решить на JavaScript без использования библиотек и фреймворков, но это увеличит сроки для реализации проекта.
Особенности jQuery
Главная причина популярности jQuery – её кроссплатформенность. Она совместима с самыми популярными браузерами, такими как Chrome, Firefox, Safari, MS Edge, IE, Android и iOS.
Джейквери облегчает работу с Ajax. Обычно Ajax функционирует асинхронно с остальным кодом. Это значит, что код, написанный на Ajax, обновляется без перезагрузки содержимого страницы. На этом этапе могут возникать сложности. Разные браузеры взаимодействуют с Ajax API по-своему. В результате код должен быть оптимизирован под требования разных браузеров. Решать эту проблему самостоятельно — тяжело. На помощь приходит Джейквери. Он берет всю сложную работу на себя и адаптирует код для всех веб-браузеров.
jQuery облегчает работу и с анимацией. Для написания скрипта, приводящего в действие анимацию программиста приходится убить несколько часов времени, тогда как Джейквери позволяет заменить строки кода одной командой. Обращаться к структурным элементам DOM с помощью jQuery тоже легче.
Преимущества jQuery
Разберем преимущества, которые Джейквери дает разработчику при написании клиентских сценариев:
- Компактность кода. Джейквери позволяет писать команды благодаря однострочным командам, тогда как на чистом JS он может расстянуться на 10-20 строк.
- Легко осваиваемый синтаксис. Большой плюс для начинающих программистов. Благодаря несложным командам программист может обращаться к DOM элементам, обрабатывать события, добавлять на страницу анимации и работать с AJAX.
- Кроссбраузерность. Скрипт, написанный на Джейквери, работает с большинством браузеров.
- Бесплатный онлайн доступ. Использовать Джейквери в своем коде можно бесплатно, код библиотеки полностью открытый и может применяться в коммерческих проектах.
Недостатки
Большое количество плюсов не спасло библиотеку от недостатков. Поговорим о них подробнее:
- Разработчик не контролирует весь код. Если программист пишет скрипт на чистом JS, то он может быть уверен в стабильности своего скрипта/проекта. Применение в своих работах Джейквери подразумевает использование чужого кода. Некоторые плагины могут работать не так, как этого ожидал программист, т.к. они не всегда хорошо оптимизированы.
- Занимает много лишнего места. Иногда лучше попотеть над задачей лишний час, чем включать в свой проект Джейквери с его 64 килобайтами лишнего кода.
- JS потихоньку догоняет библиотеку по функционалу. Джейквери обрел популярность сразу после своего появления, т.к. позволял программистам эффективно и быстро решать задачи, на решение которых уходило 15-20 строк кода. С тех пор JS претерпел изменения и то, что раньше требовало написания 10 команд, сейчас выполняется одной.
Как пользоваться jQuery
Перед тем началом работы с библиотекой её нужно подключить к документу. Необходимо добавить в HTML код документа тег script c атрибутом src. Подключить библиотеку к файлу можно посредствам размещения ссылки как внутри секции <head>, так и внутри <body>.
От положения ссылки будет зависеть скорость загрузки веб-страницы. Раньше считалось правильным добавлять ссылку на библиотеку в секцию <body>, после основного кода, перед закрывающим тегом </body>. Это объяснялось тем, что браузер в таком случае загружает содержимое страницы до JS кода. В итоге пользователь раньше увидит содержимое страницы сможет с ней контактировать. Размещение ссылки внутри секции <head> приводило к проблеме, когда загрузка скрипта тормозила отображение содержимого страницы.
Сейчас правила изменились, скрипт лучше размещать как можно выше, в секции <head>, но с добавлением атрибута defer. Он будет говорить браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом обработку страницы.
Ниже приведем скрипт, который поменяет цвет нашего body на #eee, позволит выровнять текст h1 тега и вставит в конец документа div со значением «Я люблю jQuery». Описание шагов взято в комментарии, для удобства читателя.
Примеры jQuery
Невозможно описать весь инструментарий библиотеки в одной статье, поэтому мы приведем несколько примеров кода для решения распространенных задач.
1. Плавный скролл к верху страницы. Функция, которая поможет пользователям сайта проскролить страницу после нажатия на ссылку.
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
2. Дублирование шапки таблицы в ее низ, для улучшения читаемости.
var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function() {
$tfoot.append($(this));
});
$tfoot.insertAfter('table thead');
3. Сортировка списка в алфавитном порядке.
$(function() {
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $('li', mylist).get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
mylist.append(itm);
});
}
$("ul#demoOne").sortList();
});
Как вы видите, библиотека позволяет составлять сложные алгоритмы в паре строк кода. Писать подобные скрипты на JS придется в 3 раза дольше, при этом разработчик не застрахован от ошибок.
