Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
jQuery<br />FRIŽU – Žilina<br />Mgr. Juraj Michálek<br />http://georgik.sinusgear.com<br />15. 4. 2011<br />
Obsah<br />Čo je to jQuery<br />Základ HTML/CSS<br />Základ jQuery<br />Interaktívne aplikácie<br />
Write less, do more<br />www.jquery.com<br />Ohloh: http://www.ohloh.net/p/jQuery<br />
HTML a CSS<br /><div>Ahoj</div><br />CSS:<br />div {<br />	color: red;<br />}<br />
ID – jeden výskyt<br /><div id=“zilina”>AhojŽilina</div><br />CSS:<br />#zilina {<br />	color: red;<br />}<br />
Class – viac výskytov<br /><div class=“zilinaClass”>Hojhoj</div><br />CSS:<br />.zilinaClass {<br />	color: red;<br />}<br />
Začíname s jQuery<br /><script type="text/javascript" <br />src="jquery-1.5.2.min.js"><br /></script><br />
Vlastný JavaScript kód<br /><script type="text/javascript"><br />....<br /> </script><br />
Základná syntax jQuery<br />$(selektor).operácia(param1,param2).operácia...<br />$(selektor).filter(param).operácia(...<br />
Udalosti<br />$(document).ready(…);<br />$(“a”).click(…);<br />
Funkcie - demo-01<br />$(document).ready(<br />function ()<br />{<br />	alert(“Pozor!”);<br />}<br />);<br />
Zmena CSS – demo-02<br />$(document).ready(<br />	function ()<br />	{<br />		$("div").css("background","red");<br />	}<br ...
Reakcianaklik – demo-03<br />function clickHandler()<br />{<br />        $(this).css("background","green");<br />}<br /> $...
Reťazenie operácií – demo-04<br />$(this).css("background","green").<br />css("height","150px");<br />
Selektorna ID – demo-05<br /> <div id="zilina">Žilina</div><br /> <div id="povazska">PovažskáBystrica</div><br />$("#zilin...
Handler funkcie<br /> function zilinaClickHandler()<br />    {<br />        $(this).css("background","green").css("height"...
Selektor Class – demo-06<br /><div id="zilina" class="city">Žilina</div><br /><div id="povazska" class="city">Považská Bys...
toggleClass – demo-07<br /> <style type="text/css"><br />        div {<br />            background:red;<br />        }<br ...
toggleClass<br /> function divClickHandler()<br />    {<br />        $(this).toggleClass("selected");<br />    }<br />$("d...
mouseenter, mouseleave – demo-08<br /> <style type="text/css"><br />        div {<br />            background:green;<br />...
mouseenter, mouseleave<br /> function enterHandler()<br />    {<br />        $(this).toggleClass("hovered", true);<br />  ...
animate – demo-09<br /> <style type="text/css"><br />        div {<br />            background:green;<br />            hei...
animate<br /> function enterHandler()<br />    {<br />        $(this).animate({'width':'300px'}, 2000);<br />    }<br />  ...
Nächste SlideShare
Wird geladen in …5
×

Základy jQuery

3.602 Aufrufe

Veröffentlicht am

Základy jQuery, vytvorenie jednoduchej aplikácie s animáciou. Materiály z workshopu v Žiline

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Základy jQuery

  1. 1. jQuery<br />FRIŽU – Žilina<br />Mgr. Juraj Michálek<br />http://georgik.sinusgear.com<br />15. 4. 2011<br />
  2. 2. Obsah<br />Čo je to jQuery<br />Základ HTML/CSS<br />Základ jQuery<br />Interaktívne aplikácie<br />
  3. 3. Write less, do more<br />www.jquery.com<br />Ohloh: http://www.ohloh.net/p/jQuery<br />
  4. 4. HTML a CSS<br /><div>Ahoj</div><br />CSS:<br />div {<br /> color: red;<br />}<br />
  5. 5. ID – jeden výskyt<br /><div id=“zilina”>AhojŽilina</div><br />CSS:<br />#zilina {<br /> color: red;<br />}<br />
  6. 6. Class – viac výskytov<br /><div class=“zilinaClass”>Hojhoj</div><br />CSS:<br />.zilinaClass {<br /> color: red;<br />}<br />
  7. 7. Začíname s jQuery<br /><script type="text/javascript" <br />src="jquery-1.5.2.min.js"><br /></script><br />
  8. 8. Vlastný JavaScript kód<br /><script type="text/javascript"><br />....<br /> </script><br />
  9. 9. Základná syntax jQuery<br />$(selektor).operácia(param1,param2).operácia...<br />$(selektor).filter(param).operácia(...<br />
  10. 10. Udalosti<br />$(document).ready(…);<br />$(“a”).click(…);<br />
  11. 11. Funkcie - demo-01<br />$(document).ready(<br />function ()<br />{<br /> alert(“Pozor!”);<br />}<br />);<br />
  12. 12. Zmena CSS – demo-02<br />$(document).ready(<br /> function ()<br /> {<br /> $("div").css("background","red");<br /> }<br />);<br />
  13. 13. Reakcianaklik – demo-03<br />function clickHandler()<br />{<br /> $(this).css("background","green");<br />}<br /> $(document).re…<br />$("div").click(clickHandler);<br />
  14. 14. Reťazenie operácií – demo-04<br />$(this).css("background","green").<br />css("height","150px");<br />
  15. 15. Selektorna ID – demo-05<br /> <div id="zilina">Žilina</div><br /> <div id="povazska">PovažskáBystrica</div><br />$("#zilina").click(zilinaClickHandler);<br />$("#povazska").click(povazskaClickHandler);<br />
  16. 16. Handler funkcie<br /> function zilinaClickHandler()<br /> {<br /> $(this).css("background","green").css("height","150px");<br /> }<br /> function povazskaClickHandler()<br /> {<br /> $(this).css("background","yellow").<br />css("height","100px").<br />css("border","solid black 5px");<br /> }<br />
  17. 17. Selektor Class – demo-06<br /><div id="zilina" class="city">Žilina</div><br /><div id="povazska" class="city">Považská Bystrica</div><br /><div id="vrtizer" class="village">Vrtižer</div><br />$(".city").click(cityClickHandler);<br />$(".village").click(villageClickHandler);<br />
  18. 18. toggleClass – demo-07<br /> <style type="text/css"><br /> div {<br /> background:red;<br /> }<br /> .selected<br /> {<br /> background:pink;<br /> height:150px;<br /> border: 5px solid red;<br /> }<br /> </style><br />
  19. 19. toggleClass<br /> function divClickHandler()<br /> {<br /> $(this).toggleClass("selected");<br /> }<br />$("div").click(divClickHandler);<br />
  20. 20. mouseenter, mouseleave – demo-08<br /> <style type="text/css"><br /> div {<br /> background:green;<br /> height:150px;<br /> width:90%;<br /> border: 5px solid green;<br /> }<br /> .hovered<br /> {<br /> border: 5px solid black;<br /> width:100%;<br /> }<br /> </style><br />
  21. 21. mouseenter, mouseleave<br /> function enterHandler()<br /> {<br /> $(this).toggleClass("hovered", true);<br /> }<br /> function leaveHandler()<br /> {<br /> $(this).toggleClass("hovered", false);<br /> }<br />$("div").mouseenter(enterHandler).<br />mouseleave(leaveHandler);<br />
  22. 22. animate – demo-09<br /> <style type="text/css"><br /> div {<br /> background:green;<br /> height:150px;<br /> width:150px;<br /> border: 5px solid green;<br /> }<br /> .hovered<br /> {<br /> border: 5px solid black;<br /> }<br /> </style><br />
  23. 23. animate<br /> function enterHandler()<br /> {<br /> $(this).animate({'width':'300px'}, 2000);<br /> }<br /> function leaveHandler()<br /> {<br /> $(this).animate({'width':'150px'}, 2000);<br /> }<br />

×