12.óra jquery Framework #1. Gyimesi Ákos

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "12.óra jquery Framework #1. Gyimesi Ákos"

Natália Takács
7 évvel ezelőtt
Látták:

1 12.óra jquery Framework #1 Gyimesi Ákos

2 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)

3 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)

4 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...

5 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

6 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ő

7 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>

8 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>

9 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>

10 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>

11 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ó...

12 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

13 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 })

14 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

15 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);

16 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;

17 jquery - műveletek DOM objektumokon végezhető műveletek: each(): $('#mydiv').children().each(function(child) { // Do something with 'child' DOM object

18 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) ); );

Hasonló dokumentumok

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk. JSON tutorial Készítette: Cyber Zero Web: www.cyberzero.tk E-mail: cyberzero@freemail.hu Msn: cyberzero@mailpont.hu Skype: cyberzero_cz Fb: https://www.facebook.com/cyberzero.cz BEVEZETÉS: A JSON (JavaScript