Beginning jQuery part 2
-
Upload
mindy-mcadams -
Category
Education
-
view
2.157 -
download
1
description
Transcript of Beginning jQuery part 2
![Page 1: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/1.jpg)
Beginning jQuery (part 2)
Review of the Code School course“Try jQuery” (parts 4–5)
![Page 3: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/3.jpg)
Simple Interactions
$('#pushie').click(function() {// some code here// more code
});
$('#apple').hover(function() {// some code here// more code
});
![Page 4: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/4.jpg)
“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 .confirmationWhen 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.
![Page 5: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/5.jpg)
$('.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)
![Page 6: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/6.jpg)
Event Handlers: Mouse Events
What are we “listening” for?
• click• dblclick• focusin• focusout• mousedown• mouseup
• mouseenter• mouseleave• mousemove• mouseout• mouseover
![Page 7: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/7.jpg)
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.
![Page 8: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/8.jpg)
$("#states").on("mouseenter mouseleave",
We will do an exercise (later) that uses this.
Instead of hover
https://github.com/macloo/jquery_exercises
![Page 9: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/9.jpg)
More Event Handlers
Keyboard events
• keydown• keypress• keyup
Form events
• blur • change • focus • select • submit
![Page 10: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/10.jpg)
What about touch and swipe events?
![Page 13: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/13.jpg)
But back to our beginner lessons …
![Page 14: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/14.jpg)
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
![Page 15: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/15.jpg)
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');
![Page 16: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/16.jpg)
.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.
![Page 17: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/17.jpg)
$('#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
![Page 18: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/18.jpg)
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 );
![Page 19: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/19.jpg)
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!
![Page 20: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/20.jpg)
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/
![Page 21: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/21.jpg)
jQuery vs. CSSMaybe 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
![Page 22: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/22.jpg)
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;
![Page 23: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/23.jpg)
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
![Page 24: Beginning jQuery part 2](https://reader035.fdocuments.net/reader035/viewer/2022062418/5549b7bab4c905e5048b4b65/html5/thumbnails/24.jpg)
Beginning jQuery (part 2)
Review of the Code School course“Try jQuery” (parts 4–5)