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