jQuery Awesomesauce
3 likes689 views
This document provides an introduction to jQuery, a JavaScript library. It explains what jQuery is, how it simplifies DOM manipulation and event handling in JavaScript. It demonstrates how jQuery uses CSS-style selectors to select elements and provides many methods for traversing, manipulating, animating, and handling events on the DOM. Examples are given to illustrate how jQuery makes tasks like hiding elements, modifying CSS, and binding events much simpler than traditional JavaScript approaches. Resources for learning more about jQuery and its capabilities are also provided.
![EVENTS
YOU’RE INVITED!
ere are several (read: many) to choose from.
// These are called "shortcut methods"
.blur(function(){...});
.click(...)
.mouseenter(...)
.hover(...)
.submit(...)
...
// Because they all map to this guy
.bind('click', [data], function([event]){...});
// Of note...
.one('click', [data], function([event]){...});](https://image.slidesharecdn.com/jqueryawesomesauce-100625101041-phpapp02/85/jQuery-Awesomesauce-11-320.jpg)
![EFFECTS
R E D L I G H T. G R E E N L I G H T.
Also several (read: many) to choose from.
// Some effects "shortcut methods"
.fadeIn();
.slideUp(...)
...
// And they all map to this guy
.animate(properties, [duration], [easing], [callback]);](https://image.slidesharecdn.com/jqueryawesomesauce-100625101041-phpapp02/85/jQuery-Awesomesauce-12-320.jpg)
jQuery Awesomesauce
- 1. jQUERY AWESOMESAUCE and other awesomeness PRESENTED FOR YOUR PLE ASURE with commentary by Sean Gaffney
- 2. HELLO. OH HAI! My name is Sean. I’m o en unsure of what to do with my hair. I help designers and rms communicate tiny details through G EEK! technology on the web. Basically, I’m an awesomeloper. Too much?
- 3. WHAT’S YOUR jQUERY? CALLER? CALLER, ARE YOU THERE? ★ jQuery is a JavaScript library ★ JavaScript is not jQuery ★ DOM, DOM, DOM... Elements and Events can get pretty hairy in traditional JavaScript, but jQuery makes it easy breezy.
- 4. HOW E-Z BREE-Z? LU K E , I ’ M Y O U R FA T H E R . Traditional JavaScript: if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('MyID').style.display = 'none'; } else { if (document.layers) { // Netscape 4 document.MyID.display = 'none'; } else { // IE 4 document.all.MyID.style.display = 'none'; } }
- 5. HOW E-Z BREE-Z? LU K E , I ’ M Y O U R FA T H E R . With jQuery: $('#MyID').hide(); // Wait, that’s it? // Yup. // Oh. Wow. // I know. // He must work out.
- 6. BUT WAIT. THERE’ S MORE. jQuery has support for lots of goodies: ★ Element selection, traversal and manipulation ★ Event binding ★ Animation effects ★ AJAX
- 7. THE SELECTOR CSS FTW! jQuery uses CSS-style selectors. // Pound for IDs $('#MyID').hide(); // Dot for classes $('div.myDiv').fadeIn(1000); // Raw HTML tags $('h1 a').attr('title','Take me home!'); // Pseudo-selectors, Extended $('ul li:last').css('border',0); $('#signupForm :checked').doAwesome();
- 8. SELECTOR OPTIMIZATION I J U S T. . . C A N ’ T. . . D O I T , C A P T A I N . Selectors can be very fast or very slow... // IDs are very fast, native to JS $('#header'); // Although this... $('#header').find('div.logo'); // is faster than $('#header div.logo'); // "Specific on the right, light on the left" $('.geoData td.columbia'); // as opposed to... $('table.geoData .columbia');
- 9. MANIPULATION Q U I T P L A Y I N G G A M E S W I T H M Y H E A R T. Let’s interact with some elements. // Add/remove classes $('.tab a').addClass('selected').removeClass('unselected'); // Modify CSS properties $('#header').css('color','#f00'); // Modify HTML $('.entry p:last').append('<p>The End.</p>'); $('body').html('<h1>Oops.</h1>'); // Create an element $('<a/>').appendTo('#header');
- 10. TRAVERSAL I ’ L L TA K E S W O R D S F O R $ 2 0 0 , T R E B E K . Need to move around the DOM? No problemo. // Move up the DOM until you hit x $('h1').doSomething().closest('#header').doSomethingElse(); // Grab the parent, then come back and get siblings $('li').parent().doIt().end().siblings().moreIt(); // Select the 3rd item in the object $('#theList li').eq(2);
- 11. EVENTS YOU’RE INVITED! ere are several (read: many) to choose from. // These are called "shortcut methods" .blur(function(){...}); .click(...) .mouseenter(...) .hover(...) .submit(...) ... // Because they all map to this guy .bind('click', [data], function([event]){...}); // Of note... .one('click', [data], function([event]){...});
- 12. EFFECTS R E D L I G H T. G R E E N L I G H T. Also several (read: many) to choose from. // Some effects "shortcut methods" .fadeIn(); .slideUp(...) ... // And they all map to this guy .animate(properties, [duration], [easing], [callback]);
- 13. jQUERY LESSONS LEARNED aka DEMO TIME INTERNET SLIDESHOW DWELLER S : My sincerest apologies that I’m unable share the live demo.
- 14. I CAN HAZ? G E T I T W H I L E I T ’ S H O T. http://jquery.com http://rebeccamurphey.com/jqfundamentals http://jqueryfordesigners.com http://paulirish.com/2009/perf/
- 15. MADE POSSIBLE IN PART BY: Official Documentation: http://api.jquery.com Slide format inspiration: http://www. ickr.com/photos/jasonsantamaria/ 311149672/sizes/o/
- 17. YO NUMBA? I CAN HAVE IT? Please don’t hesitate to provide feedback on this presentation or ask questions. anks! http://seangaffney.cc sean@seangaffney.cc @seangaffney