Your SlideShare is downloading. ×
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Intro to jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to jQuery

1,365

Published on

ATLRUG Emerald City programming group …

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,365
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
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

    ×