Felhasználói eszközök
oktatas:web:jquery:jquery_keretrendszer
Különbségek
A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
| Előző változat mindkét oldalon Előző változat | |||
|
oktatas:web:jquery:jquery_keretrendszer [2021/02/11 20:33] admin eltávolítva |
— (aktuális) | ||
|---|---|---|---|
| Sor 1: | Sor 1: | ||
| - | [[oktatas:web:jquery|< jQuery]] | ||
| - | |||
| - | ====== jQuery ====== | ||
| - | |||
| - | * **Szerző:** Sallai András | ||
| - | * Copyright (c) Sallai András, 2012, 2013, 2014, 2016 | ||
| - | * Licenc: GNU Free Documentation License 1.3 | ||
| - | * Web: http://szit.hu | ||
| - | |||
| - | |||
| - | <html> | ||
| - | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> | ||
| - | </html> | ||
| - | |||
| - | ===== Bevezetés ===== | ||
| - | |||
| - | ==== Mi a jQuery? ==== | ||
| - | |||
| - | |||
| - | A jQuery egy JavaScript keretrendszer, amelyet John Resig kezdett | ||
| - | fejleszteni. Első kiadása 2006-ban volt. Licencét tekintve | ||
| - | nyílt forráskódú, kettős licenccel: GPL/MIT; | ||
| - | |||
| - | Nagyon elterjedtnek tekinthető, segítségével könnyen bejárható egy | ||
| - | HTML oldal DOM-ja. Effekteket és animációt adhatunk HTML elemeinkhez. | ||
| - | Számtalan plugint írtak hozzá. | ||
| - | |||
| - | |||
| - | ==== Használat ==== | ||
| - | |||
| - | Vagy letöltjük, vagy hivatkozunk a weboldalon található URL-re. | ||
| - | * http://jquery.com (A jQuery honlapja) | ||
| - | * http://jquery.org (A jQuery alapítvány honlapja) | ||
| - | |||
| - | |||
| - | A jQuery a weboldalán mindig biztosít egy linket, amelyen keresztül elérhető az aktuális stabil verzió. | ||
| - | A verziószám a linkben mindig nő. Ha tehát ezt a linket használjuk és újabb verzióra akarunk váltani, | ||
| - | változtatni kell a linkünkön. | ||
| - | |||
| - | A jQuery weboldaláról persze le is tölthetjük a keretrendszert, amelyet a saját webhelyünkön elhelyezhetünk. | ||
| - | |||
| - | A jQuery mivel JavaScript, ezért a script elemmel kell meghívni. A script elem nyitó tagben megadhuk | ||
| - | egy src attribútumban, hogy található a jquery állományunk. | ||
| - | |||
| - | <code html index.html> | ||
| - | <!doctype html> | ||
| - | <html> | ||
| - | <head> | ||
| - | <meta charset="utf-8"> | ||
| - | <title>Első jQuery alap weblapom</title> | ||
| - | |||
| - | <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | ||
| - | <script> | ||
| - | //jQuery utasításaink | ||
| - | </script> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | | ||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | A script elem a weboldalon bárhol elhelyezhető. Van aki a weboldal | ||
| - | végén szereti látni. Ha weboldal végére tesszük, akkor csak az oldal letöltődése után | ||
| - | hajtódik végre a jQuery. Ha nem ide tesszük, akkor külön gondoskodnunk kell az oldal | ||
| - | betöltődésének figyeléséről, adott esetben. A saját jQuery hívásainkat a jQuery | ||
| - | állomány meghívása után újabb script elemek közé tehetjük. | ||
| - | |||
| - | |||
| - | <code html index.html> | ||
| - | <!doctype html> | ||
| - | <html> | ||
| - | <head> | ||
| - | <meta charset="utf-8"> | ||
| - | <title>Első jQuery alap weblapom</title> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <!-- Ide jönnek a weboldal elemei --> | ||
| - | |||
| - | <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | ||
| - | <script> | ||
| - | //jQuery utasításaink | ||
| - | </script> | ||
| - | |||
| - | | ||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | ==== A JavaScript és a jQuery ==== | ||
| - | |||
| - | Jó kérdés lehet, hogy miért jó számunkra a jQuery. | ||
| - | |||
| - | A következő példákban összehasonlítjuk egy szimpla JavaScript és egy jQuery megoldást. | ||
| - | Egy "p" elem tartalmát szeretnénk megváltoztatni. | ||
| - | |||
| - | JavaScript megoldás: | ||
| - | <code javascript> | ||
| - | document.getElementsByTagName("p")[0].innerHTML = "Új tartalom"; | ||
| - | </code> | ||
| - | |||
| - | |||
| - | jQuery megoldás: | ||
| - | <code javascript> | ||
| - | $("p").html("Új tartalom"); | ||
| - | </code> | ||
| - | |||
| - | A jQuery jóval egyszerűbb. A jQuery filozófiája: "írjunk kevesebbet, csináljunk többet". | ||
| - | |||
| - | |||
| - | |||
| - | ==== Fejlesztő eszközök ==== | ||
| - | |||
| - | A fejlesztéshez szükségünk lesz egy szövegszerkesztőre és valamilyen népszerű böngészőre, | ||
| - | például Chrome vagy Firefox. Használjuk a mindkét böngésző fejlesztő eszközeit. | ||
| - | A Chromeban bekapcsolható a F12-vel, de a Firefoxban is telepíthetünk egy Firebug | ||
| - | nevű plugint, amely szintén a fejlesztést segíti. | ||
| - | |||
| - | |||
| - | |||
| - | ===== Szelektorok ===== | ||
| - | |||
| - | ==== DOM ==== | ||
| - | |||
| - | A JavaScript és a jQuery használatához is fontos ismernünk a DOM fogalmát. | ||
| - | A DOM a Document Object Model szavakból alkotott betűszó. Dokumentum objektum | ||
| - | modellnek fordítható. A HTML esetén a DOM a dokumentum szerkezetét meghatározó | ||
| - | elemek, mint html, head, body, h1, p, ul, li stb. A HTML DOM egy hierarchikus | ||
| - | faszerkezetben ábrázolható. | ||
| - | |||
| - | {{:oktatas:web:html:html_dom_pelda01.png|}} | ||
| - | |||
| - | ==== A jQuery() függvény ==== | ||
| - | |||
| - | |||
| - | A jQuery használatához a jQuery() függvényt mindig meg kell meghívni. | ||
| - | |||
| - | jQuery() | ||
| - | |||
| - | Ennek egyszerűbb változata a "$". Vagyis így hívjuk a függvényt: | ||
| - | $() | ||
| - | |||
| - | Így rövidebben tudjuk meghívni a jQueryt. | ||
| - | |||
| - | ==== Szelektorhasználat ==== | ||
| - | |||
| - | A jQuery használata során mindig ki kell választanunk melyik HTML elemre fog vonatkozni az | ||
| - | adott tevékenység. | ||
| - | |||
| - | |||
| - | A függvénynek megadhatunk egy karaktersorozatot, vagy néhány előre definiált | ||
| - | objektumot: | ||
| - | * "#azonosító" | ||
| - | * ".osztály" | ||
| - | * this | ||
| - | * document | ||
| - | * "elem" | ||
| - | * "elem[tulajdonság=érték]" | ||
| - | |||
| - | A paraméter mondja meg, mire vonatkozzon a beállítás. | ||
| - | A CSS-hez hasonlóan használhatjuk azonosítóra és osztályra, | ||
| - | kettős-kereszt vagy pont karakter segítségével. | ||
| - | Használhatjuk elemekre is, vagy azok tulajdonságaira. | ||
| - | |||
| - | A példa kedvéért legyen egy weblapon a következő div: | ||
| - | |||
| - | <code> | ||
| - | <div id="elso"> | ||
| - | |||
| - | </div> | ||
| - | </code> | ||
| - | |||
| - | A div-re így hivatkozhatunk: | ||
| - | jQuery("#elso"); | ||
| - | vagy | ||
| - | $("#elso"); | ||
| - | |||
| - | A jQuery() vagy $() önálló objektum orientált objektumként viselkedik, ami | ||
| - | számunkra annyit jelent, hogy végrehajthatók rajta metódusok és vannak tulajdonságaik. | ||
| - | |||
| - | A jQuery() objektum egyik tulajdonsága a length. Ezt megvizsgálva, tájékozódhatunk, hogy | ||
| - | egy adott azonosító vagy osztály létezik-e. | ||
| - | |||
| - | jQuery("#elso").length | ||
| - | Ennek persze úgy van értelme, ha megvizsgáljuk mekkora ez a hossz. Ha a hossz | ||
| - | nulla, akkor ilyen azonosító vagy osztály nem létezik: | ||
| - | <code javascript> | ||
| - | if(jQuery("#elso").length) | ||
| - | alert("Van ilyen"); | ||
| - | else | ||
| - | alert("Nincs ilyen); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Konzolra írás ==== | ||
| - | Az alert() helyett használhatjuk a console.log() | ||
| - | függvényt, amely JavaScript konzolra ír. | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function() { | ||
| - | console.log('Készen van'); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | ===== Eseménykezelés ===== | ||
| - | |||
| - | ==== Az eseményekről ==== | ||
| - | |||
| - | ^ Esemény ^ Metódus ^ Leírás ^ | ||
| - | | click | .click() | kattintás | | ||
| - | | keydown | .keydown() | egy billentyű le lett nyomva | | ||
| - | | keypress | .keypress() | egy billentyű le lett nyomva | | ||
| - | | keyup | .keyup() | egy billentyű fel lett engedve | | ||
| - | | mouseover | .mouseover() | mozgás az objektum felett | | ||
| - | | mouseout | .mouseout() | az egér elhagyja jelölt elemet és a gyermek elemeket is | | ||
| - | | mouseenter | .mouseenter() | az egér a jelölt elem felé kerül | | ||
| - | | mouseleave | .mouseleave() | az egér elhagyja a jelölt elemet | | ||
| - | | scroll | .scroll() | görgethető elem esetén görgetés történik | | ||
| - | | focus | .focus() | a fókusz megszerzése | | ||
| - | | blur | .blur() | a fókusz elvesztése | | ||
| - | | resize | .resize() | az objektum át lett méretezve | | ||
| - | |||
| - | |||
| - | ==== A lap betöltésének eseménye ==== | ||
| - | |||
| - | Ha beillesztettük a jQuery elérhetőségét a HTML forrásunkba, célszerű | ||
| - | ellenőrizni, hogy működik-e. Erre legalkalmasabb, ha kezeljük a weblap | ||
| - | betöltése kész eseményt. Ezt a ready() metódussal tudjuk megtenni. | ||
| - | Szelektornak a document nevű objektumot adjuk meg, amely automatikusan | ||
| - | létezik a böngészőben. | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function(){ | ||
| - | alert("Működik"); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | A ready() függvénynek átadhatunk egy paramétert, amely lehet egy függvény, ami | ||
| - | végrehajtódik, ha betöltődött a dokumentum. A példánkban ez egy egyszerű | ||
| - | párbeszédablak az alert(). | ||
| - | |||
| - | <code html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | <head> | ||
| - | |||
| - | <meta charset="UTF-8"> | ||
| - | <title>JQuery</title> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <p onclick="$(this).hide();">Bekezdés</p> | ||
| - | <script src="jquery-1.6.3.js"></script> | ||
| - | |||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Működés: | ||
| - | <html> | ||
| - | <p onclick="$(this).hide();" style="border-style:solid; border-width: 1px; border-color:blue; display: inline-block;">Kattintásra eltűnik</p> | ||
| - | </html> | ||
| - | |||
| - | ==== Egyszerű eseménykezelés ==== | ||
| - | |||
| - | Egy nyomógombnak szeretnénk a kattintását figyelni. | ||
| - | |||
| - | <code html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | <head> | ||
| - | |||
| - | <meta charset="UTF-8"> | ||
| - | <title>JQuery</title> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <input type="button" value="Mutat" id="gomb1" /> | ||
| - | <script src="jquery-1.6.3.js"></script> | ||
| - | <script src="gomb.js"></script> | ||
| - | |||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | <code javascript gomb.js> | ||
| - | $('#gomb1').click(function() { | ||
| - | |||
| - | $('body').text('Helló Világ'); | ||
| - | |||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Egy elem tartalma ==== | ||
| - | |||
| - | |||
| - | <code html> | ||
| - | <div id="doboz1">Lorem ipsum</div> | ||
| - | </code> | ||
| - | |||
| - | <code javascript> | ||
| - | var tartalom = $("#doboz1").text(); | ||
| - | alert(tartalom); | ||
| - | </code> | ||
| - | |||
| - | A "Lorem ipsum" szöveget kapjuk. | ||
| - | |||
| - | |||
| - | |||
| - | ==== Betöltődött ablak ==== | ||
| - | A load() elavult függvény! | ||
| - | |||
| - | <code javascript> | ||
| - | $(window).load(function(){ | ||
| - | alert("Ablak betöltve"); | ||
| - | }); | ||
| - | </code> | ||
| - | ==== Betöltődött elem ==== | ||
| - | A load() elavult függvény! | ||
| - | <code html> | ||
| - | <img id="kep01" src="kep.jpg" /> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <code javascript> | ||
| - | $("#kep01").load(function(){ | ||
| - | alert("Kép betöltve"); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Ha ready() függvényt használom, előbb megjelenik az üzenet, utána töltődik a kép. | ||
| - | Itt viszont előbb megjelenik kép és csak utána az üzenet. | ||
| - | |||
| - | Az iframe használat esetén még látványosabb lehet, a load() függvény használata. (<iframe src=""></iframe>) | ||
| - | |||
| - | ==== Az oldal elhagyása ==== | ||
| - | |||
| - | <code html> | ||
| - | <a href="http://goolge.com">Goolge</a> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <code javascript> | ||
| - | $(window).unload(function(){ | ||
| - | alert("Elhagytad az oldalt"); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Eseménykezelés másként ==== | ||
| - | |||
| - | Minden p elem elrejtése: | ||
| - | <code javascript> | ||
| - | $("p").on("click", function () { | ||
| - | $("p").hide(); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Annak a p elemnek elrejtése, amelyre kattintottunk: | ||
| - | <code javascript> | ||
| - | $("p").on("click", function () { | ||
| - | $(this).hide(); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Adott p elemre kattintva, annak háttérszíne megváltozik: | ||
| - | <code javascript> | ||
| - | $("p").on("click", function () { | ||
| - | $(this).css("background-color","blue"); | ||
| - | $(this).css("color","white"); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ===== Effektek ===== | ||
| - | ==== Egy bekezdés rejtése ==== | ||
| - | |||
| - | |||
| - | <code html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | <head> | ||
| - | |||
| - | <meta charset="UTF-8"> | ||
| - | <title>JQuery</title> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <input type="button" value="Rejt" id="gomb1" /> | ||
| - | <div id="uzenet">Üzenetem</div> | ||
| - | <script type="text/javascript" src="jquery-1.6.3.js"></script> | ||
| - | <script type="text/javascript" src="gomb.js"></script> | ||
| - | |||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | <code javascript gomb.js> | ||
| - | $('#gomb1').click(function() { | ||
| - | |||
| - | $('#uzenet').toggle('fast'); | ||
| - | |||
| - | var ertek = $('#gomb1').attr('value'); | ||
| - | if(ertek == "Rejt") | ||
| - | $('#gomb1').attr('value', 'Mutat'); | ||
| - | else if(ertek == "Mutat") | ||
| - | $('#gomb1').attr('value', 'Rejt'); | ||
| - | |||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Néha szükség van arra, hogy ellenőrizzük egy elem milyen állapotban van. Látható vagy rejtett? | ||
| - | A következő részlet ezt valósítja meg: | ||
| - | |||
| - | <code javascript> | ||
| - | if($("#az").is(":visible")) | ||
| - | $("#az").hide(); | ||
| - | </code> | ||
| - | A példában meg is vizsgáljuk egy if() segítésével, és ah látható volt, akkor elrejtjük. | ||
| - | |||
| - | |||
| - | |||
| - | ==== Lassú megjelenítés ==== | ||
| - | |||
| - | Egy szöveg lassú megjelenítése betöltéskor. | ||
| - | |||
| - | |||
| - | <code html index.html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | <head> | ||
| - | |||
| - | <meta charset="UTF-8"> | ||
| - | <title>JQuery</title> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <p id="uzenet" style="display:none">Bekezdés</p> | ||
| - | <script type="text/javascript" src="jquery.js"></script> | ||
| - | <script type="text/javascript" src="sajat.js"></script> | ||
| - | </body> | ||
| - | </html> | ||
| - | |||
| - | </code> | ||
| - | |||
| - | |||
| - | <code javascript sajat.js> | ||
| - | $(document).ready(function(){ | ||
| - | $("#uzenet").fadeIn(5000); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | A fadeIn() bemenő paramétere milliszekundumban megadott érték, de lehet | ||
| - | "fast", "slow" karaktersorozat is. | ||
| - | |||
| - | Eltüntetés a fadeOut() függvénnyel lehetséges. | ||
| - | |||
| - | ==== Rejtés, megjelenítés ==== | ||
| - | |||
| - | <code javascript script.js> | ||
| - | $("#rejto").click(function(){ | ||
| - | $("#szoveg").fadeToggle(5000); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | <code html> | ||
| - | <input type="button" id="rejto" value="Rejt" /> | ||
| - | <p id="szoveg">Lorem ipsum</p> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | A fadeToggle() tipikus problémája, hogy ha még tart az | ||
| - | animált megjelenítés vagy rejtés, és közben történik egy | ||
| - | újabb kattintás, akkor második kattintásnak a hatása, | ||
| - | csak az animáció befejezése után érvényesül. | ||
| - | Erre megoldást jelenthet stop() függvény: | ||
| - | |||
| - | <code> | ||
| - | <style> | ||
| - | #doboz { | ||
| - | width: 200px; | ||
| - | height: 200px; | ||
| - | background-color: navy; | ||
| - | } | ||
| - | </style> | ||
| - | ... | ||
| - | <div id="kapcsolo">Mehet</div> | ||
| - | <div id="doboz">Lorem ipsum</div> | ||
| - | |||
| - | <script src="http://code.jquery.com/jquery.min.js"></script> | ||
| - | <script> | ||
| - | $("#kapcsolo").click(function(){ | ||
| - | $("div").stop().fadeToggle(1000); | ||
| - | }); | ||
| - | </script> | ||
| - | </code> | ||
| - | |||
| - | ===== Szelektorok mélyebben ===== | ||
| - | |||
| - | Az összes p elem kiválasztása: | ||
| - | <code javascript> | ||
| - | $("p").click(function(){ | ||
| - | alert("Kattintás") | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | Csak az első p elem kiválasztása: | ||
| - | <code javascript> | ||
| - | $("p:first").text("Lorem ipsum"); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Csak az utolsó p elem kiválasztása: | ||
| - | <code javascript> | ||
| - | $("p:last").text("Lorem ipsum"); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | A "be" azonosítójú elem kiválasztása: | ||
| - | <code javascript> | ||
| - | $("#be").click(function(){ | ||
| - | alert("Kattintás") | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Az összes elem kiválasztása: | ||
| - | <code javascript> | ||
| - | var elemek = $("*").length | ||
| - | alert(elemek) | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Az összes ul-en belüli elemek száma: | ||
| - | <code javascript> | ||
| - | var elemek = $("ul").find("*").length; | ||
| - | alert(elemek); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | A gyermek elemekben keresünk egy olyan elemet, amelynek osztálya "masodik". | ||
| - | Ennek az elemnek a hátterét pirosra állítjuk: | ||
| - | <code jquery> | ||
| - | var elem = $('div').find('.masodik'); | ||
| - | elem.css("background-color","red"); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Egy lista elemhez kapcsolódó elemek: | ||
| - | <code javascript> | ||
| - | //A lista első eleme | ||
| - | var listaElem = $('li').first() | ||
| - | |||
| - | //Az elem szülője | ||
| - | var szulo = listaElem.parent(); | ||
| - | |||
| - | //Az elem gyermekei | ||
| - | var gyermekek = listaElem.children(); | ||
| - | |||
| - | //A következő testvérelem | ||
| - | var kovetkezoTestver = listaElem.next(); | ||
| - | |||
| - | //Az első listaelem testvérei | ||
| - | var testverek listaElem.siblings(); | ||
| - | |||
| - | //Azok az őselemek, amelyek az adott osztályba tartoznak | ||
| - | var osok = listElem.parents(".osztalynev"); | ||
| - | |||
| - | //A legközelebbi őselem, amely az adott osztályba tartozik | ||
| - | var os = listElem.closest(".osztalynev"); | ||
| - | |||
| - | |||
| - | </code> | ||
| - | |||
| - | |||
| - | ===== Űrlap tartalma ===== | ||
| - | |||
| - | ==== Szövegdoboz tartalma ==== | ||
| - | |||
| - | |||
| - | <code html index.html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | <head> | ||
| - | |||
| - | <meta charset="utf-8"> | ||
| - | <title>JQuery</title> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <input id="be" type="text" value="Lorem ipsum" /> | ||
| - | |||
| - | <script src="jquery.js"></script> | ||
| - | <script src="sajat.js"></script> | ||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Érték kiolvasása: | ||
| - | <code javascript sajat.js> | ||
| - | var ertek = $("#be").val(); | ||
| - | alert(ertek); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Érték beállítása: | ||
| - | <code javascript sajat.js> | ||
| - | $("#be").val(45); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Legördülő listadoboz kiválasztottja ==== | ||
| - | |||
| - | <code javascript> | ||
| - | var valasztott = $("select#jarmu option:selected").val(); | ||
| - | </code> | ||
| - | |||
| - | Egyszerűbben is lehet: | ||
| - | <code javascript> | ||
| - | var valasztott = $("select#jarmu").val(); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | A komplett példa: | ||
| - | <code html index.html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | <head> | ||
| - | <meta charset="utf-8"> | ||
| - | <title></title> | ||
| - | |||
| - | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> | ||
| - | </script> | ||
| - | |||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <form> | ||
| - | <fieldset> | ||
| - | <legend>Válasszon járművet</legend> | ||
| - | |||
| - | <select name="jarmu" id="jarmu"> | ||
| - | <option value="opel">Opel</option> | ||
| - | <option value="bmw">BMW</option> | ||
| - | <option value="ford">Ford</option> | ||
| - | <option value="citroen">Citroen</option> | ||
| - | </select> | ||
| - | |||
| - | <input type="button" id="mehet" value="Mehet"><br> | ||
| - | <input type="text" name="eredmeny"> | ||
| - | </fieldset> | ||
| - | </form> | ||
| - | |||
| - | |||
| - | <script> | ||
| - | $(document).ready(function () { | ||
| - | $("input[name=eredmeny]").hide(); | ||
| - | }) | ||
| - | |||
| - | $("#mehet").click(function () { | ||
| - | var valasztott = $("select#jarmu option:selected").val(); | ||
| - | $("input[name=eredmeny]").show(); | ||
| - | $("input[name=eredmeny]").val("A választott: " + valasztott); | ||
| - | }) | ||
| - | </script> | ||
| - | |||
| - | |||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | ==== Jelölőnégyzet ==== | ||
| - | |||
| - | |||
| - | A jelölőnégyzetek közül van-e bejelölve valamelyik: | ||
| - | <code javascript> | ||
| - | var valasztott = $("input:checkbox:checked").val(); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Hivatkozás azonosítóra: | ||
| - | <code javascript> | ||
| - | var asvanyviz = $("input#asvanyviz:checked").val(); | ||
| - | var tojas = $("input#tojas:checked").val(); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Hivatkozás tulajdonság (attribútum alapján): | ||
| - | <code javascript> | ||
| - | var asvanyviz = $("input:checkbox[name=asvanyviz]:checked").val(); | ||
| - | var tojas = $("input:checkbox[name=tojas]:checked").val(); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Példa jelölőnégyzettel: | ||
| - | <code html index.html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | <head> | ||
| - | <meta charset="utf-8"> | ||
| - | <title></title> | ||
| - | |||
| - | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> | ||
| - | </script> | ||
| - | |||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <form> | ||
| - | <fieldset> | ||
| - | <legend>Mit kér?</legend> | ||
| - | |||
| - | |||
| - | <input type="checkbox" id="asvanyviz"> Ásványvíz<br> | ||
| - | <input type="checkbox" id="tojas"> Tojás<br> | ||
| - | |||
| - | <input type="button" id="mehet" value="Mehet"><br> | ||
| - | <input type="text" name="eredmeny"> | ||
| - | </fieldset> | ||
| - | </form> | ||
| - | |||
| - | |||
| - | <script> | ||
| - | $(document).ready(function () { | ||
| - | $("input[name=eredmeny]").hide(); | ||
| - | }) | ||
| - | |||
| - | $("#mehet").click(function () { | ||
| - | var str=""; | ||
| - | var asvanyviz = $("input#asvanyviz:checked").val(); | ||
| - | var tojas = $("input#tojas:checked").val(); | ||
| - | |||
| - | if (asvanyviz == "on") str += "Ásványvíz "; | ||
| - | if (tojas == "on") str += " Tojás "; | ||
| - | |||
| - | $("input[name=eredmeny]").show(); | ||
| - | $("input[name=eredmeny]").val(str); | ||
| - | console.log(str); | ||
| - | }) | ||
| - | </script> | ||
| - | |||
| - | |||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | A rádiógombok hasonló módon érhetők el. Ahol checkboxot írtunk ott viszont "radio" szükséges helyette: | ||
| - | <code javascript> | ||
| - | $('input:radio[name=bar]:checked').val(); | ||
| - | </code> | ||
| - | |||
| - | === Be van-e jelölve === | ||
| - | |||
| - | <code javascript> | ||
| - | if ($('#checkboxElem').is(":checked")) { | ||
| - | // Ha be van jelölve | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | Másik lehetőség: | ||
| - | <code javascript> | ||
| - | if($('#checkbox').prop('checked')) { | ||
| - | // mi legyen | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | ==== Lista elem van kijelölve? ==== | ||
| - | |||
| - | Egy listadobozban megvizsgáljuk van-e kiválasztott elem. | ||
| - | |||
| - | <code html> | ||
| - | <select id="listaDoboz" multiple size="10"> | ||
| - | <option>Ultra Piroska</option> | ||
| - | <option>Nyers Mihály</option> | ||
| - | <option>Kacsa Borbála</option> | ||
| - | </select> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <code javascript> | ||
| - | if( $("#listaDoboz").val() != undefined ) { | ||
| - | //amit teszünk ha van kiválasztott | ||
| - | } | ||
| - | </code> | ||
| - | ==== Lista elemei ==== | ||
| - | |||
| - | Egy listadoboz elemein végigmegyünk. | ||
| - | |||
| - | <code javascript> | ||
| - | $( "#listBox option" ).each(function( index, element ) { | ||
| - | $("#room").append('<div class="student">' + $(element).text() + '</div>'); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Listák kezelése ==== | ||
| - | |||
| - | Elem hozzáadása: | ||
| - | <code javascript> | ||
| - | $("#listBox").append('<option value="option5">option5</option>'); | ||
| - | </code> | ||
| - | |||
| - | Elem törlése: | ||
| - | <code javascript> | ||
| - | $("#listBox option[value='option1']").remove(); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <code javascript> | ||
| - | $("#selectBox option:selected").remove(); | ||
| - | </code> | ||
| - | |||
| - | <code javascript> | ||
| - | $('#mySelect :selected').remove(); | ||
| - | </code> | ||
| - | |||
| - | ===== A DOM változtatása ===== | ||
| - | |||
| - | ==== A tartalom elé ==== | ||
| - | |||
| - | A tartalom elé újabb elemet szeretnénk beilleszteni. | ||
| - | Adott egy felsorolás, amelyben a példa kedvéért gyümölcsök vannak. | ||
| - | Minden gyümölcsnév az "li" elemek tartalmaként van jelen. | ||
| - | Szeretnénk mint gyümölcsnevet az "a" elemekkel linkké alakítani. | ||
| - | A megoldás a következő: | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function () { | ||
| - | $("li").prepend("a.) "); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | <code html> | ||
| - | <ul> | ||
| - | <li>alma</li> | ||
| - | <li>körte</li> | ||
| - | <li>barack</li> | ||
| - | <li>szilva</li> | ||
| - | </ul> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Attribútumok beállítása és :button ==== | ||
| - | |||
| - | <code html index.html> | ||
| - | <!DOCTYPE html> | ||
| - | <html> | ||
| - | <head> | ||
| - | |||
| - | <meta charset="utf-8"> | ||
| - | <title>JQuery</title> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <input type="button" value="Első" /> | ||
| - | <input type="submit" value="Másdoik" /> | ||
| - | |||
| - | |||
| - | <script type="text/javascript" src="jquery.js"></script> | ||
| - | <script type="text/javascript" src="sajat.js"></script> | ||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <code javascript sajat.js> | ||
| - | |||
| - | $(':button').click(function(){ | ||
| - | alert("Az első működik"); | ||
| - | }); | ||
| - | |||
| - | $(':submit').click(function(){ | ||
| - | $(':submit').attr('value', 'Így is működik'); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ===== Egyéb ===== | ||
| - | ==== Az elemek iterálása ==== | ||
| - | |||
| - | Ha adott egy elem, amelyből több is van egy oldalon, és szeretnénk minden | ||
| - | elemén valami mást csinálni, akkor használhatjuk az .each() metódust. | ||
| - | Ilyen feladat lehet, ha egy lista elemeit meg akarjuk számozni. | ||
| - | |||
| - | |||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function () { | ||
| - | $("li").each(function (index, elem) { | ||
| - | $(elem).prepend(index + ".) "); | ||
| - | }); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | <code html> | ||
| - | <ul> | ||
| - | <li>alma</li> | ||
| - | <li>körte</li> | ||
| - | <li>barack</li> | ||
| - | <li>szilva</li> | ||
| - | </ul> | ||
| - | </code> | ||
| - | |||
| - | Az eredmény ehhez hasonló: | ||
| - | <code> | ||
| - | 0.) alma | ||
| - | 1.) körte | ||
| - | 2.) barack | ||
| - | 3.) szilva | ||
| - | </code> | ||
| - | |||
| - | ==== Szűrés ==== | ||
| - | |||
| - | === A not(), filter() és has() === | ||
| - | |||
| - | A not() szűrő akkor választ ki egy elemet, ha annak nincs .jelolt nevű osztálya. | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function () { | ||
| - | $("li").not(".jelolt").text("új"); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | A filter() szűrő akkor választ ki egy elemet, ha annak van .jelolt nevű osztálya. | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function () { | ||
| - | $("li").filter(".jelolt").text("új"); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | A has() szűrő akkor választ ki egy elemet, ha annak gyermekelemei között van egy | ||
| - | olyan elem, amelynek van .jelolt nevű osztálya. | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function () { | ||
| - | $("p").has(".jelolt").text("új"); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | === Osztály vizsgálata === | ||
| - | |||
| - | Az is() metódus logikai típust ad vissza: | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function () { | ||
| - | if($( 'li' ).eq( 0 ).is(".jelolt")) | ||
| - | console.log("Jelolt van 0 helyen "); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Az is() felfogható a not() ellentéteként, de a not() egy jQuery objektumot ad vissza. | ||
| - | |||
| - | |||
| - | |||
| - | <code html> | ||
| - | <ul> | ||
| - | <li class="jelolt">alma</li> | ||
| - | <li>körte</li> | ||
| - | <li>barack</li> | ||
| - | <li>szilva</li> | ||
| - | </ul> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Tartalom átírása ==== | ||
| - | |||
| - | A HTML tartalmának beállítása: | ||
| - | |||
| - | <code javascript> | ||
| - | $( 'p' ).html( 'Új tartalom' ); | ||
| - | </code> | ||
| - | |||
| - | Beállítás szövegként: | ||
| - | <code javascript> | ||
| - | $( 'p' ).text( 'Új tartalom' ); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | <html> | ||
| - | <input type="text" id="contetRewriteHtmlInputBox" placeholder="alma" value="körte"><br> | ||
| - | <button id="contetRewriteHtmlButton">Mehet a html()</button> | ||
| - | <br><br> | ||
| - | <input type="text" id="contetRewriteTextInputBox" placeholder="alma" value="<b>szilva</b>"><br> | ||
| - | <button id="contetRewriteTextButton">Mehet text()</button> | ||
| - | |||
| - | |||
| - | <div id="contentRewriteResult" style="height: 20px; border: 1px solid #d8e858; width: 100px;"> | ||
| - | bbb | ||
| - | </div> | ||
| - | |||
| - | |||
| - | |||
| - | <script> | ||
| - | window.onload = function () { | ||
| - | if (!jQuery) { | ||
| - | var jq = document.createElement('script'); | ||
| - | jq.src = 'http://code.jquery.com/jquery-1.10.2.min.js'; | ||
| - | document.getElementsByTagName('body')[0].appendChild(jq); | ||
| - | } | ||
| - | $("#contetRewriteHtmlButton").click(function(){ | ||
| - | var adat = $("#contetRewriteHtmlInputBox").val(); | ||
| - | $("#contentRewriteResult").html(adat); | ||
| - | }); | ||
| - | $("#contetRewriteTextButton").click(function(){ | ||
| - | var adat = $("#contetRewriteTextInputBox").val(); | ||
| - | $("#contentRewriteResult").text(adat); | ||
| - | }); | ||
| - | }; | ||
| - | |||
| - | </script> | ||
| - | |||
| - | </html> | ||
| - | ===== CSS változtatása ===== | ||
| - | ==== Egyszerű háttérbeállítás ==== | ||
| - | |||
| - | <code javascript> | ||
| - | $("p").css("background-color","blue"); | ||
| - | </code> | ||
| - | |||
| - | A jQuery elfogadja a JavasScript és a CSS stílusú tulajdonságmegadást is. | ||
| - | Az előbbi utasítást így is írhattam volna: | ||
| - | |||
| - | <code javascript> | ||
| - | $("p").css("backgroundColor","blue"); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Egyszerre több tulajdonság ==== | ||
| - | |||
| - | <code javascript> | ||
| - | $("p").on("click", function () { | ||
| - | $(this).css({"background-color":"blue", "color":"white"}); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | ==== Tulajdonság lekérdezése ==== | ||
| - | |||
| - | |||
| - | <code javascript> | ||
| - | $("p").on("click", function () { | ||
| - | var a = $(this).css("background-color"); | ||
| - | console.log(a); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Az eredmény: | ||
| - | rgba(0, 0, 0, 0) | ||
| - | ==== Több tulajdonság egyszerre ==== | ||
| - | Ha a tulajdonságokat kapcsos zárójelbe tesszük, | ||
| - | a tulajdonságot az értéktől kettősponttal szeparálom, | ||
| - | vesszővel szeparálva több tulajdonság is megadható. | ||
| - | |||
| - | <code javascript> | ||
| - | $("#gomb").click(function(){ | ||
| - | $("#egy").css({ | ||
| - | "backgroundColor":"blue", | ||
| - | "color":"white" | ||
| - | }); | ||
| - | }); | ||
| - | </code> | ||
| - | ===== Adat tárolása a DOM-ban ===== | ||
| - | |||
| - | |||
| - | Bármely HTML elemnél elhelyezhetünk adatokat: | ||
| - | |||
| - | <code javascript> | ||
| - | $('#az').data('kulcs', 'érték'); | ||
| - | |||
| - | $('body').data('gyumolcs', 'szilva'); | ||
| - | $('#az2').data('szam', 50); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | Az adatok lekérése: | ||
| - | |||
| - | <code javascript> | ||
| - | var a = $('#az').data('kulcs'); | ||
| - | var b = $('body').data(); | ||
| - | |||
| - | $('#div').html( $('body').data('gyumols') ); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | <code html> | ||
| - | <button id="gomb">Növel</button> | ||
| - | <div id="kimenet"></div> | ||
| - | |||
| - | |||
| - | <script> | ||
| - | |||
| - | $("#gomb").click(function(){ | ||
| - | alert("vmi"); | ||
| - | var szam = $("body").data("szam"); | ||
| - | if (szam == null) | ||
| - | szam = 1; | ||
| - | else | ||
| - | szam = szam + 1; | ||
| - | $("body").data("szam", szam); | ||
| - | $("#kimenet").html(szam); | ||
| - | }); | ||
| - | |||
| - | </script> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | <html> | ||
| - | <button id="novelGomb">Növel</button> | ||
| - | <div id="kimenet"></div> | ||
| - | |||
| - | <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | ||
| - | <script> | ||
| - | |||
| - | $("#novelGomb").click(function(){ | ||
| - | var szam = $("body").data("szam"); | ||
| - | if (szam == null) | ||
| - | szam = 1; | ||
| - | else | ||
| - | szam = szam + 1; | ||
| - | $("body").data("szam", szam); | ||
| - | $("#kimenet").html(szam); | ||
| - | }); | ||
| - | |||
| - | </script> | ||
| - | </html> | ||
| - | |||
| - | |||
| - | ===== iframe tartalma ===== | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function() { | ||
| - | $('#framenev').attr('src',url); | ||
| - | }) | ||
| - | </code> | ||
| - | |||
| - | ===== Animáció ===== | ||
| - | ==== Fontméret és szín ==== | ||
| - | |||
| - | A következő példákban színváltoztatás is van, de ahhoz a jquer-ui keretrendszerre is | ||
| - | szükség van. | ||
| - | |||
| - | <code html> | ||
| - | <script src="jquery-1.8.3.min.js"></script> | ||
| - | <script src="jquery-ui-1.9.2.custom.min.js"></script> | ||
| - | <script src="sajat.js"></script> | ||
| - | </code> | ||
| - | |||
| - | <code javascript> | ||
| - | $("#gomb").click(function(){ | ||
| - | |||
| - | $("p").animate( | ||
| - | { | ||
| - | fontSize: '40px', | ||
| - | color: '#f00' | ||
| - | } , 4000 | ||
| - | |||
| - | ); | ||
| - | }); | ||
| - | |||
| - | $("#gomb2").click(function(){ | ||
| - | |||
| - | $("p").animate( | ||
| - | {fontSize: '16px', | ||
| - | color: 'black'} , 4000 | ||
| - | |||
| - | ); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function(){ | ||
| - | $("body").hover(function () { | ||
| - | $(this).stop().animate({ backgroundColor: "red" },500) | ||
| - | }, function() { | ||
| - | $(this).stop().animate({ backgroundColor: "blue" },500)} | ||
| - | ); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Fontméret és szín újra ==== | ||
| - | |||
| - | <code javascript script.js> | ||
| - | $("#gomb1").click(function(){ | ||
| - | |||
| - | $("p").animate( | ||
| - | { | ||
| - | fontSize: '40px', | ||
| - | color: '#f00' | ||
| - | } , 4000 | ||
| - | ); | ||
| - | }); | ||
| - | |||
| - | $("#gomb2").click(function(){ | ||
| - | |||
| - | $("p").animate( | ||
| - | {fontSize: '16px', | ||
| - | color: 'black'} , 4000 | ||
| - | |||
| - | ); | ||
| - | }); | ||
| - | |||
| - | </code> | ||
| - | |||
| - | |||
| - | <code html> | ||
| - | <link rel="stylesheet" href="style.css" /> | ||
| - | <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> | ||
| - | ... | ||
| - | <input type="button" id="gomb1" value="Ki" /> | ||
| - | <input type="button" id="gomb2" value="Vissza" /> | ||
| - | |||
| - | <p>alma</p> | ||
| - | ... | ||
| - | <script src="jquery-1.8.3.min.js"></script> | ||
| - | <script src="jquery-ui-1.9.2.custom.min.js"></script> | ||
| - | <script src="script.js"></script> | ||
| - | |||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== A left érték ==== | ||
| - | |||
| - | <code javascript> | ||
| - | $("#teglalap1").click(function(){ | ||
| - | $(this).animate({left: "250px"}); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <html> | ||
| - | <!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script --> | ||
| - | |||
| - | <div id="teglalap1" style=" | ||
| - | position: relative; | ||
| - | background-color: navy; | ||
| - | width: 100px; | ||
| - | height: 70px; | ||
| - | "> | ||
| - | |||
| - | <script> | ||
| - | $("#teglalap1").click(function(){ | ||
| - | $(this).animate({left: "250px"}); | ||
| - | }); | ||
| - | </script> | ||
| - | </div> | ||
| - | </html> | ||
| - | |||
| - | |||
| - | |||
| - | ==== A left érték oda-vissza ==== | ||
| - | |||
| - | <code javascript> | ||
| - | $("#teglalap2").click(function(){ | ||
| - | $(this).animate({left: "250px"}); | ||
| - | $(this).animate({left: "0"}); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <html> | ||
| - | <!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script --> | ||
| - | |||
| - | <div id="teglalap2" style=" | ||
| - | position: relative; | ||
| - | background-color: navy; | ||
| - | width: 100px; | ||
| - | height: 70px; | ||
| - | "></div> | ||
| - | |||
| - | <script> | ||
| - | $("#teglalap2").click(function(){ | ||
| - | $(this).animate({left: "250px"}); | ||
| - | $(this).animate({left: "0"}); | ||
| - | }); | ||
| - | </script> | ||
| - | </html> | ||
| - | |||
| - | |||
| - | ==== A left és átlátszatlanság ==== | ||
| - | |||
| - | <code> | ||
| - | $("#teglalap3").click(function(){ | ||
| - | $(this).animate({left: "250px", opacity:"0.4"}, "slow"); | ||
| - | $(this).animate({left: "0" , opacity:"1.0"}, "slow"); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Minta: | ||
| - | |||
| - | <html> | ||
| - | <iframe src="https://szit.hu/download/peldak/jquery/animacio1.html" width="500" height="100"></iframe> | ||
| - | </html> | ||
| - | |||
| - | ===== AJAX technikák ===== | ||
| - | ==== Az AJAX-ról ==== | ||
| - | |||
| - | AJAX = Asynchronous JavaScript and XML. | ||
| - | |||
| - | Az AJAX lényege, hogy a weblap újratöltése nélkül küldünk és fogadunk adatokat a szervernek, illetve a szervertől. | ||
| - | |||
| - | ==== Szintaxis ==== | ||
| - | |||
| - | $(selector).load(URL,adat,callback); | ||
| - | |||
| - | |||
| - | Get metódussal: | ||
| - | $.get(URL,callback); | ||
| - | |||
| - | POST metódussal: | ||
| - | $.post(URL,adat,callback); | ||
| - | ==== Fájl betöltése ==== | ||
| - | |||
| - | A fájl csak webszerveren keresztül érhető el. | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function(){ | ||
| - | $("button").click(function(){ | ||
| - | $("#elso").load("adat.txt"); | ||
| - | }); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <code html> | ||
| - | <div id="elso">Eredeti tartalom</div> | ||
| - | </code> | ||
| - | |||
| - | ==== Adatok elküldése egy PHP scriptnek ==== | ||
| - | |||
| - | Az adatokat úgy küldjük el az insert.php scriptnek, hogy az nem generál | ||
| - | nekünk új oldalt. | ||
| - | |||
| - | <code html> | ||
| - | <form> | ||
| - | <fieldset> | ||
| - | <legend>Dolgozó felvétele</legend> | ||
| - | <label for="nev">Név:</label> | ||
| - | <input type="text" id="nev"><br> | ||
| - | <label for="telepules">Település:</label> | ||
| - | <input type="text" id="telepules"><br> | ||
| - | <label for="fizetes">Fizetés:</label> | ||
| - | <input type="text" id="fizetes"><br> | ||
| - | </fieldset> | ||
| - | </form> | ||
| - | |||
| - | <button id="addGomb">Hozzáad</button> | ||
| - | |||
| - | </div> | ||
| - | |||
| - | <script> | ||
| - | $("#addGomb").click(function(){ | ||
| - | $.post("insert.php", { | ||
| - | dNev: $("#nev").val(), | ||
| - | dTelepules: $("#telepules").val(), | ||
| - | dFizetes: $("#fizetes").val() | ||
| - | }); | ||
| - | alert("A " + $("#nev").val() + " dolgozó felvéve"); | ||
| - | $("#nev").val(""); | ||
| - | $("#telepules").val(""); | ||
| - | $("#fizetes").val(""); | ||
| - | }); | ||
| - | </script> | ||
| - | </code> | ||
| - | |||
| - | Ügyeljünk arra, hogy a <button> elemnek a formon kívül kell lenni, mert másként submitgombként működik. | ||
| - | |||
| - | Az insert.php-ban már így hivatkozunk rá: | ||
| - | |||
| - | <code php> | ||
| - | $nev = $_POST['dNev']; | ||
| - | $telepules = $_POST['dTelepules']; | ||
| - | $fizetes = $_POST['dFizetes']; | ||
| - | </code> | ||
| - | A 'dNev' az űrlapon megadott változó. | ||
| - | |||
| - | A kinyer adatokból elkészíthetek egy SQL utasítást, amit PHP-én keresztül | ||
| - | elküldhetek: | ||
| - | <code php> | ||
| - | $sql = "insert into dolgozok (nev, telepules, fizetes) | ||
| - | values (\"$nev\", \"$telepules\", $fizetes)"; | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Adatok fogadása egy PHP scripttől ==== | ||
| - | |||
| - | Az adatokat küldő script a küldendő adatokat a kimenetre írja, például "echo" utasítással. | ||
| - | |||
| - | Ha a küldő php script Content-type: text/html tartalmat állít elő, akkor elég az echo utasítással | ||
| - | a képernyőre íratni az elküldendő adatokat: | ||
| - | |||
| - | <code php> | ||
| - | header("Content-type: text/html; charset=utf-8"); | ||
| - | $res = "árvíztűrő"; | ||
| - | echo $res; | ||
| - | </code> | ||
| - | |||
| - | Ennél kulturáltabb megoldás ha JSON kódolást használunk: | ||
| - | |||
| - | <code php> | ||
| - | header("Content-type: application/json; charset=utf-8", true); | ||
| - | $res = "árvíztűrő"; | ||
| - | echo json_encode($res); | ||
| - | </code> | ||
| - | Ekkor azonban nem HTML-t kell előállítanunk hanem JSON MIME típust. | ||
| - | |||
| - | |||
| - | Természetesen nem csak egy adatot szoktunk átadni, hanem egész tömböt, tömböket: | ||
| - | |||
| - | <code php> | ||
| - | header("Content-type: application/json; charset=utf-8", true); | ||
| - | |||
| - | $res['status'] = 'siker'; | ||
| - | $res['message'] = 'Működik'; | ||
| - | |||
| - | echo json_encode($res); | ||
| - | </code> | ||
| - | |||
| - | Figyelem! Tömböket, összetett adatszerkezetet nem tudunk a átküldeni kódolás nélkül. | ||
| - | Azokat mindig JSON kódolva kell átküldeni. | ||
| - | |||
| - | |||
| - | A weboldalon, ahol fogadjuk az adatokat: | ||
| - | <code jquery> | ||
| - | $("#kergomb").click(function(){ | ||
| - | $.post( "send.php", function( data ) { | ||
| - | alert(data['message']); | ||
| - | }); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Ha az adatokat JSON kódolva kapjuk meg akkor át kell konvertálni JavaScript objektummá. | ||
| - | |||
| - | JSON konvertálása JavaScript objektummá: | ||
| - | <code javascript> | ||
| - | $("#gomb").click(function(){ | ||
| - | $.post("send.php", function(data){ | ||
| - | var o = $.parseJSON(data); | ||
| - | |||
| - | for(i=0; i<o.length; i++) | ||
| - | $("#res").append(o[i].user + " " + o[i].pass + "<br>"); | ||
| - | | ||
| - | }); | ||
| - | $("#gomb").fadeOut(2000); | ||
| - | }); | ||
| - | </code> | ||
| - | ==== Hiba és siker visszajelzéssel ==== | ||
| - | |||
| - | A jQuery-ben létezik fail(), done() és egy always() metódus, amelyet minden | ||
| - | visszatérő objektumon futtathatunk. Természetesen egyszerre mind a három | ||
| - | metódus futtatható. | ||
| - | |||
| - | <code javascript> | ||
| - | $(document).ready(function(){ | ||
| - | $("button").click(function(){ | ||
| - | $("form").hide(); | ||
| - | $.post( "insert.php", { | ||
| - | nev: $("#nev").val(), | ||
| - | telepules: $("#telepules").val(), | ||
| - | lakcim: $("#lakcim").val(), | ||
| - | szuletes: $("#szuletes").val(), | ||
| - | fizetes: $("#fizetes").val(), | ||
| - | juttatas: $("#juttatas").val(), | ||
| - | kocsi: $("#kocsi").val() | ||
| - | }) | ||
| - | .fail(function() { | ||
| - | alert( "Hiba a küldés során" ); | ||
| - | }) | ||
| - | .done(function(){ | ||
| - | alert( "Küldés rendben" ); | ||
| - | }) | ||
| - | .always(function(){ | ||
| - | alert( "Küldés vége" ); | ||
| - | }) | ||
| - | ; | ||
| - | }); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | ==== Küldés és fogadás egyszerre ==== | ||
| - | |||
| - | <code javascript> | ||
| - | $("#gomb").click(function(){ | ||
| - | $.post("feldolgozo.php", { | ||
| - | dUser: "mari" | ||
| - | }) | ||
| - | .done(function(data){ | ||
| - | alert(data); | ||
| - | }); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Elküldünk egy felhasználónevet (mari), majd a data változóban már viszont választ is várunk. | ||
| - | |||
| - | A .done rész akkor hajtódik részre, az elküldés sikeres volt előtte. | ||
| - | |||
| - | Megjegyzés: A feldolgozo.php script hibáit itt nem tudjuk ellenőrizni. | ||
| - | |||
| - | |||
| - | ==== Komplett példa letöltése ==== | ||
| - | === Dolgozó felvétel és listázás === | ||
| - | |||
| - | * http://szit.hu/download/oktatas/jquery/jQuery_post_minta_tomb.zip | ||
| - | |||
| - | |||
| - | jQuery és adatbázis is mellékelve. | ||
| - | |||
| - | Tesztelni a következő PHP fájlokkal lehet: | ||
| - | * add.php | ||
| - | * list.php | ||
| - | |||
| - | Az add.php segítségével felveszünk egy dolgozót. | ||
| - | A list.php segítségével az összes dolgozót lekérjük, listázzuk. | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | === Dolgozó felvétel és Nagy fizetése === | ||
| - | |||
| - | * http://szit.hu/download/oktatas/jquery/jQuery_post_minta_egyAdat.zip | ||
| - | |||
| - | Tesztelni a következő PHP fájlokkal lehet: | ||
| - | * add.php | ||
| - | * nagy.php | ||
| - | |||
| - | Az add.php segítségével felveszünk egy dolgozót. | ||
| - | A nagy.php segítségével a Nagy János fizetését kérjük le. | ||
| - | |||
| - | === A felhasználó ellenőrzése regisztrációnál === | ||
| - | |||
| - | Ez példa tartalmazza az előzőket, de ki van egészítve egy új lehetőséggel. | ||
| - | A users táblába felvehetünk felhasználót, felvétel előtt ellenőrizve, hogy | ||
| - | létezik-e. | ||
| - | |||
| - | * http://szit.hu/download/oktatas/jquery/userexist.zip | ||
| - | |||
| - | Teszteléshez a következő PHP fájllal lehet: | ||
| - | * reguser.php | ||
| - | A felhasználó ellenőrzése a következő fájlban történik: | ||
| - | * exist.php | ||
| - | A felhasználó felvétele: | ||
| - | * insertuser.php | ||
| - | |||
| - | |||
| - | A lényegi rész: | ||
| - | <code javascript> | ||
| - | $("#addGomb").click(function(){ | ||
| - | $.post("exist.php", { | ||
| - | dUser: $("#username").val() | ||
| - | }) | ||
| - | .done(function(data){ | ||
| - | if(data == "notone") | ||
| - | { | ||
| - | $.post("insertuser.php", { | ||
| - | dUser: $("#username").val(), | ||
| - | dPassword: $("#password").val() | ||
| - | }); | ||
| - | alert("A " + $("#username").val() + " felhasználó felvéve"); | ||
| - | $("#username").val(""); | ||
| - | $("#password").val(""); | ||
| - | } | ||
| - | else | ||
| - | { | ||
| - | alert("A felhasználó már létezik!"); | ||
| - | } | ||
| - | }); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | A példában két post() metódus is van. A második viszont csak akkor fut le, ha az első sikeres volt (.done()...), | ||
| - | és az első post() után a data változóban a notone szó jön át az exist.php fájltól. | ||
| - | |||
| - | |||
| - | ===== Csúsztatás ===== | ||
| - | |||
| - | |||
| - | Létrehozok két dobozt: | ||
| - | <code html> | ||
| - | <div id="egy">a</div> | ||
| - | <div id="ketto">b</div> | ||
| - | </code> | ||
| - | |||
| - | Adunk egy kis stílust neki: | ||
| - | <code css> | ||
| - | div { | ||
| - | background-color: #ecdc5c; | ||
| - | padding: 5px; | ||
| - | margin: 1px 0; | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | <code jquery> | ||
| - | $("#egy").click(function(){ | ||
| - | $("#ketto").slideToggle("slow"); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Példa: | ||
| - | |||
| - | <html> | ||
| - | <iframe src="https://szit.hu/download/peldak/jquery/slide.html" width="300" height="200"></iframe> | ||
| - | </html> | ||
| - | |||
| - | |||
| - | ===== Következő elem ===== | ||
| - | |||
| - | |||
| - | <code html> | ||
| - | <!doctype html> | ||
| - | <html> | ||
| - | <head> | ||
| - | <meta charset="utf-8" /> | ||
| - | <title>Következő</title> | ||
| - | <link rel="stylesheet" href="style.css" /> | ||
| - | |||
| - | </head> | ||
| - | <body> | ||
| - | |||
| - | <div id="egy" style="background:blue;">a</div> | ||
| - | <div id="ketto">b</div> | ||
| - | <div id="harom">c</div> | ||
| - | <button id="gomb">Következő</button> | ||
| - | <button id="reset">Vissza</button> | ||
| - | |||
| - | <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | ||
| - | <script> | ||
| - | var $currElement = $("#egy"); | ||
| - | $("#gomb").click(function(){ | ||
| - | if(!$currElement.next('div').length){ | ||
| - | alert("Nincs elem!"); | ||
| - | return false; | ||
| - | } | ||
| - | $currElement = $currElement.next(); | ||
| - | $("div").css("background", ""); | ||
| - | $currElement.css("background", "blue"); | ||
| - | }); | ||
| - | $("#reset").click(function () { | ||
| - | location.reload(); | ||
| - | }); | ||
| - | </script> | ||
| - | |||
| - | </body> | ||
| - | </html> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Működés: | ||
| - | <html> | ||
| - | <div id="egyKovetkezo" style="background:blue;">a</div> | ||
| - | <div id="kettoKovetkezo">b</div> | ||
| - | <div id="haromKovetkezo">c</div> | ||
| - | <button id="gombKovetkezo">Következő</button> | ||
| - | <button id="resetKovetkezo26">Vissza</button> | ||
| - | |||
| - | |||
| - | <script> | ||
| - | var $currElement = $("#egyKovetkezo"); | ||
| - | $("#gombKovetkezo").click(function(){ | ||
| - | if(!$currElement.next('div').length){ | ||
| - | alert("Nincs elem!"); | ||
| - | return false; | ||
| - | } | ||
| - | $currElement = $currElement.next(); | ||
| - | $("div").css("background", ""); | ||
| - | $currElement.css("background", "blue"); | ||
| - | }); | ||
| - | $("#resetKovetkezo26").click(function () { | ||
| - | location.reload(); | ||
| - | }); | ||
| - | </script> | ||
| - | |||
| - | </html> | ||
| - | |||
| - | |||
| - | ===== HTML szövegként értelmezve ===== | ||
| - | |||
| - | <code html> | ||
| - | <button id="gomb">Mehet</button> | ||
| - | <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | ||
| - | <script> | ||
| - | $("#gomb").click(function(){ | ||
| - | var tartalom = $('<html> <body>\ | ||
| - | <input id="a" value="12"> \ | ||
| - | </body></html>'); | ||
| - | var talalat = $(tartalom).filter("#a"); | ||
| - | console.log(talalat.val()); | ||
| - | }); | ||
| - | </script> | ||
| - | </code> | ||
| - | |||
| - | ===== Csapdák és redundanciák ===== | ||
| - | ==== Hiányos szelektor ==== | ||
| - | |||
| - | Gyakori hiba a szelektor hiányos megadása. | ||
| - | |||
| - | <code javascript> | ||
| - | $("piros").css("color","red"); | ||
| - | </code> | ||
| - | |||
| - | A beállításunk piros azonosítóra, vagy piros osztályra vonatkozna, de elhagytuk a "#" vagy a "." karaktert. | ||
| - | |||
| - | ==== Túl sok jQuery hívás ==== | ||
| - | |||
| - | |||
| - | <code javascript> | ||
| - | $("#gyumolcs").append("alma"); | ||
| - | $("#gyumolcs").css("color","red"); | ||
| - | $("#gyumolcs").show(); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Helyette használjuk így: | ||
| - | <code javascript> | ||
| - | $("#gyumolcs").append("alma").css("color","red").show(); | ||
| - | </code> | ||
| - | |||
| - | Több sorba is írhatjuk: | ||
| - | <code javascript> | ||
| - | $("#gyumolcs").append("alma") | ||
| - | .css("color","red") | ||
| - | .show(); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Felesleges hívások ==== | ||
| - | |||
| - | <code javascript> | ||
| - | $("#egy").css("color","red"); | ||
| - | $("#ketto").css("color","red"); | ||
| - | $(".harom").css("color","red"); | ||
| - | </code> | ||
| - | |||
| - | Helyette: | ||
| - | <code javascript> | ||
| - | $("#egy, #ketto, .harom").css("color","red"); | ||
| - | </code> | ||
| - | |||
| - | ==== Hatáskörök hiánya ==== | ||
| - | |||
| - | <code html> | ||
| - | <div id="darab1"> | ||
| - | <div class="piros"></div> | ||
| - | <div class="kek"></div> | ||
| - | <div class="piros"></div> | ||
| - | <div class="kek"></div> | ||
| - | </div> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | <code javascript> | ||
| - | $(".piros").css("color","red"); | ||
| - | </code> | ||
| - | |||
| - | Az előbbi példa működik. Ha sok darabból álló divünk van, akkor a böngésző | ||
| - | kénytelen mindegyiket átnézni, amíg megtalálja a darab1-en belülit. | ||
| - | Ha viszont a hatókört is megadjuk, akkor gyorsabb működést eredményezhet. | ||
| - | |||
| - | Helyesen: | ||
| - | <code javascript> | ||
| - | $("#darab1 .piros").css("color","red"); | ||
| - | </code> | ||
| - | |||
| - | ==== Dinamikus változások ==== | ||
| - | |||
| - | Ha az oldalhoz dinamikusan hozzáadunk egy button elemet | ||
| - | a click() metódust nem fog reagálni: | ||
| - | <code javascript> | ||
| - | $("#gomb").click(CsinallunkValamit); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Használjuk helyette a delegate() metódust. | ||
| - | <code javascript> | ||
| - | $(document).delegate("#gomb", "click", CsinalunkValamit); | ||
| - | </code> | ||
| - | |||
| - | ==== Feleslegek termelése ==== | ||
| - | |||
| - | Induljunk egy egyszerű felesleggel: | ||
| - | <code javascript> | ||
| - | $("#egy").css("display", "none"); | ||
| - | $("#egy").css("display", ""); | ||
| - | </code> | ||
| - | |||
| - | Használjuk helyette a hide(), show() metódust. | ||
| - | |||
| - | <code javascript> | ||
| - | $("#egy").hide(); | ||
| - | $("#egy").show(); | ||
| - | </code> | ||
| - | |||
| - | A feleslegesen megírt kódok még fokozhatók: | ||
| - | <code javascript> | ||
| - | if($("#egy").is(":visible")) | ||
| - | $("#egy").css("display", "none"); | ||
| - | else | ||
| - | $("#egy").css("display", ""); | ||
| - | </code> | ||
| - | |||
| - | Helyette használjuk: | ||
| - | <code javascript> | ||
| - | $("#egy").toggle(); | ||
| - | </code> | ||
| - | |||
| - | A másik ilyen próbálkozás egy elem tartalmának kiürítése: | ||
| - | <code javascript> | ||
| - | $("#egy").html(""); | ||
| - | </code> | ||
| - | |||
| - | Helyette: | ||
| - | <code javascript> | ||
| - | $("#egy").empty(); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | Felesleges jQuery hívás: | ||
| - | <code javascript> | ||
| - | var a = $(this).attr("src"); | ||
| - | </code> | ||
| - | |||
| - | Így egyszerűbb: | ||
| - | <code javascript> | ||
| - | var a = this.src; | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Ajax ==== | ||
| - | |||
| - | Az async: false használata a böngészőt lefagyaszthatja: | ||
| - | <code javascript> | ||
| - | $.ajax({ | ||
| - | async: false | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | Ezt olyankor szokták használni, ha egy ajax hívás sikerétől függővé kell tenni egy másikat. | ||
| - | De e helyett az ajax hívás sikerágában hajtsuk végre a másik hívást. | ||
| - | |||
| - | |||
| - | ===== Függelék ===== | ||
| - | |||
| - | ==== Konfliktus más keretrendszerekkel ==== | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | Fentebb láttuk, hogy jQuery() elérhető egy dollárjellel is, amelyet | ||
| - | nagyon gyakran használunk. Előfordulhat, hogy más keretrendszer | ||
| - | is használunk, amelyben szintén használatos a dollárjel.Ilyenkor | ||
| - | ütközés állhat fent. Futtassuk ilyenkor a noConflict() metódust: | ||
| - | <code javascript> | ||
| - | jQuery.noConflict() | ||
| - | </code> | ||
| - | |||
| - | jQuery utasításainkat ez után illesszük be, dollárjel helyett | ||
| - | mindig jQuery() kezdéssel. | ||
| - | |||
| - | Ha mindenképpen dollár jelet szeretnénk, megoldást jelenthet | ||
| - | ha függvénybe írjuk a jQuery utasításainkat: | ||
| - | <code javascript> | ||
| - | (function($) { | ||
| - | $(document).ready(function(){ alert("Működik"); }); | ||
| - | })(jQuery); | ||
| - | </code> | ||
| - | |||
| - | A függvénynek paraméterként adjuk át a jQuery objektumot, függvényen | ||
| - | belül pedig már a szokásos $ jel segítségével hivatkozok rá. | ||
| - | |||
| - | |||
| - | |||
| - | Esetleg lehet így is: | ||
| - | <code javascript script.js> | ||
| - | var j = jQuery.noConflict(); | ||
| - | |||
| - | |||
| - | j("#gomb").click(function(){ | ||
| - | |||
| - | j("p").animate( | ||
| - | {fontSize: '40px', | ||
| - | color: 'blue'} , 4000 | ||
| - | |||
| - | ); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | vagy: | ||
| - | <code javascript script.js> | ||
| - | var jq = $.noConflict(); | ||
| - | jq(document).ready(function(){ | ||
| - | jq("button").click(function(){ | ||
| - | jq("p").text("Működik"); | ||
| - | }); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | vagy: | ||
| - | <code javascript script.js> | ||
| - | $.noConflict(); | ||
| - | jQuery(document).ready(function($){ | ||
| - | $("button").click(function(){ | ||
| - | $("p").text("Működik"); | ||
| - | }); | ||
| - | }); | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== jQuery be van töltve? ==== | ||
| - | |||
| - | A következő példában JavaSecripttel ellenőrzöm, hogy be van-e töltve a jQuery. | ||
| - | Ha nincs akkor betölti, és felfűzi a body elem után. | ||
| - | |||
| - | <code javascript> | ||
| - | window.onload = function () { | ||
| - | if (!jQuery) { | ||
| - | var jq = document.createElement('script'); | ||
| - | jq.src = 'http://code.jquery.com/jquery-1.10.2.min.js'; | ||
| - | document.getElementsByTagName('body')[0].appendChild(jq); | ||
| - | } | ||
| - | |||
| - | //Amit szeretnénk jQuery-ben ... | ||
| - | }; | ||
| - | </code> | ||
| - | |||
| - | ==== jQuery sablon ==== | ||
| - | |||
| - | <code html> | ||
| - | <script src="http://code.jquery.com/jquery-latest.js"></script> | ||
| - | |||
| - | <script> | ||
| - | $(document).ready(function(){ | ||
| - | // Ide jön a jQuery kód | ||
| - | }); | ||
| - | </script> | ||
| - | </code> | ||
| - | |||
oktatas/web/jquery/jquery_keretrendszer.1613072022.txt.gz · Utolsó módosítás: 2021/02/11 20:33 szerkesztette: admin
Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Share Alike 4.0 International
