NAZIV OBJEKTA ZNANJA Uvod u JQuery PROLOG Autor * Katarina Kaplarski Klasifikacija * Težina * Osnovni nivo Ključne reči * Ko sluša * Student OAS Trajanje * Komentari autora SADRŽAJ Apstrakt Cilj * Uvodne napomene Naziv sekcije (1) jquery uvod Sadržaj sekcije (1)
Instaliranje jqueryja jquery je jedan.js (JavaScript) fajl i veoma ga je lako download-ovati i instalirati u bilo koju web aplikaciju. Daunlodujte poslednju verziju jquery-a sa njegovog zvaničnog sajta: http://jquery.com/. Izjava koja louduje jquery biblioteku je napisana na glavnom tagu HTLM fajla i ona glasi: <script src="latest_version_jq.js" type="text/javascript"></script> <head> <script src="jquery-1.10.2.min.js"></script> </head> Fajl staviti u isti folder sa stranicama koje će ga koristiti. Alternativa je pozivanje sa CDN (Content Delivery Network) sa googla i microsofta. Prednost je što su korisnici već posetili neki sajt koji koristi googleovu ili microsoftov CND pa je jquery keširan (cashe) tako da je vreme učitavanja stranice kraće. Google CND <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head> Microsoft CND <head> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"> </script> </head>
jquery sintaksa jquery sintaksa je posebno napravljena da odabere HTLM elemente i da na njima izvrši neku radnju. Osnovna sintaksa je: $(selector).action() $ definiše jquery (selector) da nađe ( query - naći) HTLM ili CSS elemente action( ) jquery akcija koja će se izvršiti nad elementom Odabir čvorova (nodova) u DOM-u Želite da koristite jquery da biste pristupili elementima u (Document Object Model DOM) da biste mogli da manipulišete njima. Rešenje jquery koristi CSS i Xpath selektore da bi pristupio elementima u DOM-u. Kada se neki selektor primeni da bi se pristupilo elementima u DOM-u, elementi se vraćaju u obliku jquery objekata. Kada koriste neki selektor, bilo CSS ili Xpath, da biste pristupili elementima u DOM-u, upotrebljavajte funkciju $(). Tipičan JavaScript fajl koji selektuje paragraf pomoću jquery izgleda ovako: Na primer: $(document).ready(function() { $('p').addclass('highlight');
*.addclass/opis: (Akcija) Dodaje specifične klase svakom setu uparenih elemenata. još primera: $(this).hide() sakriva odabrani element. $("p").hide() sakriva sve <p> elemente. $(".test").hide() sakriva sve klase sa class="test". $("#test").hide() sakriva element sa id="test". napomena slova se pišu sa navodnicima duplim ili jednostrukim " ili ' Kako funkcioniše Funkcija $() se koristi za selektovanje nekog dela dokumenta. Prihvata bilo koji CSS izraz i nula ili više DOM nodova. Ona vraća sve uparene elemente, omogućavajući nam da manipulišemo njenim izgledom. Evo nekoliko primera: $('p') Pristupa svim elementima paragrafa u HTLM fajlu $('div') Pristupa svim div elementima u HTML fajlu $('#A') Pristupa svim HTLM elementima koji imaju id=a $('.b') Pristupa svim HTML elementima sa klasom class=b Tako da u našem primeru selektujemo sve elemente paragrafa, i na njima pozivamo addclass() metod. Ovo će primeniti CSS klasu highlight (podebljano) na sve paragrafe u dokumentu $(document).ready(function() { $('p').addclass('highlight');
Odlaganje sprovođenja JavaScript-a Fajl JavaScript, referenciran u glavnom (head) delu HTML fajla, biće sproveden čim pretraživač pronađe red skripta, ali ne postoje HTML elementi na koje bismo primenili ove stilove (iz razloga što je JavaScript fajl referenciran u head delu, dok su HTML elementi u body delu koji još nije učitan). Tako da moramo odložiti sprovođenje JavaScript koda dok se DOM ne učita. Rešenje Metod koji nas informiše kada je DOM spreman je $(document).ready(). Ovaj metod sprovodi poziv funkcije (napisan kao svoj argument), kada je DOM spreman DOCUMENT READY EVENT $(document).ready(function(){ // jquery metod... Ovo služi da spreči jquery da počne pre nego što se dokument učita (is ready) Dobra praksa je da se dokument učita i bude spreman pre nego što počne da se radi na njemu. Ovo takođe dozvoljava da imate JS kod pre bodyja dokumenta u head sekciji. Evo primera akcija koje mogu da budu neuspešne ako se pokrenu pre učitavanja dokumenta: - Pokušate da sakrijete element koji još uvek nije kreiran - Pokušate da dobijete veličinu slike koja još nije učitana Kraća verzija document ready koda: $(function(){ // jquery metod...
na primer $(document).ready(function() { $('p').addclass('highlight'); Kako funkcioniše Koristimo function kao ključnu reč (bez konkretnog imena funkcije) i definišemo body funkciju, koja će se koristiti kada se DOM učita. Body funkcija se koristi kao argument metoda jer želimo da se funkcija odmah sprovede, ali samo jednom. Ne želimo opet da je koristimo. Drugim rečima, $(document).ready() registruje događaj koji je spreman za dokument. Selektor $('p'), iz predhodnog rešenja, pristupa elementima HTML fajla, a na tim istim elementima će addclass() metod primeniti određene CSS klase. Naziv sekcije (2,...n) Sadržaj sekcije (2,...n) LINKOVI SA SLIČNIM SADRŽAJEM Opis URL http://www.w3schools.com/jquery/jquery_install.asp REČNIK POJMOVA I SKRAĆENICA Termin Opis
PODOBJEKTI ZNANJA (slučajevi korišćenja, procedure korak po korak, reference, itd.) Naslov podobjekta znanja Sadržaj podobjekta znanja OSTALI PREDLOŽENI SADRŽAJ OD STRANE AUTORA Naslov Sadržaj