Intro to jQuery
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Intro to jQuery

on

  • 1,694 views

ATLRUG Emerald City programming group

ATLRUG Emerald City programming group
Saturday, March 12, 2011

Statistics

Views

Total Views
1,694
Views on SlideShare
1,694
Embed Views
0

Actions

Likes
0
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Presentation Transcript

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