jQuery alapok 2
Ez a bejegyzés a lehető legszájbarágósabb módon próbál végigvezetni a jQuery használatának első lépésein. A végén lehetőség van a cikkben leírt dolgokat egy működő példában letölteni, így talán megérteni is könnyebb lesz.
Hogyan kezdjük?
Először is tanulmányozzuk át a jQuery oldalát a http://jquery.com/ címen. Ha nem rendelkeztek megfelelő angol tudéssal, akkor a továbbiakban ennek a cikksorozatnak a folytatásaira kell hagyatkoznotok.
A projekt mappa szerkezete a következő képpen nézzen ki az egyszerűség kedvéért:
www/
js/
jquery-1.4.2.min.js
css/
style.css
index.php
Első lépésként töltsük le a legfrissebb jQuery könyvtárat a http://code.jquery.com/jquery-1.4.2.min.js címről, és mentsük el a js mappába, ahogy az fent is látható, majd az index.php <head> részébe illesszük be a következő két sort:
1. 2. | <link href="css/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> |
Elsővel egy stílus fájlt töltünk be, ezt nagyon nem fogom részletezni itt, aki nem tudja miről van szó, annak röviden elmagyarázom miután létrehoztuk a következő elemeket az index.php <body> részben:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. | <div id="kulso_div"> <div id="belso_div1"> A Biblia szerint az Isten a nőt teremtette utoljára - a fáradtság jelei jól láthatók. </div> <div id="belso_div2" style="border:1px solid #666;margin:10px;padding:10px;"> Két olyan időszak van, amikor a férfi nem érti a nőt: a házasság előtt és a házasság után. </div> </div> <div class="kulso_div"> <div class="belso_div"> Az agglegény az a férfi, aki egyszer sem követi el ugyanazt a hibát. </div> <div class="belso_div"> Az elmegyógyintézetekben több a férfi, mint a nő. Látszik, ki őrjít meg kit... </div> </div> <div class="kulso_div" id="kulso_div3"> <div class="belso_div"> <a id="link" href="http://67developer.hu/kepek/ich.jpg" target="_blank">Gondolkodom, tehát nőtlen vagyok.</a> </div> <div class="belso_div"> <img alt="Ratting Gergely" src="http://67developer.hu/kepek/thx.jpg" /> </div> </div> |
CSS
Tényleg nem szeretnék nagyon belemélyedni, csak röviden: A CSS arra szolgál, hogy ne a “belso_div2″-höz hasonló módon a php fájlban adjuk meg a formázást, hanem egy külső helyen. Hogy miért jó ez? Egyrészt átláthatóbb lesz az itteni kód, másrészt létrehozhatunk osztályokat, amiket több elemhez is hozzákapcsolhatunk. A példa kedvéért, ha a style.css fájlban található következő kódrészlet:
1. 2. 3. 4. | .no{ color:red; font-weight:bold; } |
Ennek segítségével az összes olyan elem amit felruházok a class=”no” tulajdonsággal, kövéren fog megjelenni a sátán színeiben, és nem kell az összes helyre beszúrnom hogy style=”color:red;font-weight:bold;”.
Elemek azonosítása
Hogyan mondhatjuk el a programunknak, hogy melyik elemeken végezzen el egy adott műveletet? Valamilyen módon neveket kell adnunk neki, hogy egyértelmű legyen mire gondolunk. Mondhatjuk azt, hogy szeretnmém ha a <div>-ek kék háttérrrel pompáznának az oldalon, de nem tudom megmondani, hogy például a “Gondolkodom tehát nőtlen vagyok” bölcsességet tartalmaző div háttere legyen csak ilyen.
Erre találták ki az id-t. Jelentése identification, azaz azonosító, és mint láthatjátok az én példa kódomban is van ilyen: “kulso_div”, “belso_div1″ és “belso_div2″. Ennek segítségével egyértelműen tudok rájuk hivatkozni, amiből következik az is, hogy nem adhatom a kulso_div-et egy másik elem id-jeként meg.
Ez jó nekünk mert így formázást adhatunk az elemekhez egy külső CSS fájlban, vagy a jQuery segítségével is tudjuk módosítani például a tartalmát. Az egyetlen gond vele az, hogy nem tudjuk megmondani, hogy az összes belso_div-nek adjon kék hátteret./Persze meg lehet csniálni nagyon egyszerűen, csak hogy a class lényegét könnyeb legyen most megérteni/ Ezért kitalálták ősapáink, hogy az elemeket osztályokba tudjuk csoportosítani.
Ugye azt monndtam, hogy minden id egyeddi kell hogy legyen, nos az osztállyoknál ez nnem igaz. Ha az alsó két naagy divben lévő diveket ellátjuk a class=”belso” tulajdonsággal, akkor innentől kezdve ha hivatkozunk erre az osztályra, minden elemet elérünk ami rendelkezik ezzel, és nem kell egyenként az összes azonosítóját beirogatni.
Első sorok
Hozzunk létre egy új javascript fájlt, én hű maradtam a 67-hez és 67.js néven, a js mappába tettem, majd a <head> részben, a jquery behívása után behívtam ezt a fájlt is:
1. | <script type="text/javascript" src="js/67.js"></script> |
Itt az elején fontos megérteni, hogy ahhoz hogy a 67.js fájlunkban használni tudjuk a jQuery által nyújtott nyalánkságokat, mindenképpen csak azután szabad rá hivatkoznunk, hogy az már betöltődött. Így általában mindig a css fájlok után egyből a jQuery-t töltöm be, és csak utána a maradékot.
Akkor csapjunk a lovak közé! Először azt szeretném, ha sikerülne átlátni hogyan működik az egyes elemek kijelölése. Ennek szemléltetésében a következő kód lesz a segítségünkre:
1. 2. 3. | $(document).ready(function(){ $('span').css('background-color','gray'); }) |
Akkor lássuk hogyan működik a dolog. Először nézzük a $(‘span’) részt. A $() jel a jQuery() függvény rövidítése, amit nagyon sokszor fogunk majd használni, lényegében arra szolgál, hogy a paramérben átadott feltételeknek megfelelő elemeket adja vissza az oldalunkról. Milyen feltételek lehetnek ezek?
- Elemre kereshetünk a fajtája alapján: $(‘span’) vagy $(‘div’) vagy $(‘h2′)
- Visszakérhetjük azokat az elemeket amelyek rendelkeznek egy edott osztállyal. A példa kódban lévő class=”belso_link” elemeket a $(‘.belso_link’) adja vissza
- Egy konkrét elemet kapunk vissza ha az id-jére hivatkozunk: $(‘#belso_div1′)
Ezek az alapok, amiket később lehet kombinálni. Ha a $(‘.belso_div’) parancsot adjuk ki, akkor eredményül 4 elemet kapunk vissza, mégpedig az alsó két külső divben lévő belső diveket. Ha viszont azt írjuk hogy $(‘#kulso_div3 .belso_div’) , akkor a csak a 3. külső divben lévő belső diveket kapjuk vissza. A demóban majd jól láthatóak lesznek ezek, ne ijedj meg ha nem érted elsőre.
Eddig ugye mindig azt mondtam, hogy elemeket kapunk vissza. Mit is jelent ez? Ha visszakapunk egy elemet, vagy akár többet, akkor azokon műveleteket végezhetünk. Egy $(‘.belso_div’) parancs egy tömbbel tér vissza, melynek elemein műveleteket végezhetünk a következő képpen:
1. | $('belso_div').css('background-color','gray'); |
Azt mondjuk, hogy a $(‘belso_div’) által visszaadott elemeken végezze el a css(‘background-color’,'gray’); műveletet. Ez annyit tesz, hogy az adott elem háttér színét megváltoztatja szürkére. Első paraméterbe mindig a css tulajdonság nevét írjuk, másodikba pedig az értéket amire változtatni szeretnénk.
Hasonló parancs még a .attr(), ami az elemtöbbi tulajdonságát változtatja, pl ha egy kép címét szeretnénk módosítani, akkor azt a következő kóddal tehetjük meg:
1. | $('#kep_id').attr('title','Új cím'); |
Amennyiben az attr() és css() parancsoknak csak az első paraméterét adjuk meg, úgy lekérdezhetjük az éppen aktuális értékét az adott tulajdonságnak. Milyen url-re mutat a 3. külső divben lévő id=”link” azonosítójú link:
1. 2. | $('#link').attr('link'); // http://67developer.hu/kepek/ich.jpg |
Az utolsó dolog ami magyarázatra szorul az a
1. 2. 3. | $(document).ready(function(){ //vmi kód }) |
Ez arra jó, hogy a benne lévő kódot csak azután futtassa le, hogy az oldal teljesen betöltődött. Ha az oldal header részében meghivnánk egy $(‘.belso_div’).css(‘width’,’2000px’); függvényt, semmi nem történne, ugyanis azok az elemek még nem jöttek létre. Ezért vagy az oldalunk végére tesszük a javascript kódokat, vagy pedig ennek a függvénynek a segítségével megmondjuk, hogy csak akkor fusson le, ha már minden betöltődött.
Összegzés
Mivel most kezdem csak a cikkek írását, nézzétek el nekem ha nem egyértelmű minden, és kérdezzetek bátran a kommentekbe, igyekszek válaszolni mindenre. Nézzétek meg a példátt:
