Какво е jQuery и за какво се използва?
Развитието на уеб технологиите в днешни дни е силно повлияно от постоянно растящите изисквания и очаквания на потребителите. Притежаването на интерактивен, въздействащ и модерен сайт вече се приема като задължително условие за успешно онлайн присъствие.
В първите години на уеб информацията е представяна предимно като текст. Днес обаче потребителите искат повече - изображения, анимации, аудио, видео клипове, онлайн чатове, инфографики, слайдове и други.
Една от уеб технологиите, с които можете да направите вашия сайт модерен и да създадете изключително потребителско изживяване, е JavaScript библиотеката jQuery.
Смисълът на jQuery е да се пише по-малко JavaScript код, но и да се постигат по-добри резултати. jQuery добавя нови възможности към JavaScript. С jQuery се създават лесно ефектни навигационни менюта, слайдери, галерии и други.
Какво е JavaScript?
JavaScript е скриптов език за програмиране, чрез който статичната уеб страница може да се „раздвижи“. Динамичният елемент в даден сайт може да бъде в промяна на съдържанието, което се визуализира на уеб страницата при действие от страна на потребителя. Чрез JavaScript може да се влияе на DOM дървото на съдържанието в уеб страницата.
JavaScript се използва, освен за създаване на интерактивни уеб страници, но и за разработка на игри, мобилни приложения и уеб приложения, които работят и се изпълняват от страна на сървъра. Една такава технология, позволяваща изпълнението на JavaScript код директно на сървъра е Node.js. Едно примерно приложение, създадено изцяло на JavaScript и работещо на сървъра, е блог платформата Ghost.
Създателят на JavaScript е Брендан Ейч. Той е съосновател и на проекта Mozilla като до скоро е негов главен изпълнителен директор.
През 1995 година JavaScript уеб технологията се появява за първи път в уеб браузъра Netscape Navigator 2.0.
С добавянето на JavaScript в уеб браузъра, вече е възможно статичният HTML код в уеб страницата да се променя динамично.
JavaScript кодът се изпълнява в уеб браузъра с помощта на JavaScript интерпретатор/двигател (JavaScript engine). Фаловете, в които се съдържа JavaScript код, са с разширение .js.
Съществуват и други уеб технологии като Flash и Silverlight, които се използват за добавяне на динамичност в сайта, но JavaScript изпъква и продължава да бъде предпочитана от разработчиците.
Около 97% от най-популярните 10 милиона уебсайта в уеб ползват JavaScript.
Библиотеки на JavaScript
JavaScript библиотеката представлява предварително написан JavaScript код. Библиотеката може да се ползва, когато е необходимо да се включи някаква функционалност в уебсайта. Вместо да се изгражда от нулата, се ползва вече създадена библиотека, която предлага точно тази функционалност.
Библиотеките подобряват и намаляват времето за разработка на уеб проекта.
Какво е jQuery?
jQuery беше една от най-известните библиотеки на JavaScript, поне до края на 2018 г. (Google Trends). Нейният създател е Джон Резиг, а през 2006 година е пусната официално в Интернет.
Библиотеката е проектирана да улесни и опрости писането на JavaScript код, като едновременно с това е гъвкава и може да се надгражда с допълнителни плъгини.
Библиотеката се поддържа от всички съвременни версии на уеб браузърите.
За разработването на приложения и уеб сайтове, които ще се ползват през мобилни устройства, може да се ползва jQuery Mobile . Мобилната версия на jQuery се поддържа от множество мобилни платформи.
За мобилната версия на уебмейл клиента Horde също е ползван jQuery Mobile.
Някои от плюсовете на специално създадената мобилна версия на jQuery:
- Широка поддръжка от мобилни устройства и уеб браузъри. С jQuery Mobile е почти сигурно, че всеки ще може да достъпи сайта ви през мобилно устройство. Благодарение на някои от подобренията в jQuery Mobile, вече може да се предостави уеб документ с най-основни HTML елементи, на мобилно устройство, което не може да обработи CSS и Ajax.
- Елементите от уеб страницата като форми за попълване, радио бутони, слайдери и други, са по-достъпни за устройствата с тъч скрийн. С jQuery Mobile е възможно съвсем лесно да маркирате един единствен чекбокс, без да е необходимо да увеличавате страницата.
- Responsive (адаптивен) дизайн. Всички елементи на уеб сайта като таблици, текст и други, са проектирани с гъвкав дизайн, така че да се визуализират перфектно при различните резолюции на мобилните устройства.
Примери за елементи на jQuery Moblie:
- Преминаване от един елемент към друг, с ефекти
http://view.jquerymobile.com/master/demos/transitions - Форми: полета, менюта, радио бутони и други
http://view.jquerymobile.com/master/demos/forms-gallery - Теми за мобилния дизайн
http://view.jquerymobile.com/master/demos/theme-classic
Как се използва jQuery?
Библиотеката представлява един .js файл, който може да се свали от сайта на jQuery https://jquery.com и да се запише в папката на уеб проекта. След това е необходимо да се вмъкне в кода на сайта:
<head>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
Може да се включи към уебсайта директно чрез линк към .js файла. Какъв е линкът можете да видите на следния адрес: https://developers.google.com/speed/libraries/devguide#jquery.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
Как работи jQuery: https://learn.jquery.com/about-jquery/how-jquery-works
Плъгини за jQuery
С плъгините се разширяват възможностите на jQuery библиотеката. Съществуват плъгини, написани от екипа на jQuery или от независими разработчици.
С плъгините на jQuery можете да добавите различни функционалности и екстри към сайта и елементите в него. Някои от най-търсените функционалности са: форми, анимация, картинни слайдери, адаптивен дизайн и други.
Официалната колекция от плъгини: https://plugins.jquery.com
При избора на подходящ плъгин обърнете внимание на това, дали има богата помощна информация и дали се предлага поддръжка или контакт с разработчика.
Плъгините се включват в сайта както библиотеката jQuery. Първо се сваля файлът, записва се в папка и след това се включва в сайта. Например:
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="plugins.jquery.js"></script>
</head>
Няколко ефектни плъгина:
- Slick - слайдер
https://plugins.jquery.com/slick (https://kenwheeler.github.io/slick) - Избор на цвят от цветова палитра
https://www.virtuosoft.eu/code/jquery-colorpickersliders - Подреждане, филтриране, категоризиране на елементи и др.
https://vestride.github.io/Shuffle - Слайдери за изображения
https://wowslider.com/demo.html - Функционални подсказки
https://amsul.ca/shadow-ui/demos/tooltip