Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Beginning jQuery (part 2)
Review of the Code School course
“Try jQuery” (parts 4–5)
Review of Levels 4–5
http://try.jquery.com/
Simple Interactions
$('#pushie').click(function() {
// some code here
// more code
});
$('#apple').hover(function() {
// s...
“Event handlers” are different
$('.confirmation').on('click', 'button', function() {
$(this).closest('.confirmation').find...
$('.confirmation').on('click', 'button', function() {
// some code here
});
$('button').on('click', function() {
// some c...
Event Handlers: Mouse Events
What are we “listening” for?
• click
• dblclick
• focusin
• focusout
• mousedown
• mouseup
• ...
Mouse Events
• There is no hover that can be used with
.on() — there was, in an older version of
jQuery, but not anymore.
...
$("#states").on("mouseenter mouseleave",
We will do an exercise (later) that uses this.
Instead of hover
https://github.co...
More Event Handlers
Keyboard events
• keydown
• keypress
• keyup
Form events
• blur
• change
• focus
• select
• submit
What about touch and swipe events?
http://jquerymobile.com/
http://jquerymobile.com/
But back to our beginner lessons …
Fading and Sliding!
.fadeIn()
.fadeOut()
.fadeToggle()
.slideIn()
.slideOut()
.slideToggle()
We’ll do two exercises
with t...
Styling
• Do not stick a lot of CSS styles into your jQuery functions:
$(this).css('background-color', '#252b30');
$(this)...
.animate()
$('#vacations').on('click', '.vacation', function() {
$(this).toggleClass('highlighted');
$(this).animate( {'to...
$('#vacations').on('click', '.vacation', function() {
$(this).toggleClass('highlighted');
if($(this).hasClass('highlighted...
Control the speed
$(this).animate( {'top': '-10px'}, 400 );
$(this).animate( {'top': '-10px'}, 'fast' );
$(this).animate( ...
Animate more than one thing
$(this).find('.per-night').animate(
{'opacity': '1', 'top':'-14px' } );
Basically, you can ani...
However!
• Direct CSS transitions are faster than jQuery:
http://stackoverflow.com/questions/10984771/whats-faster-css3-
t...
jQuery vs. CSS
Maybe you didn’t know about CSS3 transitions …
#apple {
width: 100px;
height: 100px;
transition: width 2s, ...
CSS3 transitions need more code
transition: width 2s, height 2s;
/* Firefox */
-moz-transition: width 2s, height 2s,
-moz-...
jQuery vs. CSS
Again, we’ll do two
exercises to learn
more about
animation in the
browser.
With jQuery:
animate.html
Witho...
Beginning jQuery (part 2)
Review of the Code School course
“Try jQuery” (parts 4–5)
Upcoming SlideShare
Loading in …5
×

Beginning jQuery part 2

3,309 views

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

Published in: Education
  • My struggles with my dissertation were long gone since the day I contacted Emily for my dissertation help. Great assistance by guys from ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • See part 1: http://www.slideshare.net/macloo/j-query-review1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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 http://try.jquery.com/
  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 https://github.com/macloo/jquery_exercises
  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. http://jquerymobile.com/
  12. 12. http://jquerymobile.com/
  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 https://github.com/macloo/jquery_exercises
  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: 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. 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. 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 https://github.com/macloo/jquery_exercises
  24. 24. Beginning jQuery (part 2) Review of the Code School course “Try jQuery” (parts 4–5)

×