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: https://github.com/macloo/jquery_exercises

1. Beginning jQuery (part 2)
Review of the Code School course
“Try jQuery” (parts 4–5)

2. Review of Levels 4–5
http://try.jquery.com/

3. Simple Interactions
$('#pushie').click(function() {
// some code here
// more code
});
$('#apple').hover(function() {
// some code here
// more code
});

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. $('.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. Event Handlers: Mouse Events
What are we “listening” for?
• click
• dblclick
• focusin
• focusout
• mousedown
• mouseup
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover

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. $("#states").on("mouseenter mouseleave",
We will do an exercise (later) that uses this.
Instead of hover
https://github.com/macloo/jquery_exercises

9. More Event Handlers
Keyboard events
• keydown
• keypress
• keyup
Form events
• blur
• change
• focus
• select
• submit

10. What about touch and swipe events?

11. http://jquerymobile.com/

12. http://jquerymobile.com/

13. But back to our beginner lessons …

14. Fading and Sliding!
.fadeIn()
.fadeOut()
.fadeToggle()
.slideIn()
.slideOut()
.slideToggle()
We’ll do two exercises
with these, later.
hideslidefade.html
slideToggle.html
https://github.com/macloo/jquery_exercises

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. .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. $('#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. 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. 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. However!
• Direct CSS transitions are faster than jQuery:
http://stackoverflow.com/questions/10984771/whats-faster-css3-
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?
http://api.jquery.com/animate/ (Lots of examples here)
• CSS transitions – demos and more:
http://css3.bradshawenterprises.com/transitions/

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;
}
https://github.com/macloo/jquery_exercises

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. 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
https://github.com/macloo/jquery_exercises

24. Beginning jQuery (part 2)
Review of the Code School course
“Try jQuery” (parts 4–5)