12 jquery.ppt - compatibility mode programiranje: pristup html i css elementima rukovanje browser...
TRANSCRIPT
![Page 1: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/1.jpg)
JQuerydr Suzana Marković, dipl.ing. [email protected]
![Page 2: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/2.jpg)
Šta je JQuery?
jQuery je jednostavna JavaScript biblioteka, čiji je slogan "write less, do more".
Namena: jednostavnija upotreba JavaScript-a na veb-sajtu.
JavaScript metode iz više redova smešta u jedan red.
Pojednostavljuje JavaScript, u smislu poziva AJAX-a ili DOM manipulacija.
![Page 3: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/3.jpg)
Šta je jquery? Javascript biblioteka koja olakšava JavaScript
programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija
Principi: Nije neophodno pisati sve iz početka u interakciji sa DOM (Document Object Model-om),
predstavlja platformu za vezu sa objektima u HTML, XHTML i XML dokumentima
Sintaksa Bazirana na selektovanju HTML elemenata i izvršavanju
akcija nad njima$(selector).action()
![Page 4: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/4.jpg)
Dodavanje JQuery-ja veb stranici
Jeda od dva načina: Download jQuery biblioteke sa sajta jQuery.com
(<script src="jquery-3.4.1.min.js"></script>) Uključivanje jQuery-a iz CDN-a sa Google-a
(<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>),ili Microsoft-a (<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>)
![Page 5: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/5.jpg)
jQuery selektori
Omogućavaju da se selektuje i manipuliše HTML elementima.
Koriste se da se nađu (ili selektuju) HTML elementi prema njihovom imenu, id-ju, klasi, tipu, atributu, vrednosti atributa itd.
Svi selektori u jQuery-ju počinju znakom dolar i malim zagradama: $().
![Page 6: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/6.jpg)
Sintaksa
Omogućava selektovanje HTML elementa i obavljanje neke akcije nad njim.
Osnovna sintaksa: $(selector).action()jQuery koristi promenljivu „$” kao
skraćenicu umesto reči jQuery - ispred svake naredbe pri pisanju jQuery-ja potrebno je staviti „$”.
Deo (selector) "pronalazi" HTML elementaction() je akcija koja će se izvršiti nad
elementom.
![Page 7: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/7.jpg)
Primeri
$(this).hide() - skriva tekući element.$("p").hide() - skriva sve <p> elemente.$(".test").hide() - skriva sve elemente sa
klasom "test".$("#test").hide() - skriva sve elemente sa
id="test".
![Page 8: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/8.jpg)
Document Ready Event
Metode JQuery-ja su najčešće unutar "document ready" događaja.
$(document).ready(function(){ //$(function(){
// jQuery methode...
});Ovim se sprečava pokretanje bilo kog JQuery
koda pre nego što se dokument učita (is ready).
![Page 9: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/9.jpg)
Document Ready EventDobra je praksa sačekati da se dokument
učita, pa tek onda raditi sa njim.Evo nekoliko primera radnji koje ne mogu
uspeti ako se metode pokrenu pre nego što se dokument u potpunosti učita: Pokušajte da sakrijete element koji još nije
stvoren;Pokušajte da menajte veličinu slike koja još nije
učitana;
![Page 10: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/10.jpg)
Primer skrivanja elemenata... <script>
$(function(){
$("button").click(function(){
$("p").hide(); //toggle()
});
});
</script>
</head>
<body>
<h2>Naslov</h2>
<p>Paragraf 1.</p>
<p> Paragraf 2.</p>
<button>Klikni me!</button>
</body>
h1.jedan{visibility:visible;}h1.dva{visibility:hidden;}</style></head><body><h1 class="jedan">Naslovjedan</h1><h1 class="dva">Naslov dva</h1><p>Gde nestade naslov dva?</p></body></html>
![Page 11: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/11.jpg)
Primer skrivanja po id-ju<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){
$("button").click(function(){$("#test").hide();
});});</script></head><body><h2>This is a heading</h2><p>Paragraf 1.</p><p id="test"> Paragraf 2.</p><button>Klikni me!</button></body></html>
Šta će biti ako seumesto obojenog koda napiše:$("*").hide(); a štaza $(this).hide();?
![Page 12: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/12.jpg)
Primeri selekcija elemenata $(“*”) selektuje sve elemente $(“p.intro”) selektuje <p> elemente sa class=“intro” $(“ul li:first”) selektuje prvi <li> element prvog <ul>
elementa $(“ul li:first-child”) selektuje prvi <li> element
svakog <ul> elementa $(“[href]”) selektuje sve elemente sa href atributom $("a[target!='_blank']") selektuje sve <a> elementečija vrednost target atributa nije jednaka vrednosti „_blank“
$(":button) selektuje sve <button> elemente i <input>elemente čija je vrednost za type „button“
$("tr:even") selektuje sve parne <tr> elemente
![Page 13: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/13.jpg)
Ugnježdavanje Roditelj-dete:
$(“.image-holder > img“) selektuje sve img elemente koji su direktni potomci elementa koji imaju definisano class=“image-holder”
Višestruki $(“div,p,span“) omogućava selektovanje raznorodnih
elemenata (div, p, span)
Susedi (neposredni) $(“div+p“) selektuje sve <p> elemente koji su naredni u
odnosnu na odgovarajuće <div> elemente Susedi: $(“div ~ p”) selektuje sve <p> elemente koji su susedi
<div> elemenata
Kompleksni uslov (konjunkcija): sastavljeno a#id
div.image-holder
span[rel=‘explanation’]
![Page 14: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/14.jpg)
jQuery metode događaja
Događaj se okida npr. Događaj „click“ u momentu kada se pritisne taster.
Neki zajednički DOM događaji:
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
![Page 15: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/15.jpg)
Događaj click
Kod prikazuje pokretanje .click događaja. To je vrsta događaja kojim određujemo što će se
dogoditi s nekim elementom ukoliko mišem kliknemo na njega.
U primeru, klikom na prvu rečenicu učinili bi smo da druga nestane. Svakoj rečenici dodelimo jedinstveni ID, koji ćemo kasnije upotrebiti prilikom pisanja funkcije.
Događaj može biti: klik, doubleclick, hover, itd.
![Page 16: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/16.jpg)
jQuery sintaksa za metode događaja (dbl)click()
$("p").click(function(){// akcija!
});
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){
$("p").click(function(){ // $("p").dblclick(function(){$(this).hide();
});});</script></head><body><p>If you click on me, I will disappear.</p><p>Click me away!</p><p>Click me too!</p></body></html>
![Page 17: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/17.jpg)
Primer kontola (ni)je u fokusu
...<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){
$("input").focus(function(){$(this).css("background-color", "yellow");
});$("input").blur(function(){$(this).css("background-color", "green");
});});</script></head><body>Name: <input type="text" name="fullname"><br>Email: <input type="text" name="email"></body></html>
![Page 18: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/18.jpg)
Primer mouse(enter, out, over)
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){
$("#p1").mouseenter(function(){ //mouseover //mouseoutalert(„Ušli ste u paragraf p1!");
});});</script></head><body><p id="p1">Ulaz u paragraf.</p></body></html>
![Page 19: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/19.jpg)
JQuery efekti Efekti u jQuery-ju služe za povećanje dinamičnosti
stranice. Pomoću određenih efekata moguće je manipulisati
sadržajem stranice na način da određene elemente prikažemo ili sakrijemo, promenimo im veličinu, okrenemo ih i sl.
Skrivanje i prikazivanje HTML elemenata pomoću metoda hide() i show() ili toggle() koja skriva ili prikazuje element naizmenično.
Pojavljivanje i gubljenje elemenata različitim brzinama: fadeIn(), fadeOut(), fadeToggle().
Prikaz slajda slideDown(), slideUp(), slideToggle().
![Page 20: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/20.jpg)
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){
$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);
});});</script></head><body><p>Prikazuje metodu fadeToggle() sa različitim parameterima brzine.</p><button>Klikni me!</button><br><br><div id="div1" style="width:80px;height:80px;background-color:yellow;"></div><br><div id="div2" style="width:80px;height:80px;background-color:orange;"></div><br><div id="div3" style="width:80px;height:80px;background-color:red;"></div></body></html>
Primer fadeToggle() efekta
![Page 21: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/21.jpg)
Primer slideToggle() efekta
<!DOCTYPE html><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script> $(document).ready(function(){
$("#flip").click(function(){$("#panel").slideToggle("slow");
});});</script><style>#panel, #flip {
padding: 5px;
text-align: center;background-color: midnightblue;border: solid 1px lime;
color:lime;}#panel {
padding: 50px;display: none;
}</style></head><body><div id="flip">Klikni me!</div>
<div id="panel">Dobrodošli!</div></body></html>
![Page 22: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/22.jpg)
jQuery - get/set sadržaja i atributa
Tri jQuery metode za DOM manipulaciju su:text() – postavlja ili vraća tekst sadržaja
selektovanog elementa;html() - postavlja ili vraća tekst sadržaja
selektovanog elementa (uključujući HTML oznake);
val() - postavlja ili vraća vrednosti polja forme.
![Page 23: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/23.jpg)
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){
$("#btn1").click(function(){alert("Text: " + $("#test1").text());
});$("#btn2").click(function(){alert("HTML: " + $("#test1").html());
});$("#btn3").click(function(){alert("Value: " + $("#test2").val());
});});</script></head><body><p id="test1">Ovo je <b>paragraf</b>, a ispod je <i>polje forme</i>!</p><p>Ime: <input type="text" id="test2" value="Unesi ime"></p><button id="btn1">Show Text</button><button id="btn2">Show HTML</button><button id="btn3">Uneta vrednost</button></body></html>
Primer
![Page 24: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/24.jpg)
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){
$("#btn1").click(function(){$("#test1").text("Ovo je novi tekst 1. paragrafa!");
});$("#btn2").click(function(){$("#test2").html("<b>Ovo je novi tekst <i>2. paragrafa!</i></b>");
});$("#btn3").click(function(){$("#test3").val("Ekatarina");
});});</script></head><body><p id="test1">Ovo je 1. paragraf.</p><p id="test2">Ovo je 2. paragraf.</p><p>Ime: <input type="text" id="test3" value="Unesi ime"></p><button id="btn1">Novi tekst pasusa1</button><button id="btn2">Novi HTML pasusa2</button><button id="btn3">Nova vrednost polja</button></body></html>
Primer
![Page 25: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/25.jpg)
jQuery - get/set CSS klasa
Metode za CSS manipulaciju:addClass() – dodaje jednu ili više klasa
selektovanim elementima;removeClass() – uklanja jednu ili više klasa
selektovanim elementima;toggleClass() - dodaje/uklanja jednu ili više
klasa selektovanim elementima;css() – postavlja ili vraća stil atributa.
https://www.w3schools.com/jquery/jquery_css.asp
![Page 26: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/26.jpg)
Primer
<!DOCTYPE html><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){
$("button").click(function(){$("h1, h2,
p").toggleClass("blue");
$("div").toggleClass("important");});
});</script><style>
.important {font-weight: bold;font-size: xx-large;color:red;
}.blue {
color: darkblue;background:lightgray;
}</style></head><body><h1>Heading 1</h1><h2>Heading 2</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><div>This is some importanttext!</div><br><button>Dodaj/ukloni stil</button></body></html>
![Page 27: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/27.jpg)
Primer
<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function(){
$("button").click(function(){$("p").css({"background-color": "yellow", "font-size": "200%"});
});});</script></head><body><h2>This is a heading</h2><p style="background-color:#ff0000">This is a paragraph.</p><p style="background-color:#00ff00">This is a paragraph.</p><p style="background-color:#0000ff">This is a paragraph.</p><p>This is a paragraph.</p><button>Set multiple styles for p</button></body></html>
![Page 28: 12 JQuery.ppt - Compatibility Mode programiranje: Pristup html i css elementima Rukovanje browser događajima (click, dblclick, focus...) Lako dodavanje specijalnih efekata i animacija](https://reader030.vdocument.in/reader030/viewer/2022040115/5e61792957eb8217de0e8a25/html5/thumbnails/28.jpg)
AJAX AJAX = Asynchronous JavaScript and XML. AJAX omogućava učitavanje podataka u pozadini i
njegovo prikazivanje na veb stanici bez ponovnog učitavanja cele stranice.
Aplikacije koje koriste AJAX su: Gmail, Google Maps, Youtube, Facebook itd.
Uz pomoć jQuery AJAX metoda, može se zahtevati tekst, HTML, XML, ili JSON od udaljenog servera korišćenjem HTTP Get i HTTP Post – i ti eksterni podaci mogu se učitati direktno u selektovani HTML element veb stranice.
https://www.w3schools.com/jquery/jquery_ajax_load.asphttps://www.w3schools.com/jquery/jquery_ajax_get_post.asp