Корисник:Luka Zivanovic/песак

Коришћење

Укључење библиотеке

jQuery библиотека је JavaScript документ који садржи догађаје, ефекте и Ajax функције. Може се укључити у веб страницу линковањем на локалну копију, или на једну од многих копија које су доступне на серверима.

Повезивање са локалном копијом:

<script src="jquery.js"></script>

Повезивање са копијом на серверу:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

Стилови коришћења

jQuery има два стила коришћења:

• Помоћу $ функције, која је фабрички метод jQuery објеката. Ове функције је могуће уланчавати, пошто све враћају jQuery објекат.
• Помоћу$.-префиксних функција. Оне се не односе директно на jQuery објекте.

Приступ и манипулација више DOM чворова у jQuery типично почиње позивом $ функције чији је аргумент CSS селектор (као ниска). Она враћа jQuery овјекат који реферише на све одговарајуће HTML елемента странице. $("div.test"), на пример, враћа jQuery објекат са свим div елементима класе test. Овај скуп чворова може бити манипулисан позивајући методе на jQuery објекат или на саме чворове.

Мод без преклапања

jQuery такође садржи .noConflict() мод, који се ослобађа $. Ово може бити корисно, ако се jQuery користи са другим бибилиотекама које такође користе $ као идентификатор. У овом моду програмери могу користити идентификатор jQuery као замену за $ без губљења функционалности.

Типичан скелет

Типично коришћење jQuery библиотеке је креирање догађаја .ready(). Ова метода ће бити покренута када претраживач конструише DOM стабло и пошаље load догађај.

<script type="text/javascript">
$(document).ready(function(){
        // jQuery kod, hvatanje dogadjaja...
});
</script>

Callback функције су такође садржане у .ready() као анонимне функције, али се позивају када је покренут догађај за callback. На пример, следећи код додаје догађај за клик мишем на img елемент.

$(document).ready(function(){
        $('img').click ( function() {
              // obrađuje klik događaj na bilo koji img element na stranici
        });
});

Следеће синтаксе су еквивалентне:

• $(document).ready(handler)
• $(handler)

Уланчавање

Свака jQuery команда враћа jQuery објекат, тако да се оне могу уланчавати.

$("div.test").add("p.naslov").addClass("plavi").slideDown("slow");

Овај низ поља представља унију свих div тагова са класним атрибутом test и све тагове p са класним атрибутом naslov, додаје класни атрибут plavi на сваки одговарајући елемент, и анимира њихово појављивање на екран.

Креирање нових DOM елемената

Осим приступа постојећим DOM чворовима, помоћу jQuery је могуће и креирање нових DOM елемената, ако ниска прослеђена као аргумент $() изгледа као HTML. На пример, следећи код проналази HTML елемент select са ID-ем marke и додаје елемент option са вредношћу "VAG" и текстом "Volkswagen":

$('select#marke').append($('<option />').attr({value:"VAG"}).append("Volkswagen"));

Утилитарне функције

Функције које имају префикс $. су утилитарне функције или функције које утичу на глобална својства и понашања. На пример, следећи код представља функцију која пролази кроз низ test:

$.test([1,2,3], function() {
  console.log(this + 1);
});

Функција исписује "2", "3", "4" на конзолу.

Ajax

Могуће је обавити упите независно од прегледача и потом учитати и манипулисати са удаљеним подацима.

$.ajax({
  type: "POST",
  url: "test.php",
  data: "name=Pera&location=Beograd"
}).done(function(msg) {
  alert("Podaci su sačuvani: " + msg);
}).fail(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    "Vaš zahtev nije uspešno izvršen.\n\n"
      + "XML Http Zahtev: " + JSON.stringify(xmlHttpRequest)
      + ",\nStatus: " + statusText
      + ",\nGreška: " + errorThrown);
});

Овај пример шаље податке name=Pera и location=Beograd страници test.php. Када се захтев успешно заврши, кориснику се појављује прозор са одговарајућом поруком (alert). У супротном, кориснику ће бити прослеђени порука да је дошло до грешке, као и статус захтева и тачна грешка.