Your SlideShare is downloading. ×
  • Like
Základy jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Základy jQuery

  • 2,875 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,875
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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