Пређи на садржај

Корисник: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 као замену за $ без губљења функционалности.[1]

Типичан скелет[уреди | уреди извор]

Типично коришћење 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). У супротном, кориснику ће бити прослеђени порука да је дошло до грешке, као и статус захтева и тачна грешка.

  1. ^ „jQuery.noConflict() jQuery API Documentation”.