Upload
nguyencong
View
260
Download
0
Embed Size (px)
Citation preview
Jquery
jQuery Tutorial
jQuery je JavaScript Library.
jQuery ozbiljno uproscava JavaScript programiranje.
Example
Primerjq.html Kad se klikne na bilo koji red on nestane- ima ih 3
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Ako me kliknes, ja cu da nestanem.</p>
<p>Ajd opet !</p>
<p>Ajd klikni ako smes!</p>
</body>
</html>
jQuery uvod
Svrha jQuery je da ucini mnogo laksim upotrebu JavaScript na vasim web sajtovima.
Sta je jQuery?
jQuery je laka kategorija, "sa manje pisanja, vise se uradi", JavaScript biblioteka.
jQuery takodje uproscava dosta komplikovanih stvari iz JavaScript, kao AJAX i mipulisanje sa
DOM.
jQuery biblioteka sadrzi sledece karakteristike:
HTML/DOM rukovanje
CSS manipulacija
HTML dogadjaj method
Efekti I animacije
AJAX
I druge korisne stvari
Savet: jQuery ima plugins za skoro sve gore pobrojane stvari.
Zasto jQuery?
Ima mnogo drugih JavaScript frameworkova, ali jQuery izgleda da je najpopularniji I
najrasireniji.
Mnoge od najvecih Web kompanija koriste jQuery, npr.:
Microsoft
IBM
Netflix
jQuery funkcionise na svim browsers?
Dodavanje jQuery na Web strane
Ima vise nacina za koriscenje jQuery na vasem web site. Vi mozete da:
Downloadujete jQuery library sa sajta jQuery.com
Include jQuery sa CDN, kao npr. Google
Downloading jQuery
Postoje dve verzije jQuery dostupne za downloading:
Production version
Development version -
jQuery library je jedan red JavaScript file, HTML <script> tag (<script> I treba da bude
smesten u <head> section):
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
Savet: Downloadovan fajl smestite na isto mesto gde I stranicu.
jQuery CDN
I Google i Microsoft hostuju jQuery.
Da biste koristili jQuery sa Google ili Microsoft, koristite sledeci kod:
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
jQuery Syntax
Sa jQuery birate (query) HTML element i vrsite "akcije" nad njim.
jQuery Syntax
Bazna sintaksa je: $(selector).action()
Jedan $ znak za definisanje/pristup jQuery
jedan (selector) za "upit (odnosno nalazenje)" HTML elemenata
Jedna jQuery akcija() koja obradjuje HTML element(e)
Primeri:
$(this).hide() –skriva tekuci element.
$("p").hide() – skriva sve<p> elemente.
$(".test").hide() – skriva sve elemente class="test".
$("#test").hide() – skriva samo element koji ima id="test".
CSS selectors?
CSS Atribute Selektori
Style HTML Elemenata sa specificnim atributima
Moguce je da se stilizuju HTML elementi koji imaju specificne attributee ili vrednosti atributa.
CSS [atribut] selector
[atribut] selektor se koristi da bi se selektovali elementi sa specificnim atributima.
U narednom primeru se selektuju svi <a> elementi sa a target atributom:
Primer
a[target] {
background-color: yellow;
}
ameta.html Svim elementima koji imaju linkove sa TARGET-om boji pozadinu u crveno
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: red;
}
</style>
</head>
<body>
<p>Linkovi sa target atributom imaju pozadinu crvene boje:</p>
<a href="http://matkos.in.rs/">MATKOS</a>
<a href="http://polarprof-001-site1.smarterasp.net/geometriagon/default.asp"
target="_blank">Geometriagon</a>
<a href="http://www.berger.webuda.com/" target="_top">Bergerove tablice</a>
</body>
</html>
CSS [atribut="vrednost"] selektor
[attribute="vrednost"] selektor se koristi da selektuje samo one attribute koji imaju
odredjenu vrenost.
U narednom primeru selektovace se samo oni <a> elementi koji imaju atribut target="_blank"
vrednost:
ametavrednost.html Svim linkovima koji imaju target=_blank menja pozadinu u žuto
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
background-color:yellow;
}
</style>
</head>
<body>
<p>Linkovi sa target="_blank" atributom imaju pozadinu zute boje:</p>
<a href="http://matkos.in.rs/">MATKOS</a>
<a href="http://polarprof-001-site1.smarterasp.net/geometriagon/default.asp"
target="_blank">Geometriagon</a>
<a href="http://www.berger.webuda.com/" target="_top">Bergerove tablice</a>
</body>
</html>
Styling Formi
Selektor moze biti koristan kod stilizovanja forme a da se ne upotrebi ID ili class:
Stilforma.html <!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type=button] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
Ime:<input type="text" name="Name" value="Zorica" size="20">
Prezime:<input type="text" name="Name" value="Jelic" size="20">
<input type="button" value="To je top">
</form>
</body>
</html>
Document Ready dogadjaj $(document).ready(function(){
// jQuery methods go here...
});
Ovo sprecava da jQuery code odradi nesto pre nego sto je ceo document ucitan.
Ima I kraca verzija
$(function(){
// jQuery methods ide ovde...
});
Isto je.
jQuery Selectors
jQuery selektori su jedna od najvaznijih delova jQuery library.
jQuery Selectors
jQuery selektori vam dozvoljavaju da izaberete I manipulisete sa HTML element(ima).
jQuery selektori se koriste da "nadju" (ili odvoje) HTML elemente na snovu njihovog id,
classes, types, atributa, vrednosti atributas i jos mnogo vise od toga. To je bazirano na vec
postojecim CSS Selectors, I kao dodatak, oni mogu da imaju I neke posebne selektore.
Svi slektori u jQuery startuju sa znakom za dolar I zagradama: $().
Element Selector
jQuery element selector bira elemente na osnovu imena elemenata.
Mozete da selektujete sve <p> elemente na jednoj strain ovako:
$("p") Nalazi sve p-elemente I kad se klikne na neki od njih taj nestane
Jquery.html
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jque
ry.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Ako me kliknes, ja cu da nestanem.</p>
<p>Ajd opet !</p>
<p>Ajd klikni ako smes!</p>
</body>
</html>
#id Selektor
$("#test") Nalzi one elemente koji imaju ID test I kad se klikne na njih sakrije ih.
Pritisni.html
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script
>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>Naslov veliki</h2>
<p>Ovaj paragraf nema ID.</p>
<p id="test">Ovaj paragraf ima ID i kad se pritisne dugme on nestane.</p>
<button>pritisni</button>
</body>
</html>
.class Selector
$(".test") Nalazi sve elemente klase test I kad se klikne na njih oni nestaju.
Pritisniklasu.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">Ovo je naslov sa klasom</h2>
<p class="test">ovo je paragraf sa klasom.</p>
<p>Ovo je paragraf bez klase.</p>
<button>pritisni me</button>
</body>
</html>
Primeri za jQuery Selectore Syntax Objasnjenje
$("*") Selektuje sve elemente
$(this) Selektuje tekuci HTML element
$("p.intro") Selektuje sve elemente p <p> klase intro: class="intro"
$("p:first") Selektuje samo prvi <p> element
$("ul li:first") Selects samo prvi <li> element prve liste <ul>
$("ul li:first-child") Selects samo prvi <li> element svake liste <ul>
$("[href]") Selektuje sve elemente koji imaju href
$("a[target='_blank']") Selektuje sve <a> elemente koji imaju target atribut cija je
vrednost "_blank"
$("a[target!='_blank']") Selektuje sve <a> elemente koji imaju target atribut cija
vrednost nije "_blank"
$(":button") Selektuje sva dugmeta <button> i <input> element ciji je
type="button"
$("tr:even") Selektuje sve parne <tr> elemente
$("tr:odd") Selektuje sve neparne <tr> elemente
Primer
Parnijq.html Primer za selektovanje parnih elemenata i za tabele uopste
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Polaznici kursa</h1>
<table border="1">
<tr>
<th>Ime</th>
<th>Prezime</th>
</tr>
<tr>
<td>Bojan</td>
<td>Rankovic</td>
</tr>
<tr>
<td>Branislav</td>
<td>Nikic</td>
</tr>
<tr>
<td>Zarko</td>
<td>Ne znam</td>
</tr>
</table>
</body>
</html>
Funkcije mozete da stavite u odvojenom fajlu
Ako vam je lakes I imate dosta funkcija odvojite ih u posebnom fajlu I linkujte.
Primer
Odvojenefje.html Funkcije odvojene na posebnom listu
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="fje.js"></script>
</head>
<body>
<p>Ako me kliknes, ja cu da nestanem.</p>
<p>Ajd opet !</p>
<p>Ajd klikni ako smes!</p>
</body>
</html>
A na drugoj stranici
fje.js
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
jQuery Event Methods
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Primer
Blurjemagla.html Zamagljuje polja u formi
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Unesi<br>
Ime: <input type="text" name="fullname"><br>
Prezime: <input type="text" name="email">
</body>
</html>
on() Method
on() method moze da napadne vise nacina, tj. Sa vise dogadjaja jedan ili vise elemenata.
Primer
Visenapada.html Kad si na meni, kad odlazis i kad me pritiskas ja se menjam.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script
>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Kad si na meni, kad odlazis i kad me pritiskas ja se menjam.</p>
</body>
</html>
jQuery Efekti
Hide, Show, Toggle, Slide, Fade, i Animate. WOW!
jQuery toggle()
sakrijprikazi.html Prikaze I sakrije kad se klikne
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Prekidac</button>
<p>Voli me</p>
<p>ne voli me.</p>
</body>
</html>
Syntax:
$(selector).toggle(speed,callback);
Neobavezni element speed parameter moze da uzme sledece vrednosti: "slow", "fast", ili
milliseconds.
Neobavezni callback parameter je funkcija koja ce da se izvrsi posle toggle() kompletiranja.
fadeIn() fadeOut() fadeToggle()
fadeTo()
jQuery fadeOut() Method
Syntax:
$(selector).fadeOut(speed,callback);
jQuery fadeToggle() Method
semafori.html Kad se klikne upale se svetla na semaforu/ugase se
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Pokazuje fadeToggle() razlicitih brzina.</p>
<button>semafor upaljen/ugasen</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:yellow;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:green;"></div>
</body>
</html>
Syntax:
$(selector).fadeToggle(speed,callback);
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery slideToggle() Method
slajdgoredole.html Spusta zavesu I dize
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/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: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Klikni da se spusti i podigne zavesa</div>
<div id="panel">Dobro došli!</div>
</body>
</html>
jQuery Efekti - Animacije
Animajq.html Krece se I povecava istovremeno
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
});
</script>
</head>
<body>
<button>Da li me voliš?</button>
<p>Po difoltu, svi HTML elementi imaju static position,I ne mogu da se muvaju . Da bi ste manipulisali sa
pozicijama, prvo morate da postavite u CSS position property odgovarajućeg elementa na relative,
fixed, ili absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">Volim te</div>
</body>
</html>
jQuery - Povodac
odemivratimse.html Polako odlazi I nestaje pa se vrati
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">Lagano nestajem, topim se!!</p>
<button>Klikni</button>
</body>
</html>