jQuery Tutorial - MATKOSmatkos.in.rs/kurs/stvari/Jquerykurs.pdf · jQuery Selectors jQuery selektori vam dozvoljavaju da izaberete I manipulisete sa HTML element(ima). jQuery selektori

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.:

Google

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>


</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>



$(this).hide();

});

});

</script>

</head>

<body>


<p>Ajd opet !</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>


$("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>



$(".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>


$("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>Ajd opet !</p>


</body>

</html>

A na drugoj stranici

fje.js



$(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>


$("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>


$("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>



$("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>



$("#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);


$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

});

jQuery slideToggle() Method

slajdgoredole.html Spusta zavesu I dize

<!DOCTYPE html>

<html>

<head>


<script>


$("#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>



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>



$("#p1").css("color", "red")

.slideUp(2000)

.slideDown(2000);

});

});

</script>

</head>

<body>

<p id="p1">Lagano nestajem, topim se!!</p>

<button>Klikni</button>

</body>

</html>

jQuery Tutorial - MATKOSmatkos.in.rs/kurs/stvari/Jquerykurs.pdf · jQuery Selectors jQuery selektori vam dozvoljavaju da izaberete I manipulisete sa HTML element(ima). jQuery selektori

Documents