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 />  ...
Upcoming SlideShare
Loading in …5
×

Základy jQuery

3,466 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,466
On SlideShare
0
From Embeds
0
Number of Embeds
727
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×