Intro to jQuery

  • 1,325 views
Uploaded on

ATLRUG Emerald City programming group …

ATLRUG Emerald City programming group
Saturday, March 12, 2011

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,325
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

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