Your SlideShare is downloading. ×
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
jQuery Intro
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

jQuery Intro

2,024

Published on

Intro to jQuery talk given to Atlanta.PM 1/27/2010

Intro to jQuery talk given to Atlanta.PM 1/27/2010

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
2,024
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
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. jQuery Jason Noble http:// jasonnoble.org Code Download: http://jasonnoble.org/jquery/jquery.zip
    • 2. History
      • John Resig hints of a JavaScript library to use CSS selectors with a more succint syntax than existing libraries (2005)
      • First release January 2006
    • 3. Benefits
      • Easy to play with the DOM
      • Add JS effects
      • AJAX
      • Cross-browser Compatibility
        • jQuery handles browser caveats for you
      • CSS3 Selectors
      • Helpful Utilities
    • 4. Benefits (cont.)
      • jQuery UI
        • Useful effects
        • Advanced UI widgets
        • UI Themes
      • Plugins
        • jQuery is easily extensible
      • Widespread adoption
    • 5. Firefox/Firebug Combo
      • Firefox
      • Firebug plugin
    • 6. Let ’s get Started
      • curl -o jquery-1.4.4.min.js http://code.jquery.com/jquery-1.4.4.min.js
      • vi hello.html
    • 7. jQuery Function
      • Adding jQuery to a HTML page gives you access to the jQuery function
        • jQuery
        • jQuery(alert( ‘Hello’))
      • jQuery function is aliased as $
        • $
        • $(alert( ‘Hello’))
    • 8. 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
    • 9. DOM (Cont.)
    • 10. Elements id
      • Uniquely identifies the element
      • <div id= “footer”>Thanks for visiting</div>
      • That div’s id is “footer”. Should only be one “footer” id.
    • 11. Elements 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”
      • Multiple classes on an element are seperated by spaces
    • 12. CSS Selectors
      • # selects an element via id
        • div#heading
          • <div id= “heading”>
      • . selects an element via class
        • div.heading
          • <div class= “heading”>
      • Bare words selects HTML tags
        • span
          • <span>
    • 13. Update our HTML
    • 14. jQuery Statements
      • selector action parameters
      • jQuery( ‘p’) .css (‘color’, ‘blue’);
      • $( ‘p’) .css (‘color’, ‘blue’);
      • $( ‘p’) .css (‘font-size’, ‘35px’);
    • 15. jQuery Statements
      • $('#one').css('color', 'green');
      • $('.not_first').css('font-size', '22pt');
      • $('p.first').html('This is better');
    • 16. Document Ready Event
      • When our document is ready, run our function
      • <script>
      • $(document).ready(function() {
      • alert( ‘Welcome to my page!’);
      • });
      • </script>
      • This is a fairly common code snippet
    • 17. Play with tables
    • 18. jQuery filters
      • Removes certain elements
        • $( ‘table tr: even ’) # => 0, 2, 4, 6…
        • $( ‘table tr: odd ’) # => 1, 3, 5, 7…
        • $( ‘table tr: first ’) # => 0
        • $( ‘table tr: last ’) # => Last row
        • $( ‘table tr: eq(3) ’) # => Third row
    • 19. 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/
    • 20. Playing with Ajax
      • Asynchronous JavaScript and XML
      • Allows you to update elements on your page without refreshing the entire page
      • Google suggest was one of the first sites to use it (2005)
    • 21. load.html
    • 22. Ajax Content
    • 23. ajaxStart / ajaxStop
      • $(document).ajaxStart(…)
        • Called when an ajax request is started
      • $(document).ajaxStop(…)
        • Called when an ajax request is complete
    • 24. $(selector).click(…)
      • Executes code when a given div/button/etc is clicked
    • 25. Username Validation
      • Uses a jQuery plugin (jquery.validate)
      • http://bassistance.de/jquery-plugins/jquery-plugin-validation/

    ×