Pva P9 2021

PROGRAMIRANJE WEB APLIKACIJA
PREDAVANJE 8:
✓ jQuery
1
IDEJA JQUERY BIBLIOTEKE
 U ranim danima web-a nisu postojali jasni standardi JavaScript implementacije. To je
dovelo do toga da su veb pretraživači implementirali JavaScipt na različite načine,
što je developerima uzrokovalo mnogobrojne probleme.
 Kao posledica ovakve implementacije, programeri su morali da JavaScript kod pišu
za različite web pretraživače.
 Uvođenjem jQuery biblioteke ovaj problem je umnogome rešen jer je postojala
jedinstvena sintaksa koja je obezbeđivala funkcionalanost koda na svim modernim
pretraživačima.
 JQuery je kompleksna bibloteka koja je objavljena 2006.godine.
 jQuery je biblioteka koja ima implemetirane JavaScript funkcionalnosti. Ove
funkcionalnosti se izvršavaju u pretraživaču na klijentskoj strani.
 Glavna ideja Johna Resiga, tvorca JQuery biblioteke, bila je da se osposobi
interakcija sa elementima JavaScripta pomoću CSS selektora.
 To je demonstriralo novu ideju koja je formirala početke biblioteke kakvu znamo
danas.
 Za rad sa JQuery bibliotekom neophodno je osnovno poznavanje DOM modela.
 Kada je stranica učitana, web pretraživač generiše reprezentaciju sadržaja te
stranice.
 Za svaki element date stranice, web pretraživač generiše jedan ili više čvorova
(nodes), koji predstavljaju elemente te stranice.
 Prilikom rada sa JavaScriptom, DOM može da prouzrokuje probleme, ali pomoću
JQuery-ja ovo lako može da se izbegne
JQUERY BIBLIOTEKA
 jQuery je besplatna i jedna od najmoćnijih JavaScript biblioteka.
 Sintaksa jQuery biblioteke olakšava rad, pregledna je i kompaktna
 Koristi CSS sintaksu za selektovanje elemenata
 Dizajniran je tako da lako može manipulisati setovima elemenata
 Omogućava povezivanje koda u lanac izvršavanja (statement chaining)
 jQuery je veoma proširiv kroz upotrebu plugin-ova
 Osnovni ciljevi JQuery biblioteke:
 pojednostavljena manipulacija DOM elementima i njihovim svojstvima
 jednostavno obavljanje uobičajenih zadataka u JavaScript-u (animacije, AJAX, upravljanje
dogadajima)
 nezavisnost od pregledača
IMPLEMENTACIJA JQUERY BIBLIOTEKE
 Dodavanje jQuery biblioteke na stranicu možemo uraditi na dva načina:
 Preuzimanjem jQuery biblioteke sa zvaničnog sajta jQuery.com
 Uključivanjem jQuery biblioteke preko CDN (content delivery network ili content
distribution network)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
IMPLEMENTACIJA JQUERY BIBLIOTEKE
 JQuery biblioteka se preuzima sa veb lokacije:
 https://jquery.com/download/
 Kompresovana verzija: <body>
...
 preporučljivo koristiti jer se brže učitava
<script src="jquery-3.3.1.min.js" type="text/javascript">
 https://code.jquery.com/jquery-3.3.1.min.js </script>
 Nekompresovana verzija: </body>
 čitljiva verzija-korisna kao početna tačka za

dalji razvoj
 https://code.jquery.com/jquery-3.3.1.js
 Bibilioteka se uključuje na kraju body
elementa, na uobičajen način.
JQUERY KOLEKCIJE
 Osnovne strukture podataka u JQuery biblioteci su JQuery kolekcije
 JQuery kolekcija sadrži jedan ili više JavaScript objekata koji predstavljaju HTML
DOM elemente
 Nudi uniforman interfejs za pristup HTML elementima
 Metode JQuery kolekcija obično vraćaju tu istu kolekciju, što omogućava
