Intro to jQuery Alan Hecht http://alanhecht.me Jason Noble http://jasonnoble.org
Benefits <ul><ul><li>Shallow learning curve, especially compared to other frameworks </li></ul></ul><ul><ul><ul><li>Easy t...
Benefits (cont.) <ul><ul><li>jQuery UI </li></ul></ul><ul><ul><ul><li>Additional useful effects </li></ul></ul></ul><ul><u...
Firefox/Firebug Combo <ul><ul><li>Firefox </li></ul></ul><ul><ul><li>Firebug plugin </li></ul></ul><ul><ul><li>Enable the ...
Let ’s get started <ul><ul><li>curl -o jquery-1.5.1.min.js  http://code.jquery.com/jquery-1.5.1.min.js </li></ul></ul><ul>...
JavaScript Good to know for jQuery <ul><ul><li>Functions </li></ul></ul><ul><ul><li>JavaScript Object Notation (JSON) </li...
JavaScript Functions <ul><ul><li>Functions can be anonymous </li></ul></ul>
JavaScript Functions <ul><ul><li>Functions can be assigned to variables </li></ul></ul><ul><ul><ul><li>Variables can be ca...
JavaScript Object Notation (JSON) <ul><ul><li>Serialized JavaScript objects </li></ul></ul><ul><ul><li>Collection of key-v...
JavaScript Object Notation <ul><ul><li>Used to send data when making AJAX calls to the server </li></ul></ul>
Document Object Model (DOM) <ul><ul><li>Not specific to jQuery </li></ul></ul><ul><ul><li>Standard way of representing obj...
HTML File
HTML File - DOM
Element id <ul><ul><li>Uniquely identifies the element </li></ul></ul><ul><li><div id= “footer”>Thanks for visiting</div> ...
Element class <ul><ul><li>Multiple page elements can have the same type of class </li></ul></ul><ul><li><p class= “warning...
CSS Selectors <ul><ul><li>Originally designed to select elements on an HTML page to be styled </li></ul></ul><ul><ul><li>j...
CSS Selectors <ul><ul><li># selects an element via id </li></ul></ul><ul><ul><ul><li>div#headingId </li></ul></ul></ul><ul...
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...
CSS Selectors <ul><ul><li>Space between words specifies ancestor relationship </li></ul></ul><ul><ul><ul><li>table td </li...
jQuery Function <ul><ul><li>Adding jQuery to a HTML page gives you access to the jQuery function </li></ul></ul><ul><ul><u...
jQuery Selectors <ul><ul><li>$( ‘<CSS Selector>’) or jQuery(‘CSS Selector>’) </li></ul></ul><ul><ul><li>jQuery selectors c...
jQuery Statements selector action parameters jQuery( ‘p’) .css (‘color’, ‘blue’); $( ‘p’) .css (‘color’, ‘blue’); $( ‘p’) ...
jQuery Statements <ul><ul><li>Statement actions can be chained </li></ul></ul><ul><ul><li>Each action performed on all mem...
Play with tables
jQuery filters <ul><ul><li>Filters certain elements </li></ul></ul><ul><ul><ul><li>$( ‘table tr: even ’)  => Rows 0, 2, 4,...
Play with tables (cont.) $('table tr:even').css('background-color', 'lightgrey') $('table tr:first').css('font-size', '64p...
jQuery Effects <ul><ul><li>jQuery library provides animation and effect calls, for example: </li></ul></ul><ul><ul><ul><li...
Document Ready Event <ul><ul><li>When our document is ready,  run our function </li></ul></ul><ul><li><script> </li></ul><...
$(selector).click(…) <ul><ul><li>Executes code when a given div/button/etc is clicked </li></ul></ul><ul><ul><li>Set up in...
Upcoming SlideShare
Loading in...5
×

Intro to jQuery

1,388

Published on

ATLRUG Emerald City programming group
Saturday, March 12, 2011

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,388
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
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 http://alanhecht.me Jason Noble http://jasonnoble.org
    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 http://code.jquery.com/jquery-1.5.1.min.js </li></ul></ul><ul><ul><li>Go to jquery.com </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: http://api.jquery.com/category/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>http://api.jquery.com/category/effects </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>
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×