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

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,017
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/

    ×