Your SlideShare is downloading. ×
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,360

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

    ×