Beginning jQuery part 2


Published on

Introduction to jQuery (for journalism students) and review of the Code School "Try jQuery" course, Parts 4-5. Revised in March 2014. New exercises available on GitHub:

Published in: Education
1 Comment
  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • CONTACT ----- ----- Lecture by Mindy McAdams, University of Florida. Updated March 2014.
  • This is the simplest kind of interaction – you bind the function directly to one single element on the page. .hover()Description: Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. .click()Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element. Will not work if #target is added later.$("#target").click(function() {alert("Handler for .click() called.");});
  • (this) refers to the button, in this case.
  • Mouse events
  • mouseout and mouseleave do not work the same way. It seems mouseleave is preferable.mouseover and mouseenter have the same issues, and mouseenter is preferable.Support for using only mouseenter and mouseleave: In jQuery, hover actually combines both events into one (same source).So, use hover. BUT NOT WITH .on() —Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseentermouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
  • Before, we saw a long list of MOUSE events. They only respond to mouse actions. These respond to keypresses and – the form events – to actions we take within an HTML form.
  • Mobile has different EVENTS
  • Return to what was covered in Code School
  • See “Using CSS animations”: more complex animations, see JavaScript timer functions (can use with jQuery): jQuery documentation:
  • Folder: css_animation
  • Folder: css_animation
  • CONTACT ----- ----- Lecture by Mindy McAdams, University of Florida. Updated March 2014.
  • Beginning jQuery part 2

    1. 1. Beginning jQuery (part 2) Review of the Code School course “Try jQuery” (parts 4–5)
    2. 2. Review of Levels 4–5
    3. 3. Simple Interactions $('#pushie').click(function() { // some code here // more code }); $('#apple').hover(function() { // some code here // more code });
    4. 4. “Event handlers” are different $('.confirmation').on('click', 'button', function() { $(this).closest('.confirmation').find('.ticket').slideDown(); }); An event handler always includes .on() In this example, .confirmation is a DIV or other container. Inside the container are one or more buttons. The handler “listens” for a click on any button inside any element with the class .confirmation When a click occurs, in this case jQuery travels “up” the DOM to find .confirmation and then “down” the DOM to find .ticket — then it reveals (shows) the .ticket element with a sliding motion.
    5. 5. $('.confirmation').on('click', 'button', function() { // some code here }); $('button').on('click', function() { // some code here }); These two are different: The first one “listens” only to the .confirmation element(s). The second one listens to every button element on the whole page. (The second one is not efficient.) Event Handlers (2)
    6. 6. Event Handlers: Mouse Events What are we “listening” for? • click • dblclick • focusin • focusout • mousedown • mouseup • mouseenter • mouseleave • mousemove • mouseout • mouseover
    7. 7. Mouse Events • There is no hover that can be used with .on() — there was, in an older version of jQuery, but not anymore. • So, we use "mouseenter mouseleave" to achieve the same effect as hover. • Note: Even though mouseover seems similar to mouseenter, and mouseout seems similar to mouseleave, do not use them.
    8. 8. $("#states").on("mouseenter mouseleave", We will do an exercise (later) that uses this. Instead of hover
    9. 9. More Event Handlers Keyboard events • keydown • keypress • keyup Form events • blur • change • focus • select • submit
    10. 10. What about touch and swipe events?
    11. 11.
    12. 12.
    13. 13. But back to our beginner lessons …
    14. 14. Fading and Sliding! .fadeIn() .fadeOut() .fadeToggle() .slideIn() .slideOut() .slideToggle() We’ll do two exercises with these, later. hideslidefade.html slideToggle.html
    15. 15. Styling • Do not stick a lot of CSS styles into your jQuery functions: $(this).css('background-color', '#252b30'); $(this).css('border-color', '1px solid #967'); • Instead, you should put CSS styles in your stylesheet (where they belong), and use them like this: $(this).addClass('highlight'); $(this).removeClass('highlight'); • You can also toggle styles: $(this).toggleClass('highlight');
    16. 16. .animate() $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); $(this).animate( {'top': '-10px'} ); }); Here, jQuery will make the element with the class .vacation slide up (but not disappear) on the page, by 10 pixels, when it has been clicked. Note: The element needs to have position set to relative in the CSS, or this won’t work.
    17. 17. $('#vacations').on('click', '.vacation', function() { $(this).toggleClass('highlighted'); if($(this).hasClass('highlighted')) { $(this).animate({'top': '-10px'}); } else { $(this).animate({'top': '0px'}); } }); Here we see an if statement inside the jQuery function. It plays off the .toggleClass() method, which adds/removes ‘highlighted’ (from Code School lessons). Reverse the animation
    18. 18. Control the speed $(this).animate( {'top': '-10px'}, 400 ); $(this).animate( {'top': '-10px'}, 'fast' ); $(this).animate( {'top': '-10px'}, 200 ); $(this).animate( {'top': '-10px'}, 'slow' ); $(this).animate( {'top': '-10px'}, 600 );
    19. 19. Animate more than one thing $(this).find('.per-night').animate( {'opacity': '1', 'top':'-14px' } ); Basically, you can animate anything that you can change or control with CSS. Because—ahem!—CSS is doing the animation!
    20. 20. However! • Direct CSS transitions are faster than jQuery: transitions-or-jquery-animations • You have more control with jQuery (but it will be slower overall). Less code with jQuery. • So you need to judge: CSS, or jQuery? (Lots of examples here) • CSS transitions – demos and more:
    21. 21. jQuery vs. CSS Maybe you didn’t know about CSS3 transitions … #apple { width: 100px; height: 100px; transition: width 2s, height 2s; /* Firefox */ -moz-transition: width 2s, height 2s, -moz-transform 2s; /* Safari and Chrome */ -webkit-transition: width 2s, height 2s, -webkit- transform 2s; /* Opera */ -o-transition: width 2s, height 2s, -o-transform 2s; }
    22. 22. CSS3 transitions need more code transition: width 2s, height 2s; /* Firefox */ -moz-transition: width 2s, height 2s, -moz-transform 2s; /* Safari and Chrome */ -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Opera */ -o-transition: width 2s, height 2s, -o-transform 2s;
    23. 23. jQuery vs. CSS Again, we’ll do two exercises to learn more about animation in the browser. With jQuery: animate.html Without jQuery: animation_with_css.html
    24. 24. Beginning jQuery (part 2) Review of the Code School course “Try jQuery” (parts 4–5)