Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Преди да започнеш своето приключение с jQuery, трябва да научиш какво всъщност представлява и как най-лесно можеш да го използваш в твоя нов уеб сайт. В този урок ще те върна обратно към основите на jQuery. Също така ще откриеш и кратко определение на “плъгин”, дума която доста често ще срещнеш свързана с jQuery.

Структура на урока

• Какво е jQuery?
• Начини за добавяне на jQuery
  • Използване на локално копие на jQuery
  • Упражнение
• Какво е “jQuery плъгин”?
• Заключение

Какво е jQuery?

Накратно казано jQuery е най-популярната JavaScript библиотека с отворен код, която прави манипулирането на HTML документа, анимирането, промяната на стила, управлението на събития, взаимодействието с AJAX и т.н., да изглеждат лесни като детска игра.

jQuery е създаден с цел да промени начина, по който пишем JavaScript. Синтаксиса му е прост, но резултатите са смайващи. Поддържа се от всички съвременни браузъри, което е още една от многото причини за голямата му популярност.

Всъщност, популярността на jQuery е толкова голяма, че според една от последните статистики вече се използва в половината уеб сайтове в Интернет!

Наистина впечатляващо!

В днешно време, познанията по jQuery са задължителни за всеки front-end разработчик, който сериозно мисли да създава интерактивни уеб страници.

Моето лично мнение е, че за да работи човек правилно с jQuery, той трябва да има поне основни познания по JavaScript. Това всъщност не е изискване, тъй като има много хора, които въобще си нямат и идея от JavaScript, но това не им пречи да постигнат добри резултати. Опита с JavaScript обаче определено е предимство.

Ако в момента плановете ти не са чак толкова грандизони, а просто искаш да пробваш какво може да ти предложи jQuery, продължавай да четеш. Ще научиш доста нови неща.

Начини за добавяне на jQuery

Има точно 2 начина, чрез които можеш да добавиш jQuery към твоя сайт:

1. Като използваш локално копие, което можеш да свалиш напълно свободно от официалния сайт на jQuery; или
2. Като просто да добавиш линк към една от онлайн версиите на jQuery, които се намират на мрежа от сървъри разположени на различни места по света. Това е т.нар. Content Delivery Network (CDN) услуга.

   Идеята тук е следната: Когато посетителя отвори твоя сайт, файла ще се зареди от възможно най-близкия до него сървър, което от своя страна ще съкрати времето за зареждане. Ако имаш няколко минути на разположение, разгледай тази статията за CDN хостинг.

   Аз използвам (и препоръчвам) Google Hosted Libraries, който служи като “дом” на най-популярните JavaScript библиотеки. Принципа да работа е изключително елементарен и лесен. Разгледай урока “Добавяне на jQuery чрез Google Hosted Libraries”, за да разбереш повече за този метод.

И двата метода за прилагане на jQuery имат своите предимства и недостатъци. Аз лично ги използвам и двата в зависимост от средата, в която се намира сайта.

В този урок ще се фокусираме изцяло върху първият метод - използване на локална версия на jQuery. Нека ти покажа за какво става въпрос.

Използване на локално копие на jQuery

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

Някои от предимствата са:

• Не е нужно да имаш постоянна Интернет връзка. След като веднъж свалиш файла на компютъра си, можеш да боравиш с него както си поискаш.
• Имаш пълен контрол върху разположението и името на файла. Можеш да го местиш в различни папки и да го преименуваш както сметнеш за добре.

Някои от недостатъците са:

