jQuery

=**СОДРЖИНА:**=

ВОВЕД ИНСТАЛИРАЊЕ НА jQuery jQuery СИНТАКСА jQuery СЕЛЕКТОРИ jQuery НАСТАНИ jQuery ЕФЕКТИ jQuery Callback ФУНКЦИИ
 * Елемент селектор
 * #id селектор
 * .class селектор
 * Други jQuery селектори
 * $(document).ready
 * click
 * dblclick
 * mouseenter
 * mouseleave
 * hover
 * focus
 * blur
 * jQuery Hide/Show
 * jQuery Fade
 * jQuery Slide
 * jQuery Animate

 =**ВОВЕД**=

jQuery е мулти-платформска JavaScript библиотека која е направена со цел да го поедностави client-side скриптирањето на HTML. Важно да се напомене е дека jQuery и JavaScript не се два различни скриптни јазици. jQuery e всушност JavaScript, односно група од JavaScript кодови/функции, кои се оптимизирани и собрани во една целина (библиотека) со цел да го поедностават кодирањето. За некои покомплицирани и често користени операции, во JavaScript се потребни повеќе линии код, тој код исто така може да не биде компатибилен со сите веб прелистувачи, односно во некои веб прелистувачи кодот да се изврши како што треба, а во други да прави проблем. Кај jQuery истиот тој код може да биде заменет во само една линија код. Тој код ќе биде попрегледен, а воедно и компатибилен со многу од популарните веб прелистувачи како Chrome, Firefox, Internet Explorer, Safari и други.

Целта на jQuery е да се направи многу полесно користењето на JavaScript на вашиот веб сајт. jQuery исто така ги прави поедноставни многу од комплицираните нешта од JavaScript, како на пример AJAX повиците и DOM манипулацијата.

jQuery библиотеката ги содржи следниве карактеристики:
 * HTML/DOM манипулација
 * CSS манипулација
 * HTML event методи
 * ефекти и анимации
 * AJAX

Има многу други JavaScript frameworks како на пр. Ext JS, Dojo и др., но jQuery е најпопуларен и најмногу користен.

Многу од големите компании го користат jQuery, некои од тие компании се:
 * Google
 * Microsoft
 * IBM
 * Netflix

 =**ИНСТАЛИРАЊЕ НА jQuery**=

Има неколку начини да се започне со користење jQuery на вашиот веб сајт:
 * Со симнување на jQuery библиотеката од jQuery.com
 * Со вклучување на jQuery од CDN, како на пр. Google

Има две верзии на jQuery достапни за симнување:
 * **Production** верзија – оваа веерзија е за активен веб сајт кој се користи, бидејќи е компресирана и смалена jQuery библиотеката.
 * **Development** верзија – оваа верзија е за тестирање и се користи при процесот на изработка на веб сајтот/апликацијата. Кодот е некомпресиран и читлив.

Двете верзии може да се симнат од jQuery.com.

jQuery библиотеката е всушност JavaScript фајл и истиот се референцира со HTML тагот ( тагот треба да биде внатре во делот).

code  code

Исто така, доколку не сакаме да ја симнуваме и хостираме на наш сервер jQuery библиотеката, постојат и други алтернативи како на пр. вклучување на библиотеката од CDN (Content Delivery Network). И Microsoft и Google хостираат jQuery. За да се користи jQuery од Google или Microsoft, се користат следниве линии код:

code  code
 * Google CDN:**

code  code
 * Microsoft CDN:**

 =**jQuery СИНТАКСА**=

