Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Začetki z jQuery
Avtor: PowerZan | Objavljeno: dne 3. januar 2013, 12:01
  V današnjem vodiču vam bom predstavil jQuery knjižnico, kjer je potrebno le osnovno znanje JavaScript-a, namenjena pa je lažjemu upravljanju z JavaScript kodo.
 
 
1
  
 

Najprej na namizju ustvarite mapo s poljubnim imenom. V tej mapi naredite podmapo, imenovano js.
 
 
2
  
 

Knjižnico prenesete z navigiranjem na ta spletni naslov in ko se vam prikaže stran s kodo, desno kliknete kamorkoli in označite Shrani kot, ter datoteko shranite v prej ustvarjeno js mapo, pri čemer ime datoteke pustite privzeto.
 
 
3
  
 

Zdaj, v mapi, ki ste jo ustvarili (v mojem primeru jQuery) ustvarite datoteko index.html, kamor kopirate naslednjo kodo:

 
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
 //Našo JavaScript kodo bomo dodali sem
</script>
</head>
<body>
 <!--  HTML kodo bomo dodali sem -->
</body>
</html>
 
 
4
  
 

Na začetku, boste naredili opozorilno okno, kjer bo pisalo Pozdravljen svet!.

Da to naredite, morate v polje za JavaScript dodati te vrstice:
 
$(document).ready(function() {
 
});
 
S tem omogočite izvajanje kode takrat, ko se DOM naloži (Document Object Model).
 
 
 
 
 
5
  
 

Če želite, da se opozorilno okno prikaže takrat, ko bo uporabnik kliknil na povezavo, za <body> značko vstavite tole vrstico:

 
<a href="">Povezava</a>
 
V funkcijo, ki ste jo dodajali v prejšnjem koraku pa dodate novo funkcijo:
 
$("a").click(function() {
alert("Pozdravljen svet!");
});
 
Ko bo uporabnik kliknil na povezavo, se mu bo prikazalo opozorilo s tekstom Pozdravljen svet!.
 
 
6
  
 

V tem primeru, se bo to opozorilo prikazalo ob kliku na katerokoli povezavo, saj je $("a") izbirnik, ki v tem primeru izbere vse a elemente.


$ po svoje predstavlja razred, kar pomeni, da $() izdela nov jQuery objekt.
 
click() funkcija je objekt v jQuery. Ta funkcija določa klikabilni dogodek za vse izbrane elemente (v našem primeru a elemente).
 
Ta koda je podobna tej:
 
<a href="" onclick="alert('Pozdravljen svet!')">Povezava</a>
 
 
7
  
 

Zdaj vam bom pokazal, kako se spreminja CSS stile s pomočjo jQuery.

Povezavo lahko odstranite, nato pa med značkama body dodajte naslednjo kodo:
 
<div id="seznam">
<ul>
<li>Prvo</li>
<li>Drugo</li>
</ul>
</div>
 
 
8
  
 

Zdaj med prvo fukcijo jQuery ($(document).ready) dodajte naslednjo kodo:

 
$("#seznam").css("background-color", "red");
 
Tukaj ste namesto a določili #seznam. # pomeni, da podajate ID nekega objekta.
 
.css pomeni, da boste prej določenemu objektu nastavili CSS stil.
 
V oklepajih najprej določite ime vrednosti (v mojem primeru barva ozadja), nato pa vrednost (barvo). Ime in vrednost ločite z vejico.
 
 
9
  
 

Če želite z jQuery dodajati elementom tekst, morate kodo med funkcijo $(document).ready spremeniti v sledeče:

 
$("#seznam").find("li").each(function(i) {
$(this).append( " To je " + i  + " vnos!" );
});
 
Tukaj ste spet določili ime objekta, nato ste pri .find() določili iskanje želenega elementa (li), ter z .each() določili, da naj se nekaj ponovi vsakemu (najdenemu) elementu.
 
V tem primeru .append() pomeni dodajanje nekega teksta vsakemu elementu.
 
 
 
Komentiraj
  
 
 
 
 
29.11.2016, 18:09
Dober članek.... vendarle bi rad prispeval par popravkov (katerih resnica ali neresnica je preverljiva na internetu, v literaturi ipd.), in sicer:

"$ po svoje predstavlja razred, kar pomeni, da $() izdela nov jQuery objekt."

jQuery je Javascript knjižnica. Javascript je objektni jezik, ki ne pozna razredov, le pojem objekta. Tukaj bi se dalo še kaj povedati, vendar to ni v kontekstu tega vodiča. Torej "$" ni razred, je le okrajšava za literal jQuery, ki predstavlja objekt, ne razred Vendarle pa je v naslednjem stavku lepo rečeno, da $() kreira objekt.

"click() funkcija je objekt v jQuery."

Izraz "funkcija je objekt" je kar se tiče pravilne rabe programerskih pojmov večja napaka. Avtor najbrž misli, da metoda click() vrne objekt, ki sproži dogodek. To je v jQuery-ju kar pogosto, zato, da lahko verižimo dogodke (to se pojavlja tudi predvsem pri animacijah tipa slideToggle(), hide()...)

Na primer: $("#gumb" ).click().slideDown("slow" ) bi najprej programsko sprožilo klik DOM objekta z ID-jem "gumb", nato pa bi le-ta animirano zdrsel navzdol.

Drugače pohvale avtorju, vsekakor je moj namen bil le dopolnitev vsebine.

Lep pozdrav.

spremenjeno: podtalje (2.12.2016, 1:13)
 
 
 
 
1.12.2016, 19:24
@ikov34 z izrazom "funkcija je objekt" ni prav nič narobe v javascript svetu, ker ima prav vse lastnsti, ki jih nosi sam objekt (kot instanca)
Nič nas ne ovira, da napišemo npr: function a(){ return 1; }; a.n = a; a.n.n.n.n();
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!
  
Zmaga.com na Facebooku | Pošljite nam e-pošto | Informacije o Zmaga.com