• Увеличава размера на сайта. След като качиш сайта си онлайн (в това число и jQuery файла), всеки който посети страницата ти ще трябва да “свали” всички ресурси (HTML, CSS, JavaScript, изображения и т.н.) нужни за правилната работа на конкретната страница. Това означава, че всеки следващ ресурс ще увеличи трафика към сървъра. Ако разполагаш с ограничен трафик (например 500 Mb на месец), това може в един момент да се окаже проблем, защото има вероятност бързо да изразходваш месечната си квота.
• Увеличава времето за зареждане на страницата. В зависимост от типа jQuery файл, който използваш (повече за това след малко), времето за зареждане ще бъде различно. Като правило запомни следното: колкото размера на файла е по-голям, толкова повече време отнема за зареждане.
• Когато качиш сайта си онлайн, трябва да си сигурен/-а, че jQuery файла също е качен и че използваш правилния път до него.
• Трябва ти сам/-а да обновяваш файла, в случай че излезе по-нова версия на jQuery. Това всъщност не е задължително, но понякога старите версии имат критични бъгове, които може би са отстранени в някоя от по-актуалните версии. Затова е пропоръчително да използваш винаги най-новото, което е на разположение.

Ако тепърва навлизаш в jQuery, ти препоръчвам да свалиш и използваш локално копие разположено на твоя компютър. Главната причина е, че няма да ти трябва постоянна Интернет връзка, за да работиш нормално.

Упражнение

Време е да приложиш всичко по-горе. В това кратко упражнение ще ти покажа как да добавиш jQuery към твоя уеб сайт.

Стъпка 1

Отвори официалната страница на jQuery.

Стъпка 2

Избери версията, която искаш да свалиш.

Тук имаш 2 варианта:

• Production (1) – Името (както и размера изписан в скоби) трябва да ти подсказва, че този файл е подходящ за онлайн версията на сайта ти.
• Development (2) – Размера на този файл е доста голям - 252kb. Него обикновено ще го използваш локално, когато работиш на компютъра си.

Разбира се, няма никакъв проблем, ако използваш един и същ файл и в двете ситуации (работа по сайта и онлайн версията му). В този случай ти препоръчвам Production версията, защото е по-малка.

След като избереш подходящата версия, кликни върху бутона Download (3).

Стъпка 3

След като кликнеш върху бутона Download, ще се отвори нова страница. В зависимост от версията избрана по-горе ще видиш един и същ код, но представен по различен начин.

Не е нужно да му обръщаш голямо внимание в момента. Това, което трябва да направиш тук е да запазиш файла. Натисни CTRL + S (или избери File -> Save Page As...) и от диалоговия прозорец, запази файла в желаната от теб папка.

Забележка: Ако разглеждаш страницата през Internet Explorer, след като натиснеш върху Download, браузъра автоматично ще ти позволи да запазиш файла.

Стъпка 4

След като вече разполагаш с копие на jQuery разположено на твоя компютър е време да го прикачиш към сайта си. За целта създай нов HTML документ (или отвори съществуващ такъв) и в <head> добави следния код:

<head>
	... 
	<script type="text/javascript" src="jquery.min.js"></script>
</head>

Тъй като jQuery е всъщност JavaScript код, след името на файла задължително трябва да сложиш разширение .js. Без него, кода просто няма да работи.

Забележка src атрибута трябва да съдържа пътя до файла, в случай че jQuery и HTML документа се намират в различни папки. В примера по-горе, jQuery и HTML са в една и съща папка, затова изписвам единствено името на файла и неговото разширение.

Стъпка 5

За да тестваш дали jQuery е добавен успешно, отново в <head>, веднага след кода, който постави по-горе, добави следното:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	alert('jQuery е добавен успешно!'); 
}); 
</script>

Кратко обяснение на кода:

• $ - Долара има специално значение в jQuery. По подразбиране jQuery използва “$” като заместител на думата “jQuery” т.е. $(document) е напълно еднакво с jQuery(document). Разликата както виждаш е в размера. Първото е съкратен вариант, който се помни по-лесно и е по-лесен за изписване.
• Стойността в скобите () е селектор т.е. $(document) ще върне jQuery обект представляващ HTML документа. Върху този обект по-късно ще изпълним някакви действия.
• document – е специална (ключова) дума в JavaScript, която представлява HTML документа. Надявам се, че в някой от бъдещите уроци свързани с JavaScript ще успея да ти дам малко повече информация за това.
• .ready() – метод, който се изпълнява, когато HTML документа е заредил напълно и DOM структурата е готова. Този метод приема един параметър, който най-често е анонимна функция.
• function(){ } – анонимна функция, която се извиква от ready() веднага след като страницата зареди.
• Комбинирайки всичко, това значи че:

  $(document).ready(function(){
  	// допълнителен код тук
  });

  е специален jQuery израз, който изчаква пълното зареждане на HTML документа, преди да предприеме каквито и да било допълнителни действия. Запомни го добре, защото ще го използваш страшно много.