jQuery синтаксата е прилагодена за избирање на HTML елементи и извршување на некое дејство на избраниот елемент. Основната синтакса е: $(selector).action

 ( //selector// ). //a// //ction// (
 * $ знакот дефинира, односно овозможува пристап до jQuery
 * (selector) се користи за пронаоѓање на HTML елементи
 * action е всушност дејството кое треба да се изврши врз селектираниот HTML елемент

Примери:


 * $(this).hide – го сокрива тековниот елемент
 * $("p").hide – ги сокрива сите елементи
 * $(".test").hide - ги сокрива сите елементи со class="test"
 * $("#test").hide - ги сокрива сите елементи со id="test"

Сите jQuery методи треба да бидат внатре во document ready евентот:

code $(document).ready(function {

// овдe треба да бидат методите кои ќе се користат

}); code

Ова е за да се спречи извршување на било кој jQuery код пред документот да биде целосно вчитан. Добра практика е да се почека документот целосно да се вчита и да биде целосно подготвен пред да се почне да се работи со него. Еве неколку примери од дејствиа кои нема да бидат успешни, бидејќи методите се извршени пред документот да биде целосно вчитан:

- сокривање елемент кој сеуште не е вчитан - проверка за големината на некоја слика која уште не е вчитана

Исто така, постои и уште еден уште пократок метод за document ready евентот:

code $(function {

// овдe треба да бидат методите кои ќе се користат

}); code

Може да се користи било која од наведените синтакси. Препорачливо е да се користи првиот начин со document ready евентот.

 =**jQuery СЕЛЕКТОРИ**=

jQuery селекторите овозможуваат селектирање и манипулирање со HTML елементи. На пример, многу често може да сретнеме веб страни кои имаат имплементирано Show/Hide опција на страната. Ова може да биде направено со користење на jQuery селектор. jQuery селекторите се користат да пронајдат или селектираат HTML елементи базирани на нивното id, класа, тип, атрибути, вредности на атрибути и др. Базирани се на веќе постоечките CSS селектори, но има и некои други custom селектори.



**Елемент селектор**
jQuery елемент селекторот избира елементи базирани на името на елементот. Може да се селектираат сите елементи на страната на следниов начин:


 * $(“p”)**

ПРИМЕР: Кога ќе се кликне на копчето, сите елементи ќе бидат сокриени.

code <!DOCTYPE html>   $(document).ready(function{ $("button").click(function{ $("p").hide; }); });

ЗАГЛАВИЕ Параграф 1 Параграф 2 КЛИКНИ ОВДЕ code



**#id селектор**
jQuery #id селекторот го користи id атрибутот на HTML тагот за да пронајде конкретен елемент.

ПРИМЕР: Кога ќе се кликне на копчето, елементот со id=”test” ќе биде сокриен.

code <!DOCTYPE html>   $(document).ready(function{ $("button").click(function{ $("#test").hide; }); });

ЗАГЛАВИЕ Параграф 1 Параграф 2 КЛИКНИ ОВДЕ

code



**.class селектор**
jQuery .class селекторот го користи class атрибутот на HTML тагот за да пронајде конкретен елемент.

ПРИМЕР: Кога ќе се кликне на копчето, елементите со class=”test” ќе бидат сокриени.

code <!DOCTYPE html>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $(".test").hide; }); });

ЗАГЛАВИЕ Параграф 1 Параграф 2 КЛИКНИ ОВДЕ code



**ДРУГИ jQuery СЕЛЕКТОРИ**

 * $("*") - ги селектира сите елементи
 * $(this) - го селектира тековниот HTML елемент
 * $("p.intro") - ги селектира сите елементи во class="intro"
 * $("p:first") - го селектира првиот елемент
 * $("ul li:first") - го селектира првиот <li> елемент од првиот <ul>
 * $("ul li:first-child") - го селектира првиот <li> елемент од секој <ul> елемент
 * $("[href]") - ги селектира сите елементи со href атрибут
 * $("a[target='_blank']") - ги селектира сите <a> елементи со target атрибут вредност еднаква на "_blank"
 * $("a[target!='_blank']") - ги селектира сите <a> елементи со target атрибут вредност не еднаква на "_blank"
 * $(":button") - ги селектира сите елементи и елементи од type="button"

 =**jQuery НАСТАНИ**=

Сите дејствија на корисникот на кои веб страната може соодветно да одговори се нарекуваат настани. Примери:
 * придвижување на маусот над некој елемент
 * селектирање на radio копче
 * кликнување на некој елемент или линк

jQuery библиотеката е прилагодена да одговори на многу корисни настани кои една веб страна може да ги прими.

