Napredno front-end programiranje

jQuery 2. dio
ŠKOLSKA 2021/2022 ODJELJENJE S4A
PROF. VLADIMIR
KOVAČ
 Metode jQuery-ja

 Postoji veoma veliki broj metoda

različitim koje
jQuerysubibliotekama
dostupne u

 Nemoguće je pobrojati sve metode, ali će se ovdje pokazati

njihova implementacija, upotreba i manipulacije, i to za
neke od najkorišćenijih

 Spisak svih jQuery biblioteka možete pogledati na url adresi

https://api.jquery.com/.
 Metode jQuery-ja

 Jedan od prvih metoda koja se uvode kod učenja jQuery-ja

je metod css()

 Ovaj metod se može koristiti za dvije stvari: čitanje nekog css svojstva
selektovanog elementa, ili njegovo setovanje.

var boja = $('#tabela1 tbody tr:even').css('color');

 Upromjenljivu boja će se dohvatiti vrijednost CSS

svojstva
color, tj. boja teksta u parnim redovima tabele.
 Metode jQuery-ja

 Isto svojstvo se može upotrijebiti za setovanje vrijednosti nekog

CSS svojstva. Tako na primjer ako se definiše

$('#tabela1 tbody tr:even').css('background-color','#e2e2e2');

 Svi parni redovi tabele će imati pozadinu sive boje, bez obzira kako je
ona inicijalno definisana u CSS fajlu

 Ovim se postiže jedan od najkorišćenijih efekata, tj. efekat

zebre.
 Metode jQuery-ja

 Ukoliko se želi definisati vrijednost većem broju svojstava, to

se pojedinačno može uraditi kao:

$('#tabela1 tbody tr:even').css('background-

color','#e2e2e2');
$('#tabela1 tbody tr:even').css('color',
'#cc0000);
 ili objedinjeno kao:
$('#celebs tbody tr:even').css(
{'background-color': ’#e2e2e2', 'color':
'#cc0000} );
 Metode jQuery-ja

 Kod objedinjavanja treba biti vrlo pažljiv jer je operator

dodjele vrijednosti : kao i u klasičnom CSS-u, dok je operator
za razdvajanje svojstava , .

 Kod upotrebe za samo jedno svojstvo karakter , se

koristi
između imena svojstva i njegove vrijednosti.
 Metode jQuery-ja

 Drugi način za promjenu CSS-a je upotreba

metoda
addClass().

 Ovim metodom se selektovanom elementu dodjeljuje

određena CSS klasa, koja je ranije napisana u CSS-u, i na
taj način pomenuti CSS djeluje na selektovani element.
 Metode jQuery-ja

Ako se u CSS fajlu nalazi:

.mojstil {font-style: bold; background-color: #CCC222;}

a u jQuery-ju se definiše:
$('#blok1').addClass('mojstil');

Na element sa id='#blok1' primijeniće se stil mojstil, i u ovom

slučaju promeniće se pozadinska boja.
 Metode jQuery-ja
 Na sličan način kao što se metodom addClass()
dodaje
klasa, pomoću metoda removeClass() se klasa uklanja.

$('#blok1').removeClass('mojstil');
 Pored promjene CSS-a jQuery ima i metode kojima se
neke od najčešćih akcija mogu uraditi direktno nekom od
metoda.

 Neki od tih metoda su i dva metoda, show() i hide()

 Metode jQuery-ja

 Ovi metodi služe za prikaz selektovanog elementa ili

njegovo sakrivanje, i inicijalno rade isti posao kao i CSS, ali
uz kraću sintaksu.

$('#dodatneInfo).hide();
$('# dodatneInfo).show();

 Pored toga što su kraće u sintaksi, primjenom ovih metoda

moguće je postići i dodatne efekte, koji su dalje definisani
kao argumenti metoda.
 Metode jQuery-ja

 Metode show() i hide() imaju mogućnost definisana brzine

njihove realizacije u browser-u. Ovo se postiže argumentima
"slow", "fast", ili definisanjem broja milisekundi.

$('#dodatneInfo).hide("fast");
$('#dodatneInfo).show(2000);
definisanja i drugog
 argumenta,
Ove metode
koji jenude
običnomogućnost
funkcija koja će se izvršiti nakon
što se izvrši metod u definisanom trajanju
$(selektor).show(speed, callback);
 Metode jQuery-ja

 Često korišćeni su i metodi text() i html() koji se mogu posmatrati kao

sinonimi za svojstva JavaScript-a textContent i innerHTML

 Metodom html() pored tekstualnog sadržaja može definisati i HTML kod

koji će se ispravno interpretirati u browser-u

 Metodom text() se može pročitati ili setovati tekstualni sadržaj

selektovanog elementa. Ukoliko se HTML kod definiše kroz metod text()
on će se prikazati kao običan tekst i neće se tumačiti kao kod.
 Metode jQuery-ja

Primjer:

$('#prvi').text(“<p>Hello world!</p>");
$('#drugi').html(“<p>Hello </b>world<b>!</p>");
 Metode jQuery-ja

 Veća grupa metoda je namjenjena za realizaciju

efekata
kretanja tj. promjena.

 Neka od njih su: fadeIn(), fadeOut(), fadeTo(),

fadeToggle(), slideDown(), slideUp(),
slideToggle()

 Svi ovi metodi se primjenjuju na isti način kao i svi drugi, i svakom
od njih se može kao argument definisati vrijeme trajanja njegove
animacije.
 Metode jQuery-ja

 Pored navedenih metoda, koji imaju unapred isprogramiran

način rada, vrlo popularan je i metod animate() koji
programeru daje mogućnost da sam definiše način
promjena i vrijeme za koje će se one desiti.

 Metod animate() ima dva argumenta:

 Prvi je krajnje stanje definisano CSS-pravilima

 Drugi je vrijeme za koje kod treba da iz početnog dođe u

to definisano krajnje stanje.
 Metode jQuery-ja

 Ako želimo da se u div sa id=“okvir” animira u trajanju od 3

sekunde, na način da mu se dodaju sva četiri padding-a, to
se može uraditi na sljedeći način:

$(document).ready( function()
{ $('#drugi').animate({ padding: '30px' },
3000); } );

 Kod primjene metoda animate, u prvom argumentu, može se

staviti proizvoljan broj CSS svojstava i njihovih vrednosti
koje želimo da kod nakon vremena animacije dostigne.
 Metode jQuery-ja

 Vrlo slično kao u JavaScript-u, jQuery ima veći broj metoda

kojima se selektovani element “umeće” u postojeću strukturu
stranice.
 Na taj način se u stranicu može dinamički i interaktivno
dodavati proizvoljno mnogo novog sadržaja.
 Najkorišćeniji metodi su: after(), append(),
appendTo(), before(), insertAfter(),
insertBefore(), prepend(), prependTo(), …
 Primeri metoda za umetanje sadržaja

<html><head><script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>
</script>
<script type="text/javascript">
$(document).ready(function(){
$('<p> Ovo je novi tekst 1 </p>').insertAfter('#prvi');
$('<p> Ovo je novi tekst 2 </p>').insertBefore('#prvi');
$('<p> Ovo je novi tekst 3 </p>').prependTo('#drugi'); });
</script></head>
<body>
<div id="prvi"> Dobar dan</div> <div id="drugi"> Dobar dan</div>
</body></html>
 Metode jQuery-ja

 Metod kojim se elementi mogu ukloniti iz strane je remove()

 Ovaj metod se može primijeniti na dva načina tj. bez

argumenata kada uklanja samo selektovani element, ili sa
argumentima kada je moguće ukloniti više elemenata po
nekom kriterijumu.
$('#dodatniOpis').remove();
$('p').remove(':contains("napad")');
 Metode jQuery-ja

 Metodi children() i parent() se koriste u situacijama kada u

odnosu na selektovani element želimo da pristupimo
njegovoj djeci elementima ili nadređenom roditeljskom
elementu.

 U jQuery-ju se može definisati klasična promjenljiva, kao u

dosadašnjim primjerima, pomoću var. Ukoliko je sadržaj
promjenljive “prosti tip podataka”, kao string, broj, boolean i
sl. koristi se sintaksa kao i u JavaScriptu.

var sadrzaj = $(“#prvi”).text();

 Metode jQuery-ja

 Međutim ako promjenljiva ukazuje na objekat DOM-a, koji u sebi može

imati manje ili više složenu strukturu, tada se ispred imena promjenjive
koristi prefiks $.

 Primjer HTML-a:
<div id="root">
<div>Prvi</div>
<div>Drugi</div>
<div>Treci</div>
</div>

 Svu djecu elemente koji se nalaze u selektujemo kao:

 Metode jQuery-ja

 Promjenljiva $djeca sada predstavlja složenu promjenljivu,

jer
ima više elemenata tj. objekata u sebi.

 Iz tog razloga nad njim se mogu dalje primijeniti svi ranije

opisani metodi i svojstva. Recimo prebrojavanje broja
selektovane djece:

alert("Broj djece elemenata je" + $deca.length);

 Metode jQuery-ja

 Tako ako i želimo da pristupimo svoj djeci elementima, bez

obzira koliko ih ima, potrebna je neka od petlji (npr. each())
kojom se prolazi kroz sve elemente, i u svakoj iteraciji
pristupa tekućem elementu ($(this)).

$(document).ready( function(){
var $deca = $('#root').children();
var sadrzaj=" ";
$
('#root').children().each( functio
n()
 Metode jQuery-ja

 Za „kretanje“ kroz DOM može se koristiti i metod next() kojim

se prelazi na naredni element u odnosu na tekući.

 Ako imamo div (id="slike") unutar koga se nalazi veći

broj slika, i od kojih jedna ima klasu (class="aktivna")

 Selektovanje one slike koja ima klasu aktivna je tada:

var trenutni = $('#slike .aktivna');

 dok je selekcija sljedeće slike:

var sledeci = trenutni.next()