jednostavno ulančavanje metoda
 Elementima u JQuery kolekciji se može manipulisati istovremeno
 (npr. promeniti im boju, postaviti rukovalac dogadajem, i sl.)
SELEKTOVANJE ELEMENATA NA STRANICI
JQUERY SELEKTORI
 jQuery selektori su zasnovani na CSS selektorima, uz neke
dopune  Dodatni selektori:
 Svi selektori počinju znakom $ i navode se u zagradama $(...)  $("*") - označava sve elemente
 Osnovni selektori:  $("p:first") - prvi element <p>
 document - $(document) – dokumenat nad kojim se radi  $("tr:even") i $("tr:odd") - parni i neparni
redovi tabele
 this - $(this) -objekat nad kojim je izvršena akcija
 $("[src]") - svi elementi sa atributom src
 ime elementa: $("p") - kolekcija svih p elemenata u
dokumentu  $("a[target=' blank']") i $("a[target!=' blank']")
- svi linkovi kod kojih je vrednost atributa target
 identifikator elementa: $("#istaknuti pasus") - kolekcija sa jednaka, odnosno nije jednaka ' blank'
jedinstvenim elementom
 identifikator klase: $(".istaknut") - kolekcija svih elemenata
sa klasom istaknut
MANIPULACIJA SA HTML I CSS SADRŽAJEM
$(“.mojaKlasa”).hide()
$(“p”).append(“Neki tekst se dodaje u paragraf”)
Opšti oblik pisanjem funkcija

selektor.akcija(function(){
//ovde ide kôd
});
DOCUMENT READY FUNKCIJA
 Da bi se jQuery uspešno izvršavao potrebno je da dokument bude „spreman“ za rad.
 Da bi se to osiguralo sve funkcije se smeštaju u okviru document().ready funkcije
