Intro to jQuery


Published on

ATLRUG Emerald City programming group
Saturday, March 12, 2011

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
  • Intro to jQuery

    1. 1. Intro to jQuery Alan Hecht Jason Noble
    2. 2. Benefits <ul><ul><li>Shallow learning curve, especially compared to other frameworks </li></ul></ul><ul><ul><ul><li>Easy to play with the DOM </li></ul></ul></ul><ul><ul><ul><li>Easily add simple effects </li></ul></ul></ul><ul><ul><li>Cross-browser Compatibility </li></ul></ul><ul><ul><ul><li>jQuery handles browser caveats for you </li></ul></ul></ul><ul><ul><li>CSS3 Selectors </li></ul></ul><ul><ul><li>Helpful Utilities </li></ul></ul>
    3. 3. Benefits (cont.) <ul><ul><li>jQuery UI </li></ul></ul><ul><ul><ul><li>Additional useful effects </li></ul></ul></ul><ul><ul><ul><li>Advanced UI widgets </li></ul></ul></ul><ul><ul><ul><li>UI Themes </li></ul></ul></ul><ul><ul><li>Plugins </li></ul></ul><ul><ul><ul><li>jQuery is easily extensible </li></ul></ul></ul><ul><ul><li>AJAX </li></ul></ul><ul><ul><li>Widespread adoption </li></ul></ul>
    4. 4. Firefox/Firebug Combo <ul><ul><li>Firefox </li></ul></ul><ul><ul><li>Firebug plugin </li></ul></ul><ul><ul><li>Enable the script console in order to execute JavaScript </li></ul></ul>
    5. 5. Let ’s get started <ul><ul><li>curl -o jquery-1.5.1.min.js </li></ul></ul><ul><ul><li>Go to </li></ul></ul><ul><ul><ul><li>Click on ‘Download( jQuery );’ </li></ul></ul></ul><ul><ul><ul><li>Right click and select ‘Save Page As…’ </li></ul></ul></ul>
    6. 6. JavaScript Good to know for jQuery <ul><ul><li>Functions </li></ul></ul><ul><ul><li>JavaScript Object Notation (JSON) </li></ul></ul>
    7. 7. JavaScript Functions <ul><ul><li>Functions can be anonymous </li></ul></ul>
    8. 8. JavaScript Functions <ul><ul><li>Functions can be assigned to variables </li></ul></ul><ul><ul><ul><li>Variables can be called like a function </li></ul></ul></ul>
    9. 9. JavaScript Object Notation (JSON) <ul><ul><li>Serialized JavaScript objects </li></ul></ul><ul><ul><li>Collection of key-value pairs which represent an object </li></ul></ul><ul><ul><li>Functions can be used as a value </li></ul></ul>
    10. 10. JavaScript Object Notation <ul><ul><li>Used to send data when making AJAX calls to the server </li></ul></ul>
    11. 11. Document Object Model (DOM) <ul><ul><li>Not specific to jQuery </li></ul></ul><ul><ul><li>Standard way of representing objects in HTML that all browsers follow </li></ul></ul><ul><ul><li>Hierarchal representation of your HTML </li></ul></ul><ul><ul><li>Parent and children elements </li></ul></ul><ul><ul><li>Each element can have an id and/or one or more class attributes </li></ul></ul>
    12. 12. HTML File
    13. 13. HTML File - DOM
    14. 14. Element id <ul><ul><li>Uniquely identifies the element </li></ul></ul><ul><li><div id= “footer”>Thanks for visiting</div> </li></ul><ul><ul><li>That div ’s id is “footer”. Should only be one “footer” id. </li></ul></ul>
    15. 15. Element class <ul><ul><li>Multiple page elements can have the same type of class </li></ul></ul><ul><li><p class= “warning”>Sorry….</p> </li></ul><ul><li><span class= “warning error”>Please try again</span> </li></ul><ul><ul><li>Classifies elements as a “warning” </li></ul></ul><ul><ul><li>Used to attach styles to elements </li></ul></ul><ul><ul><li>Multiple classes on an element are seperated by spaces </li></ul></ul>
    16. 16. CSS Selectors <ul><ul><li>Originally designed to select elements on an HTML page to be styled </li></ul></ul><ul><ul><li>jQuery uses CSS Selectors to create a set of one or more elements that will be the input to subsequent operations </li></ul></ul>
    17. 17. CSS Selectors <ul><ul><li># selects an element via id </li></ul></ul><ul><ul><ul><li>div#headingId </li></ul></ul></ul><ul><ul><ul><ul><li><div id= “headingId”> </li></ul></ul></ul></ul><ul><ul><li>. selects an element via class </li></ul></ul><ul><ul><ul><li>div.headingClass </li></ul></ul></ul><ul><ul><ul><ul><li><div class= “headingClass”> </li></ul></ul></ul></ul><ul><ul><li>Can select just an id or class </li></ul></ul><ul><ul><ul><li>#headingId .headingClass </li></ul></ul></ul><ul><ul><li>Can select an element, id, and a class </li></ul></ul><ul><ul><ul><li>div#headingId.headingClass </li></ul></ul></ul>
    18. 18. CSS Selectors <ul><ul><li>Bare words selects HTML tags </li></ul></ul><ul><ul><ul><li>span </li></ul></ul></ul><ul><ul><ul><ul><li><span> </li></ul></ul></ul></ul><ul><ul><li>Can filter on attributes within HTML tags </li></ul></ul><ul><ul><ul><li>input[type = ‘button’] </li></ul></ul></ul><ul><ul><ul><ul><li><input type=“button” /> </li></ul></ul></ul></ul>
    19. 19. CSS Selectors <ul><ul><li>Space between words specifies ancestor relationship </li></ul></ul><ul><ul><ul><li>table td </li></ul></ul></ul><ul><ul><li>. ‘>’ between words specifies parent/child relationship </li></ul></ul><ul><ul><ul><li>table>tr </li></ul></ul></ul>
    20. 20. jQuery Function <ul><ul><li>Adding jQuery to a HTML page gives you access to the jQuery function </li></ul></ul><ul><ul><ul><li>jQuery </li></ul></ul></ul><ul><ul><ul><li>jQuery(alert( ‘Hello’)) </li></ul></ul></ul><ul><ul><li>jQuery function is aliased as $, which is a common short-cut </li></ul></ul><ul><ul><ul><li>$ </li></ul></ul></ul><ul><ul><ul><li>$(alert( ‘Hello’)) </li></ul></ul></ul>
    21. 21. jQuery Selectors <ul><ul><li>$( ‘<CSS Selector>’) or jQuery(‘CSS Selector>’) </li></ul></ul><ul><ul><li>jQuery selectors can return an individual element or a set </li></ul></ul><ul><ul><li>$('p#first') - <p id=“first”> </li></ul></ul><ul><ul><li>$(‘table>tr’) - collection of <tr> elements </li></ul></ul>
    22. 22. jQuery Statements selector action parameters jQuery( ‘p’) .css (‘color’, ‘blue’); $( ‘p’) .css (‘color’, ‘blue’); $( ‘p’) .css (‘font-size’, ‘35px’); $( ‘p’ ) .html ( ‘<a href=“/foo”>Home</a>’ );
    23. 23. jQuery Statements <ul><ul><li>Statement actions can be chained </li></ul></ul><ul><ul><li>Each action performed on all members of the set </li></ul></ul><ul><ul><li>$('tr').css('font-size', '22pt').html( ‘Text’) </li></ul></ul>
    24. 24. Play with tables
    25. 25. jQuery filters <ul><ul><li>Filters certain elements </li></ul></ul><ul><ul><ul><li>$( ‘table tr: even ’) => Rows 0, 2, 4, 6… </li></ul></ul></ul><ul><ul><ul><li>$( ‘table tr: odd ’) => Rows 1, 3, 5, 7… </li></ul></ul></ul><ul><ul><ul><li>$( ‘table tr: first ’) => First row </li></ul></ul></ul><ul><ul><ul><li>$( ‘table tr: last ’) => Last row </li></ul></ul></ul><ul><ul><ul><li>$( ‘table tr: eq(3) ’) => Third row </li></ul></ul></ul>
    26. 26. Play with tables (cont.) $('table tr:even').css('background-color', 'lightgrey') $('table tr:first').css('font-size', '64pt') $('table tr td').filter(function(index) { return index % 3 == 2; }).css('color', 'red') Many more selectors:
    27. 27. jQuery Effects <ul><ul><li>jQuery library provides animation and effect calls, for example: </li></ul></ul><ul><ul><ul><li>fadeIn() </li></ul></ul></ul><ul><ul><ul><li>fadeOut() </li></ul></ul></ul><ul><ul><ul><li>show() </li></ul></ul></ul><ul><ul><ul><li>hide() </li></ul></ul></ul><ul><ul><ul><li>toggle() </li></ul></ul></ul><ul><ul><li> </li></ul></ul>
    28. 28. Document Ready Event <ul><ul><li>When our document is ready, run our function </li></ul></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><ul><li>Setup usually takes place in this event </li></ul></ul>
    29. 29. $(selector).click(…) <ul><ul><li>Executes code when a given div/button/etc is clicked </li></ul></ul><ul><ul><li>Set up in the document ready event </li></ul></ul>