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

12.óra – jQuery Framework #1

Gyimesi Ákos [email protected] http://webprog.gy-i-m.com

12.óra – jQuery Framework #1 ●

Miről lesz szó? –

JavaScript nyelv alapjai ✔ ●

–

JavaScript a böngészőben ● ● ●

–

plusz: a JavaScript objektummodellje ✔ 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 ✔ ●

–

JavaScript a böngészőben ● ● ●

–

plusz: a JavaScript objektummodellje ✔ 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

<script type=”text/javascript” src=”jquery.js”> <script type=”text/javascript” src=”my_code.js”> 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 <script type=”text/javascript” src=”jquery.js”> <script type=”text/javascript”> $(document).ready(function() { $('#mybutton').click(function() { $('#message').html('Hello world!'); }); }); Press this

jQuery - Példa „A dokumentum betöltődésekor <script type=”text/javascript” fusson le,src=”jquery.js”> hogy...” <script type=”text/javascript”> $(document).ready(function() { $('#mybutton').click(function() { $('#message').html('Hello world!'); }); }); Press this

jQuery - Példa „A dokumentum betöltődésekor <script type=”text/javascript” fusson le,src=”jquery.js”> hogy...” <script type=”text/javascript”> $(document).ready(function() { $('#mybutton').click(function() { $('#message').html('Hello world!'); }); }); Press this

„A mybutton id-ű elemek click eseményvezérlője legyen az, hogy...”

jQuery - Példa „A dokumentum betöltődésekor <script type=”text/javascript” fusson le,src=”jquery.js”> hogy...” <script type=”text/javascript”> $(document).ready(function() { $('#mybutton').click(function() { $('#message').html('Hello world!'); }); „A message id-ű elemek });

tartalmát írja át arra, hogy Hello world!”

Press this

„A mybutton id-ű elemek click eseményvezérlője legyen az, hogy...”

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 –

–

visszatérési értéke: eredményhalmaz objektum ●

–

pl. $(document).ready(...)

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

$('#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( $('

').text(newItem) ); );