Настани кои се поддржани од jQuery можат да бидат категоризирани како:
 * 1) Mouse настани (пр. click настан, double click настан)
 * 2) Keyboard настани (пр. keypress, keydown, keyup)
 * 3) Form настани (пр. form submit настан)
 * 4) Document настани (пр. load настан, resize настан)

Најчесто користени jQuery Event методи:



**$(document).ready**
- овој метод ни овозможува да извршиме некоја функција кога документот е целосно вчитан. 

**click**
- овој метод додава event handler функција на некој HTML елемент. Функцијата се извршува кога корисникот ќе кликне на HTML елементот. Пр. кога click настанот е повикан на елементот, скриј го тековниот елемент.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("p").click(function{ $(this).hide; }); });

Ако ме кликнеш, ќе изчезнам. :) Кликни ме и мене! :) Исто така и мене! :)

code



**dblclick**
- овој метод додава event handler функција на некој HTML елемент. Функцијата се извршува кога корисникот ќе кликне два пати на HTML елементот.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("p").dblclick(function{ $(this).hide; }); });

Ако ме кликнеш два пати, ќе изчезнам. :) Кликни ме и мене два пати! :) Исто и мене! :D

code



**mouseenter**
- овој метод додава event handler функција на некој HTML елемент. Функцијата се извршува кога покажувачот на глувчето се стави над HTML елементот.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("#p1").mouseenter(function{ alert("Добредојде во параграфот p1!"); }); });

Стави го покажувачот од глувчето на овој текст!

code



**mouseleave**
- овој метод додава event handler функција на некој HTML елемент. Функцијата се извршува кога покажувачот на глувчето се наоѓа над HTML елементот и притоа се кликне на него.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("#p1").mousedown(function{ alert("Ти кликна на Параграф 1!"); }); });

Параграф 1

code



**hover**
- овој метод содржи две функции, комбинација од mouseenter и mouseleave методите. Првата функција се извршува кога покажувачот на глувчето се стави над некој HTML елемент, а втората функција кога покажувачот на глувчето се тргне од HTML елементот.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("#p1").hover(function{ alert("Добредојде во Параграф 1!"); },   function{ alert("Пријатно!"); }); });

Параграф 1

code



**focus**
- овој метод додава event handler функција на HTML form полето. Функцијата се извршува кога form полето е во фокусот.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("input").focus(function{ $(this).css("background-color","#cccccc"); }); $("input").blur(function{ $(this).css("background-color","#ffffff"); }); });

Име: <input type="text" name="fullname"> Е-маил: <input type="text" name="email">

code



**blur**
- овој метод додава event handler функција на HTML form полето. Функцијата се извршува кога form полето не е повеќе во фокусот.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("input").focus(function{ $(this).css("background-color","#cccccc"); }); $("input").blur(function{ $(this).css("background-color","#ffffff"); }); });

Име: <input type="text" name="fullname"> Е-маил: <input type="text" name="email">

code

 =**jQuery ЕФЕКТИ**=



**jQuery Hide/Show**
- со jQuery, односно со hide и show методите може да се сокриваат и прикажуваат HTML елементи.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("#hide").click(function{ $("p").hide; }); $("#show").click(function{ $("p").show; }); }); Ако кликеш на "Hide" копчето, ќе исчезнам. Hide Show code

Опционалниот speed параметар ја одредува брзината на сокривање и прикажување, и може да ги прими следниве вредности: slow, fast, или милисекунди. Опционалниот callback параметар е функција која треба да се изврши откако методите hide и show ќе завршат.

Следниов пример демонстрира speed параметар со hide методот:

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $("p").hide(1000); }); }); Hide Ова е првиот параграф. Ова е вториот параграф. code



**jQuery Fade**
jQuery ги има следниве fade методи:
 * fadeIn
 * fadeOut
 * fadeToggle
 * fadeTo


 * jQuery fadeIn метод**

Синтакса: $(selector).fadeIn(speed,callback);

Опционалниот speed параметар го одредува времетраењето на ефектот. Може да ги прими следниве вредности: slow, fast, или милисекунди. Опционалниот callback параметар функција која треба да се изврише откако fade ефектот заврши.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $("#div1").fadeIn; $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); });

