jQuery Intro


Published on

Intro to jQuery talk given to Atlanta.PM 1/27/2010

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Body has two child elements, an h1 and a p. Body is the h1 ’s parent, h1 is a child of body
  • jQuery Intro

    1. 1. jQuery Jason Noble http:// jasonnoble.org Code Download: http://jasonnoble.org/jquery/jquery.zip
    2. 2. History <ul><li>John Resig hints of a JavaScript library to use CSS selectors with a more succint syntax than existing libraries (2005) </li></ul><ul><li>First release January 2006 </li></ul>
    3. 3. Benefits <ul><li>Easy to play with the DOM </li></ul><ul><li>Add JS effects </li></ul><ul><li>AJAX </li></ul><ul><li>Cross-browser Compatibility </li></ul><ul><ul><li>jQuery handles browser caveats for you </li></ul></ul><ul><li>CSS3 Selectors </li></ul><ul><li>Helpful Utilities </li></ul>
    4. 4. Benefits (cont.) <ul><li>jQuery UI </li></ul><ul><ul><li>Useful effects </li></ul></ul><ul><ul><li>Advanced UI widgets </li></ul></ul><ul><ul><li>UI Themes </li></ul></ul><ul><li>Plugins </li></ul><ul><ul><li>jQuery is easily extensible </li></ul></ul><ul><li>Widespread adoption </li></ul>
    5. 5. Firefox/Firebug Combo <ul><li>Firefox </li></ul><ul><li>Firebug plugin </li></ul>
    6. 6. Let ’s get Started <ul><li>curl -o jquery-1.4.4.min.js http://code.jquery.com/jquery-1.4.4.min.js </li></ul><ul><li>vi hello.html </li></ul>
    7. 7. jQuery Function <ul><li>Adding jQuery to a HTML page gives you access to the jQuery function </li></ul><ul><ul><li>jQuery </li></ul></ul><ul><ul><li>jQuery(alert( ‘Hello’)) </li></ul></ul><ul><li>jQuery function is aliased as $ </li></ul><ul><ul><li>$ </li></ul></ul><ul><ul><li>$(alert( ‘Hello’)) </li></ul></ul>
    8. 8. Document Object Model (DOM) <ul><li>Not specific to jQuery </li></ul><ul><li>Standard way of representing objects in HTML that all browsers follow </li></ul><ul><li>Hierarchal representation of your HTML </li></ul><ul><li>Parent and children elements </li></ul><ul><li>Each element can have an id and/or one or more class attributes </li></ul>
    9. 9. DOM (Cont.)
    10. 10. Elements id <ul><li>Uniquely identifies the element </li></ul><ul><li><div id= “footer”>Thanks for visiting</div> </li></ul><ul><li>That div’s id is “footer”. Should only be one “footer” id. </li></ul>
    11. 11. Elements class <ul><li>Multiple page elements can have the same type of class </li></ul><ul><li><p class= “warning”>Sorry….</p> </li></ul><ul><li><span class= “warning error”>Please try again</span> </li></ul><ul><li>Classifies elements as a “warning” </li></ul><ul><li>Multiple classes on an element are seperated by spaces </li></ul>
    12. 12. CSS Selectors <ul><li># selects an element via id </li></ul><ul><ul><li>div#heading </li></ul></ul><ul><ul><ul><li><div id= “heading”> </li></ul></ul></ul><ul><li>. selects an element via class </li></ul><ul><ul><li>div.heading </li></ul></ul><ul><ul><ul><li><div class= “heading”> </li></ul></ul></ul><ul><li>Bare words selects HTML tags </li></ul><ul><ul><li>span </li></ul></ul><ul><ul><ul><li><span> </li></ul></ul></ul>
    13. 13. Update our HTML
    14. 14. jQuery Statements <ul><li>selector action parameters </li></ul><ul><li>jQuery( ‘p’) .css (‘color’, ‘blue’); </li></ul><ul><li>$( ‘p’) .css (‘color’, ‘blue’); </li></ul><ul><li>$( ‘p’) .css (‘font-size’, ‘35px’); </li></ul>
    15. 15. jQuery Statements <ul><li>$('#one').css('color', 'green'); </li></ul><ul><li>$('.not_first').css('font-size', '22pt'); </li></ul><ul><li>$('p.first').html('This is better'); </li></ul>
    16. 16. Document Ready Event <ul><li>When our document is ready, run our function </li></ul><ul><li><script> </li></ul><ul><li>$(document).ready(function() { </li></ul><ul><li>alert( ‘Welcome to my page!’); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul><ul><li>This is a fairly common code snippet </li></ul>
    17. 17. Play with tables
    18. 18. jQuery filters <ul><li>Removes certain elements </li></ul><ul><ul><li>$( ‘table tr: even ’) # => 0, 2, 4, 6… </li></ul></ul><ul><ul><li>$( ‘table tr: odd ’) # => 1, 3, 5, 7… </li></ul></ul><ul><ul><li>$( ‘table tr: first ’) # => 0 </li></ul></ul><ul><ul><li>$( ‘table tr: last ’) # => Last row </li></ul></ul><ul><ul><li>$( ‘table tr: eq(3) ’) # => Third row </li></ul></ul>
    19. 19. Play with tables (cont.) <ul><li>$('table tr:even').css('background-color', 'lightgrey') </li></ul><ul><li>$('table tr:first').css('font-size', '64pt') </li></ul><ul><li>$('table tr td').filter(function(index) { </li></ul><ul><li>return index % 3 == 2; </li></ul><ul><li>}).css('color', 'red') </li></ul><ul><li>Many more selectors: http://api.jquery.com/category/selectors/ </li></ul>
    20. 20. Playing with Ajax <ul><li>Asynchronous JavaScript and XML </li></ul><ul><li>Allows you to update elements on your page without refreshing the entire page </li></ul><ul><li>Google suggest was one of the first sites to use it (2005) </li></ul>
    21. 21. load.html
    22. 22. Ajax Content
    23. 23. ajaxStart / ajaxStop <ul><li>$(document).ajaxStart(…) </li></ul><ul><ul><li>Called when an ajax request is started </li></ul></ul><ul><li>$(document).ajaxStop(…) </li></ul><ul><ul><li>Called when an ajax request is complete </li></ul></ul>
    24. 24. $(selector).click(…) <ul><li>Executes code when a given div/button/etc is clicked </li></ul>
    25. 25. Username Validation <ul><li>Uses a jQuery plugin (jquery.validate) </li></ul><ul><li>http://bassistance.de/jquery-plugins/jquery-plugin-validation/ </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.