Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to jQuery

Introduction to jQuery

This is a beginners presentation, which covers what it takes to get started - the 20% of the jQuery library that gives 80% of the benenifits.

958a901982720fedd3228bd42e992c1e?s=128

Dave Kiss

March 26, 2013
Tweet

More Decks by Dave Kiss

Other Decks in Programming

Transcript

  1. Introduction to jQuery @davekiss #jschi

  2. jQuery is a FRAMEWORK A collection of code “shortcuts” to

    more difficult code that allow for easier development. @davekiss #jschi
  3. jQuery is A collection of code “shortcuts” to more difficult

    code that allow for easier development. a FRAMEWORK Javascript All of the things that jQuery does CAN BE and ARE done in Javascript @davekiss #jschi
  4. jQuery is used on over 63% of the top 10,000

    websites. @shayhowe, via http://trends.builtwith.com @davekiss #jschi
  5. sliders @davekiss #jschi

  6. Galleries @davekiss #jschi

  7. layouts @davekiss #jschi

  8. Tooltips @davekiss #jschi

  9. Validation @davekiss #jschi

  10. using jQuery @davekiss #jschi

  11. put it on your page <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> @davekiss #jschi

  12. <!DOCTYPE html> <html> <head> <title>My Doggies</title> </head> <body> <img src=”dexter.jpg”

    class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> @davekiss #jschi
  13. getting ready $(document).ready(function(){ }); @davekiss #jschi

  14. jquery == $ $(document).ready(function(){ }); $ @davekiss #jschi

  15. jquery selectors $(document).ready(function(){ }); A selector indicates the item(s) that

    we are referencing during a jQuery call. @davekiss #jschi
  16. jquery events $(document).ready(function(){ }); An event describes what we're waiting

    for to happen to the selector so that we can perform a resulting action. @davekiss #jschi
  17. jquery actions $(document).ready(function(){ }); An action is what we're going

    to do once the event occurs @davekiss #jschi
  18. cause|effect @davekiss #jschi

  19. take a guess $(document).ready(function(){ }); @davekiss #jschi

  20. How do i select an element? How don’t you? ID

    Class Form Filters Custom Multiple Element Attribute Hierarchical Pseudo-Class @davekiss #jschi
  21. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(‘.dog’) @davekiss #jschi
  22. what kind of things can you do? What can’t you

    do? Change the position Add a border Create a tooltip Edit the attributes Modify a class Fade it out Get the height Submit a form Remove it Swap the text @davekiss #jschi
  23. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(‘.dog’).fadeOut(); @davekiss #jschi
  24. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(‘.dog’).fadeOut(); @davekiss #jschi
  25. $(thing).event(function() { $(another-thing).action(); }); @davekiss #jschi

  26. nested events Allow us to wait for, or “listen” for

    another event to happen inside of the original event. @davekiss #jschi
  27. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> @davekiss #jschi
  28. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ $(‘img’).click(function(){ }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> @davekiss #jschi
  29. this keyword Use “this” to select the element which was

    referenced inside of the original selector. @davekiss #jschi
  30. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ $(‘img’).click(function(){ }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(this) @davekiss #jschi
  31. jquery traversal A way to indirectly select an element(s) by

    describing it relative to other elements. @davekiss #jschi
  32. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ $(‘img’).click(function(){ }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(this).siblings() @davekiss #jschi
  33. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ $(‘img’).click(function(){ }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(this).siblings().fadeOut(); @davekiss #jschi
  34. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ $(‘img’).click(function(){ }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” alt=”Adorable dog” /> <img src=”kima.jpg” class=”dog” alt=”Ridiculous dog” /> </body> </html> $(this).siblings().fadeOut(); @davekiss #jschi
  35. practical examples Animating menus Fading thumbnails Filtering search results Calculating

    position values Changing colors in the UI Providing user feedback Using plugins @davekiss #jschi
  36. thank you Resources http://jsforcats.com http://stackoverflow.com http://learn.shayhowe.com http://oscarotero.com/jquery http://www.appliedjquery.com

  37. custom selectors Allow you to add your own rules and

    criteria for selecting elements on the page. @davekiss #jschi
  38. custom selectors Allow you to add your own rules and

    criteria for selecting elements on the page. @davekiss #jschi
  39. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ $.extend($.expr[“:”], { troublemaker: function(e) { return $(e).attr(‘data-trouble’) > 8; } }); $(‘.dog:troublemaker’).click(function(){ $(this).after(‘<p>I am sorry :(</p>’); }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” data-trouble=”10” /> <img src=”kima.jpg” class=”dog” data-trouble=”6” /> </body> </html> @davekiss #jschi
  40. <!DOCTYPE html> <html> <head> <title>My Doggies</title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script>

    $(document).ready(function(){ $.extend($.expr[“:”], { troublemaker: function(e) { return $(e).attr(‘data-trouble’) > 8; } }); $(‘.dog:troublemaker’).click(function(){ $(this).after(‘<p>I am sorry :(</p>’); }); }); </script> </head> <body> <img src=”dexter.jpg” class=”dog” data-trouble=”10” /> <img src=”kima.jpg” class=”dog” data-trouble=”6” /> </body> </html> @davekiss #jschi I am sorry :(