Како брзо повезати јКуери

8. 4. 2019.

ЈКуери је библиотека готових решења у ЈаваСцрипт језику, што олакшава додавање интерактивности на страницу. Састоји се од скупа функција које поједностављују процес писања кода. Израда веб сајта користећи јКуери је поједностављена чињеницом да се ЦСС користи за избор елемената у овој библиотеци. Програмери упознати са ЦСС-ом, много је прикладније радити са готовим функцијама, него писати сложени ЈС-код.

ЈКуери погодности

Многа решења су већ створена, тако да нема смисла да дизајнери троше време на писање кода од нуле. У процесу рада на пројекту, често се јављају ситуације када је потребно брзо додати на сајт неке функционалности које је неко други већ развио. Редак клијент ће ценити код за клизач, написао је 10 сати у чистом ЈаваСцрипт-у, ако је много брже повезати јКуери или додати оквир - део већ написаног кода, и добити згодан интерактивни елемент за пар минута. Након тога, само примените завршени клизач на изабране ставке. Дакле, програмер штеди време клијента и своје, без трошења на "креирање бицикла".

Ad

Како повезати јКуер библиотеку?

Помоћу библиотеке, галерија и слајдова се креирају, можете додати различите ефекте на страницу и радити са АЈАКС-ом (асинхрони захтеви на серверу). ЈКуери подржава цросс-бровсер компатибилност, олакшава рад са догађајима и лако се повезује.

Погледајмо како омогућити јКуери у ХТМЛ-у користећи пример креирања клизача. Да бисте то урадили, следите пет једноставних корака:

1. Отворите ХТМЛ код странице на којој ће бити постављен интерактивни елемент.
2. Креирајте функционалност за имплементацију кода. Додајте везе на слике које ће се померати у клизачу.
3. Идите на званичну страницу јКуери библиотеке и преузмите је на рачунар. Ако га повежете преко линка, у неком тренутку може престати да ради, јер је коришћење преузетог скрипта поузданије.
4. Превуците добијену датотеку у фолдер пројекта.
5. Сада треба да повежете јКуери - то можете учинити на начин сличан повезивању ЦСС стилова. Додајте скрипту у главну ознаку и упишите њену адресу. Изгледа овако:

Состав плагина jQuery

Все подсказки о последующих действиях есть на официальном сайте библиотеки. Они располагаются в меню, справа от списка историй версий плагина. Выбрав пункт с просмотром демо-версии, можно узнать, как работает плагин и какие функции выполняет. Пункт с документацией описывает состав архива и его основные характеристики. Здесь же находится код для подключения плагина. В самом архиве есть два файла с разными расширениями. Один из них будет иметь расширение CSS - это файл со стилями, другой, код скрипта – JS.

Как подключить плагин к коду HTML

Для того, чтобы подключить плагин jQuery к коду страницы, в теге link нужно прописать пути ко всем файлам из архива на вашем компьютере. Сначала добавляем в HTML файл с расширением CSS и подключаем точно также, как файл стилей: . Эта ссылка располагается в теге head сразу же после скрипта со ссылкой на библиотеку. Следующим подключаем файл с расширением js. Это скрипт, и добавить его можно тем же способом, что и файл с библиотекой. Всего подключаем три файла: саму библиотеку jQuery, стили и скрипт.

Следующий шаг – запуск или инициализация плагина. На странице с документацией будет несколько вариантов кода для различных целей. Выбираем нужный, копируем его и вставляем в HTML, как скрипт в тег head. Для этого просто копируем написанный код в тег script. Теперь разберемся с синтаксисом плагина jQuery. На первой строчке скопированного кода будет название класса родительского блока, который необходимо добавить в HTML проекта. Подсказка о том, куда его вставить, будет на странице с документацией. В случае со слайдером, нужный класс добавляется к блоку со ссылками на изображения.

Особенности запуска скрипта

Перед запуском плагина, библиотека jQuery проверяет готовность страницы и только после этого происходит инициирование скрипта. Поэтому следует указать, что страница готова к работе и все необходимые элементы на месте. Для этого используем готовый код со страницы с документацией, содержащий условие запуска.

Теперь проверяем работоспособность плагина на сайте. Если все сделано правильно и нет ошибок в коде, скрипт сработает корректно и на странице появится слайдер с изображениями.

Теперь стало очевидно, что подключить JQuery намного быстрее и проще, чем создавать JS-код с нуля. Рад са овом библиотеком помаже да се уштеди време клијента и извођача радова, брзо изабере готова решења и тестира их у пракси. Зато се многи програмери и дизајнери дизајна окрећу библиотеци готових решења за оптимизацију и убрзавање њиховог рада.