• alert() - Ако имаш опит с JavaScript, това трябва да ти е познато. Чрез alert() можеш да изпращаш кратки съобщения до посетителя под формата на изкачащи прозорчета. Аз лично ти препоръчвам да избягваш alert() в онлайн версията на сайта ти, защото може да бъде доста дразнещо.

Надявам се, че това кратко обяснение на кода ти е ясно. Ако имаш допълнителни въпроси, задай ги в коментарите след урока.

Стъпка 6

Запази настоящия код и отвори страницата в браузър. Ако всичко до тук е успешно, трябва да видиш прозорец с текст “jQuery е добавен успешно!”

Това е начина за използване на локално копие на jQuery в твоя сайт. Не е никак трудно нали?

Може би сега си мислиш каква е следващата стъпка? Ще продължим с урока “Добавяне на jQuery чрез Google Hosted Libraries”, в който ще ти представя втория метод за прилагане на jQuery към твоя сайт. Ведната след това ще продължим с някой лесни за следване и изпълнение уроци, които ще ти помогнат да подобриш уменията си.

Какво е “jQuery плъгин”?

“Плъгин” (на английски plugin) е дума, която се споменава доста често в комбинация с jQuery. Но какво представлява това?

Накратко казано, в света на jQuery плъгина може да се определи като “приставка”. Това е специално създаден скрипт, който има за цел да разшири възможностите на основното приложение.

Плъгините могат да изпълняват най-различни цели – създаване на slideshow, падащи менюта, проверка за валидност на полета, добавяне на анимация, календари, изрязване на снимки, манипулация на текст и т.н.

Например, в поста “12 полезни jQuery плъгина за създаване на slideshow” можеш да намериш плъгини, които съществуват с точно определената цел да ти помогнат да създадеш бързо и лесно slideshow галерии.

Следващото сравнение би трябвало напълно да ти изясни нещата.

(Източник: James Bastow)

Представи си, че тялото на отверката е jQuery. То ти дава определени функции, но все пак до голяма степен си ограничен/-а. Ако използваш различните приставки обаче, функциите ще се увеличават неколкократно. Всяка приставка може да се разгледа като отделен плъгин, който ще ти свърши точно определена работа.

Надявам се, че вече всичко ти е ясно.

Създаването на плъгини може да бъде доста забавно, но не ти го препоръчвам, ако си нов/-а в jQuery. От друга страна пък, силно ти препоръчвам да се разровиш в Интернет и да пробваш някои готови плъгини. Като старт можеш да разгледаш колекцията от “12 полезни jQuery плъгина за създаване на slideshow”.

Заключение

В този урок разгледахме доста неща, но най-важното е, че поставихме добри основи за работа с jQuery. Надявам се, че се чувстваш по-малко сигурен/-а относно jQuery и виждаш възможностите, които ти предоставя тази страхотна JavaScript библиотека. Работата с jQuery наистина може да бъде песен, ако положиш малко усилия.

Как ти се стори урока? Намери ли това, което търсиш? Усля ли всъщност да разбереш какво е jQuery или все още ти е малко неясно? Мислиш ли да използваш jQuery в своя сайт? Ще се радвам да чуя мнението ти в коментарите по-долу.

Полезни линкове

Повече за jQuery в Wikipedia.

Страхотни видео уроци по jQuery за напълно начинаещи от Иван Ванков.

Статия от Интернет: “Запознайте се с jQuery”.