$(document).ready(function(){
// ovde ide kôd
}
Ili skraćeni oblik
$(function (){
..........
});
JQUERY I DOM ELEMENTI
 Kreiranje JQuery kolekcije koja sadrži neki DOM element el postiže se sintaksom $(el)
 Ovo je zgodno ako želimo da manipulišemo elementom koristeći jednostavan i moćan JQuery interfejs
(nasuprot standardnom DOM interfejsu)
 Sintaksom $("<div></div>") kreira se JQuery kolekcija koja sadrži samo jedan element div koji nije u stablu
dokumenta
 Ovako kreiran element se može naknadno ubaciti u stablo na željenu poziciju
JQUERY SELEKTORI I FILTERI
 Selektori i filteri se koriste da bi se izvukle informacije iz Web strane
 Selektori u jQuery biblioteci se služe istom sintaksom kao i CSS što je jedna od prvih ideja za kreiranje
ovakve biblioteke
 Filteri se koriste za dodatnu pretragu nad rezultatom koji vrate selektori (p, .selector, #intro, p:first,
h2:not(.selector))
 Osnovna sintaksa jQuery instrukcije je:
$(selector:filter).action()
 $(this).hide() – sakriva tekući element.
 $("p:even").hide() – sakriva sve parne <p> elemente.
 $(".test").hide() – sakriva sve elemente sa class="test".
 $("#test").hide() – sakriva sve elemente sa id="test".
 Osnovni selektori
Selektor Rezultat
$(„naziv_taga“) Selektuje sve tagove navedenog naziva
$(„#id_elementa“) Selektuje element sa navedenim id-jem
$(„.naziv_klase“) Selektuje sve elemente navedene klase
$("[attribute]") Selektuje sve elemente sa atributom attribute
 Osnovni jQuery filteri

Filter Selektuje....
:first, :last Prvi ili poslednji element nad kojim je pozvan
:even, :odd Parne ili neparne elemente nad kojim je pozvan
:gt(), :lt(), :eq() Elemente čiji je indeks: veći od, manji od, jednak
:animated Elemente koji su u procesu animacije(koristi se kada se želi zaustaviti
animacija u toku)
:focus Element koji je trenutno u fokusu
:not(expr) Elemente koji ne odgovaraju navedenom izrazu
KREIRANJE I EDITOVANJE SADRŽAJA STRANE
 Metode za pozicioniranje novog sadržaja selektovanom elementu:
 append(), prepend(), before(), after()
 Metode za dodavanje novog HTML ili text sadržaja element - vrednosti elemenata se mogu pročitati korišćenjem
ove tri metode
 html()
 $(“#prvi”).html(“<p>Neki <b>tekst</b> </p>”)
 $(“#drugi”).html()
 text()
 $(“#prvi”).text(“<p>Neki <b>tekst</b> </p>”)
 val()
 za preuzimanje i podešavanje vrednosti aktivnih elemenata
MANIPULACIJA CSS-OM KORIŠĆENJEM JQUERY-A
 css() metoda omogućava izmenu css svojstava selektovanog objekta
 css("naziv svojstva") – vraća se vrednost svojstva
 css("naziv svojstva","vrednost") - postavlja se vrednost jednog svojstva
 css({"naziv svojstva":"vrednost","naziv svojstva":"vrednost",...}) - postavlja se
vrednost više svojstava
 Upravljanje klasama:
 addClass() - dodaje jednu ili više klasa datom elementu
 removeClass() - uklanja jednu ili više klasa sa datog elementa
 toggleClass() - naizmenično dodaje i uklanja jednu ili više klasa sa datog elementa
 Upravljanje atributima:
 attr() - proizvoljni atribut elementa se može očitavati i postavljati
$("#mojelemenat").attr("id");
$("#mojelemenat").attr("id", "novi_id");
.CSS()
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>jQuery</h1>
<button>Pomeri div</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
<script src="js/jquery-3.5.1.js"></script>
<script>
$("button").click(function(){
$("div").css({left: '250px', background:'red'});});
})</script>
.HTML(), .TEXT(), .VAL()
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>
<script src="jquery-3.4.1.js"></script>
<script>
$("#btn1").click(function(){
$(this).text("Kliknut");
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
$(this).text("Kliknut");
alert("HTML: " + $("#test").html());
});
})
</script>
UPRAVLJANJE KLASAMA
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="klase.css"/>
</head>
<body>
<h1>jQuery</h1>
<h2>Naslov 2</h2> .important {
<p>Ovo je paragraf.</p> font-weight: bold;
<p>Ovo je drugi paragraf.</p> font-size: xx-large;
<div>Vaaaaaaaaaazan tekst!</div> }
<br>
.blue {
<button>Dodaj klase</button>
</body> color: blue;
</html> }
<script>
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
})
</script>
DODAVANJE NOVIH ELEMENATA U STABLO
 Elementi se mogu dodavati u stablo tako što se dodaju u sadržaj nekog elementa
 U tu svrhu se koriste metode append, prepend, before i after
 Primer:
$("#mydiv").append($("<p>"Hello JQuery</p>"));
$("#mydiv").before($("<p>"Hello again</p>"));
 Metoda remove uklanja iz stabla i delocira sve objekte date kolekcije

 Metoda detach uklanja iz stabla elemente, ali ih ne dealocira:
var dspan = $("#myspan").detach();
$("#mydiv").append(dspan); // premestamo span u div
.APPEND()
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<div>
<input type="button" value="Create element"/>
<div id="div1">
<p class="p1">Ovo je text 1</p>
</div>
</div>
</body>
</html>
<script>
$("input").click(function(){
var a=$("<p></p>").text("Tekst iz jQuery-ja");
a.attr("id", "novi_id");
$("#div1").append(a);
});
})
</script>
.PREPEND()
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<div>
<div id="div1">
</div>
</div>
</body>
</html>
<script>
$("#div1").prepend(a);
});
})
</script>
.AFTER()
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<div>
<div id="div1">
</div>
</div>
</body>
</html>
<script>
$("#div1").after(a);
});
})
</script>
.BEFORE()
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<div>
<div id="div1">
</div>
</div>
</body>
</html>
<script>
$("#div1").before(a);
});
})
</script>
.BEFORE()
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<div>
<div id="div1">
</div>
</div>
</body>
</html>
<script>
$("#div1").before(a);
});
})
</script>
JQUERY DOGAĐAJI
 Postavljanje rukovaoca: on() metoda:

