12.óra jquery Framework #1 Gyimesi Ákos gyimesi.akos@gmail.com http://webprog.gy-i-m.com
12.óra jquery Framework #1 Miről lesz szó? JavaScript nyelv alapjai plusz: a JavaScript objektummodellje JavaScript a böngészőben oldalelemek manipulációja (DOM modell) animációk, effektek egyszerűsítés a jquery keretrendszerrel Kommunikáció a szerverrel AJAX (Asynchronous Javascript And XML) JSON (JavaScript Object Notation) (szintén jquery-ben)
12.óra jquery Framework #1 Miről lesz szó? JavaScript nyelv alapjai plusz: a JavaScript objektummodellje JavaScript a böngészőben oldalelemek manipulációja (DOM modell) animációk, effektek egyszerűsítés a jquery keretrendszerrel Kommunikáció a szerverrel AJAX (Asynchronous Javascript And XML) JSON (JavaScript Object Notation) (szintén jquery-ben)
A jquery keretrendszer Miért van szükség JavaScript keretrendszerre? a standard API körülményes, alacsony szintű pl. JavaScript DOM böngészők közötti különbségek böngészőablak mérete betöltődés kezdete esemény egyéb események (pl. egérpozíció lekérdezése) AJAX megvalósítás...
A jquery keretrendszer jquery használata: 72 kbyte minimalizált kód <head> <script type= text/javascript src= jquery.js ></script> <script type= text/javascript src= my_code.js ></script> </head> ebben már használhatjuk a jquery függvényeit
A jquery keretrendszer A jquery megközelítése: Válasszuk le teljesen a JavaScript-et a HTML kódtól Működés leírása: CSS selector (!) + eseménykezelő
jquery - Példa <html> <head> <script type= text/javascript src= jquery.js ></script> <script type= text/javascript > $(document).ready(function() { $('#mybutton').click(function() { $('#message').html('hello world!'); </script> </head> <body> <div id= message >Message area</div> <button id= mybutton >Press this</button> </body>
jquery - Példa <html> <head> A dokumentum betöltődésekor <script type= text/javascript fusson le, src= jquery.js ></script> hogy... <script type= text/javascript > $(document).ready(function() { $('#mybutton').click(function() { $('#message').html('hello world!'); </script> </head> <body> <div id= message >Message area</div> <button id= mybutton >Press this</button> </body>
jquery - Példa <html> <head> A dokumentum betöltődésekor <script type= text/javascript fusson le, src= jquery.js ></script> hogy... <script type= text/javascript > A mybutton id-ű elemek click $(document).ready(function() { eseményvezérlője $('#mybutton').click(function() { legyen az, hogy... $('#message').html('hello world!'); </script> </head> <body> <div id= message >Message area</div> <button id= mybutton >Press this</button> </body>
jquery - Példa <html> <head> A dokumentum betöltődésekor <script type= text/javascript fusson le, src= jquery.js ></script> hogy... <script type= text/javascript > A mybutton id-ű elemek click eseményvezérlője legyen az, hogy... $(document).ready(function() { $('#mybutton').click(function() { $('#message').html('hello world!'); </script> </head> A message id-ű elemek tartalmát írja át arra, hogy Hello world! <body> <div id= message >Message area</div> <button id= mybutton >Press this</button> </body>
A jquery megközelítése Egyetlen fontos jquery függvény: $() paramétere: DOM objektum selector ha string: CSS3 selector-ként értelmezi lehet maga a DOM objektum is pl. $(document).ready(...) visszatérési értéke: eredményhalmaz objektum az ezen hívott metódusok az összes kiválasztott objektumon végrehajtódnak ezen az objektumon végrehajtható műveletek: esemény definiálás DOM manipuláció...
A jquery megközelítése A megközelítés hatalmas előnye: Teljesen le van választva a HTML a JavaScript-től tömör HTML kód (nincs onclick=... mindenhol) a dinamikus működés kiterjeszthető a HTML módosítása nélkül akárcsak a design... ha a JavaScript ki van kapcsolva, le sem töltődik a kód
jquery - műveletek DOM objektumokon végezhető műveletek: eseménykezelés: metódus neve: JavaScript esemény neve click, mouseover, mouseout, hover, click, dblclick, focus, change, keypress, select, submit,... ready esemény: amikor a DOM fa már betöltődött (képek betöltődése előtt) metódus paramétere: eseménykezelő függvény this = az aktuális DOM objektum $('a.alertlink').click(function(evt) { alert('clicked on ' + $(this).text()); return false; // do not jump to href URL })
jquery - műveletek DOM objektumokon végezhető műveletek: DOM manipuláció: tartalom/stílus módosítása és lekérdezése addclass(), removeclass(), toggleclass() text(), html() - tartalom lekérdezése/módosítása attr() - HTML attribútum lekérdezése/módosítása after(), before(), append(), prepend(), remove(), wrap() - DOM elemek / HTML beszúrása width(), height() - méret lekérdezése css() - CSS property-k lekérdezése/átállítása
jquery - műveletek DOM objektumokon végezhető műveletek: Effektek: hide(), show() fadein(), fadeout() slideup(), slidedown(), slidetoggle() animate(cssproperties, duration) - teljesen testreszabható animáció! <div id= mybox style= width:100px; height:100px; background:blue > </div> $('#mybox').click(function() { $(this).animate({width:'50px', height:'50px'}, 1500);
jquery - műveletek DOM objektumokon végezhető műveletek: DOM keresés: = objektumhalmazon belüli objektumhalmaz keresése parent(), children(), find(selector), siblings(), first(), last(),... ezeken ugyanúgy végrehajtható minden előző művelet $('a.insertlink').click(function() { $(this).parent().find('div.message').text('link clicked'); return false;
jquery - műveletek DOM objektumokon végezhető műveletek: each(): $('#mydiv').children().each(function(child) { // Do something with 'child' DOM object
jquery - műveletek DOM elemek létrehozása: $('html forrás') $('a.addlink').click(function() { var newitem = prompt('new item:'); $(this).parent().find('ul').append( $('<li>').text(newitem) ); );