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
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)
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.
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
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/
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
CONTACT ----- http://mindymcadams.com/ ----- Lecture by Mindy McAdams, University of Florida. Updated March 2014.
SOURCE http://try.jquery.com/
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. http://api.jquery.com/hover/ .click()Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element. http://api.jquery.com/click/ Will not work if #target is added later.$("#target").click(function() {alert("Handler for .click() called.");});http://api.jquery.com/click/
(this) refers to the button, in this case.
Mouse events
http://api.jquery.com/mouseleave/ 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:http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.htm 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. http://api.jquery.com/on/
https://github.com/macloo/jquery_exercises
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
SOURCE http://jquerymobile.com/
SOURCE http://jquerymobile.com/
Return to what was covered in Code School
https://github.com/macloo/jquery_exercises
See “Using CSS animations”: https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animationsFor more complex animations, see JavaScript timer functions (can use with jQuery): https://developer.mozilla.org/en-US/docs/JavaScript/Timers jQuery documentation: http://api.jquery.com/animate/