Демонстрирање fadeIn со различни параметри Кликни овде

code


 * jQuery fadeOut метод**

Синтакса: $(selector).fadeOut(speed,callback);

Опционалниот speed параметар го одредува времетраењето на ефектот. Може да ги прими следниве вредности: slow, fast, или милисекунди. Опционалниот callback параметар функција која треба да се изврише откако ефектот ќе заврши.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $("#div1").fadeOut; $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); });

Демонстрирање fadeOut со различни параметри Кликни овде

code


 * jQuery fadeToggle метод**

Синтакса: $(selector).fadeToggle(speed,callback);

Опционалниот speed параметар го одредува времетраењето на ефектот. Може да ги прими следниве вредности: slow, fast, или милисекунди. Опционалниот callback параметар функција која треба да се изврише откако ефектот ќе заврши.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $("#div1").fadeToggle; $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); });

Демонстрирање fadeToggle со различни параметри за брзина. Кликни овде

code


 * jQuery fadeTo метод**

Синтакса: $(selector).fadeTo (speed,opacity,callback);

Задолжителниот speed параметар го одредува времетраењето на ефектот. Може да ги прими следниве вредности: slow, fast, или милисекунди. Задолжителниот opacity параметар одредува кое ниво на прозирност ќе го има ефектот. Опционалниот callback параметар функција која треба да се изврише откако ефектот ќе заврши.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); }); });

Демонстрирање fadeTo со различни параметри. Кликни овде code


 * jQuery Slide**

Со jQuery може да се креира лизгачки ефект на елементите. jQuery ги има следниве лизгачки методи:
 * slideDown
 * slideUp
 * slideToggle


 * jQuery slideDown метод**

Синтакса: $(selector).slideDown(speed,callback);

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("#flip").click(function{ $("#panel").slideDown("slow"); }); });

{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } { padding:50px; display:none; } Кликни овде Hello world! code
 * 1) panel,#flip
 * 1) panel


 * jQuery slideUp метод**

Синтакса: $(selector).slideUp(speed,callback);

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("#flip").click(function{ $("#panel").slideUp("slow"); }); });

{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } { padding:50px; }
 * 1) panel,#flip
 * 1) panel

Кликни овде Hello world!

code


 * jQuery slideToggle метод**

Синтакса: $(selector).slideToggle(speed,callback);

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("#flip").click(function{ $("#panel").slideToggle("slow"); }); });

{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } { padding:50px; display:none; }
 * 1) panel,#flip
 * 1) panel

Кликни овде Hello world!

code



**jQuery Animate**
jQuery animate методот се користи за креирање анимации. Синтакса: $(selector).animate({params},speed,callback);

ПРИМЕР Бр. 1 code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $("div").animate({left:'250px'}); }); });

Стартувај ја анимацијата Стандардно, сите HTML елементи имаат статична позиција, и не можат да бидат поместени. За да се манипулира со позицијата, прво е потребно правилно да се сетира CSS позицијата на елементот на relative, fixed или absolute!

code

ПРИМЕР Бр. 2

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $("div").animate({     height:'toggle'    }); }); });

Стартувај ја анимацијата By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

code

ПРИМЕР Бр. 3

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $("div").animate({     left:'250px',      opacity:'0.5',      height:'150px',      width:'150px'    }); }); });

Стартувај ја анимацијата By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

code

 =**jQuery Callback функции**=

JavaScript изјавите се извршуваат линија по линија. Меѓутоа, со ефекти, следната линија код ќе биде извршена иако ефектот не е завршен. Ваквата ситуација може да предизвика грешки. За да се спречи ова, треба да се креираат callback функции. Callback функцијата ќе се изврши откако тековниот елемент ќе заврши.

Синтакса: $(selector).hide(speed,callback);

Следниов пример има callback параметар кој е функција. Функцијата ќе биде извршена откако hide ефектот ќе заврши.

code <!DOCTYPE html> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> $(document).ready(function{ $("button").click(function{ $("p").hide("slow",function{     alert("Параграфот е сега скриен!");    }); }); }); Hide Параграф 1 code