$("#mydiv").on("click", function(event)
{ alert("Zdravo"); });
 Uklanjanje rukovaoca: off() metoda
 Događaji se mogu izazivati trigger() metodom
UPRAVLJANJE DOGAĐAJIMA
 Metoda on() se koristi za postavljanje osluškivača za

događaj nad elementom. <script>
 Prvi parametar ove metode je naziv događaja, a drugi $("p").on("click", function(){
je funkcija koja će biti pozvana onog trenutka kada se alert("Neki paragraf je kliknut")
})
događaj nad elementom detektuje })
</script>
 Uklanjanje osluškivača za događaj se vrši uz pomoću
off() metode
JQUERY EFEKTI
 Moderne web aplikacije su bogate različitim atraktivnim animacijama i efektima.
Ove animacije veoma često su posledica delovanja upravo jQuery biblioteke.
 Danas postoji mnoštvo plugin-ova koji olakšavaju kreiranje animacija.
 Iako sve ono što možemo uraditi uz pomoć jQuery biblioteke možemo uraditi i bez
nje, upotreba jQuery-a pisanje koda čini lakšim i brži.
 U samo nekoliko linija koda moguće je postići prilično atraktivne efekte.
JQUERY EFEKTI
 HTML elementi se mogu sakriti i ponovo prikazati metodama hide(), show() i toggle()
 Element se može postepeno pojavljivati ili postepeno gubiti sa slike metodama fadeIn(), fadeOut(),
fadeToggle()
 Element se moze postepeno pojavljivati "klizanjem naniže", odnosno postepeno nestajati "klizanjem
naviše" metodama slideUp(), slideDown(), slideToggle()
 Sve ove funkcije mogu imati vrednost argumenata "slow", "fast" ili broj milisekundi
 Metod stop() se koristi za zaustavljanje efekta pre nego što se završi
OSNOVNI EFEKTI ANIMACIJE
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
<script>
$(".btn1").click(function(){
$("p").hide(1000);
});
$("p").show(1000);
});
})
</script>
JQUERY EFEKTI
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<button class="btn1">Animate</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
<script>
$("div").animate({left: '250px', opacity: '0.5', height: '150px', width: '150px'}, "slow");
});
})
</script>
FADDING EFEKTI
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
<script>
$("p").fadeOut(2000)
});
$("p").fadeIn();
});
})
</script>
SLIDING EFEKTI
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<button class="btn1">Slide Up</button>
<button class="btn2">Slide Down</button>
</body>
</html>
<script>
$("p").slideUp(2000)
});
$("p").slideDown();
});
})
</script>
JEDNOSTAVNA ANIMIRANA GALERIJA
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>jQuery</h1>
<div style="align: center; width: 100%">
<img id="glavna" src="slike/slika0.jpg" alt="a" width="400" height="300"/><br>
<img src="slike/slika0.jpg" alt="a" width="100" height="60"/>
</div>
</body>
</html>
<script>
$("img").click(function(){
$("#glavna")
.hide()
.stop()
.attr("src",$(this).attr("src"))
.css({"opacity":"0"})
.show()
.animate({"opacity":"1"}, 2000);
});
})
</script>

Pva P9 2021

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pva P9 2021

Uploaded by

Copyright:

Available Formats

PROGRAMIRANJE WEB APLIKACIJA

 čitljiva verzija-korisna kao početna tačka za

 Osnovni selektori:  $("p:first") - prvi element <p>

Opšti oblik pisanjem funkcija

 Osnovni jQuery filteri

 Metoda remove uklanja iz stabla i delocira sve objekte date kolekcije

 Postavljanje rukovaoca: on() metoda:

 Metoda on() se koristi za postavljanje osluškivača za

You might also like