Your SlideShare is downloading. ×
  • Like
Getting Started with jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Getting Started with jQuery

  • 419 views
Published

 

Published in Technology , Education
  • 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
419
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
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

Transcript

  • 1. Getting Started with jQuery Pimpify Your Pages
  • 2. What it does
      • Cross browser compatibility
      • Allows document manipulation
      • Adds effects
      • Enables simple Ajax
  • 3. Whats the first step
      • Include the library files
    •  
    •  
    • for development
    •  
    • <script src=&quot;jquery-1.3.2.js&quot;></script>
    • or for production
    • <script src=&quot;jquery-1.3.2.min.js&quot;></script>
  • 4. Prepare for takeoff
    • $(document).ready(function() {
    •     
    •     // code in here runs when the document is ready
    •  
    • });
  • 5. Querying the DOM
      • Tag
      • ID
      • Class (and pseudo classes)
    Three methods exist
  • 6. Select by Tag
      • Any tag type can be targeted
    •  
    • div, li, a, b, span, td, body
    • $('div')
  • 7. Select by ID
      • A tag with an ID attribute
    •  
    •  
    •  
    • <div id=&quot;foo&quot;>
    • $('#foo')
  • 8. Select by Class
    • A tag containing a matching class attribute
    • <div class=&quot;foo bar&quot;>
    • $('.foo')
  • 9. Using pseudo selectors
    • Pseudo classes for finding elements on characteristics other than their name, attributes or content.
    •  
    •  
    • $('div:visible')
    • $('li:first')
    • $('.sentence:first-letter')
  • 10. Selector filtering
    • Can filter results by an attribute
    • $('input[type=submit])
  • 11. Woah!
    • Pause for commercial break
    • Any questions or comments?
  • 12. Altering a documents elements
    • Once an element is selected, handlers are used to modify the element.
  • 13. Common uses
    •  
    • Change style
    • $('li:even').css('background-color','#f00');
    • Add or Change class
    • $('li:even').addClass('red');
    •  
    • Set other attributes
    • $('li:even').attr('style','background-color: #f00;');
  • 14. Adding to a documents elements
    •  
    •  
    • $('body').append('<div id=&quot;woah&quot;></div>');
  • 15. Got the munchies yet?
    • Get a slice of pizza and lets play with some code...
  • 16. Events
    • Events are triggered based on user interaction, browser actions and system processes.
      • Clicking on an element
      • Hovering over an element
      • Resizing the browser
      • Ajax request completing
  • 17. Listening for events
    • 'bind' events
    • $('li').bind('click', doSomething);  
    • or use shortcuts
    • $('li').click(doSomething);
  • 18. WTF?
    • Play with more code...drink more coke...
  • 19. jQuery functions/handlers
    • Functions or Handlers are added to the jQuery object ($)
    • 'extend' is used to add these functions
    • extend makes our custom functions part of jQuery
  • 20. Extending
    •              $.fn.extend({                 poppy: function() {                     var p = $('#poppy');                     p.html($(this).html());                     this.centerPoppy();                     p.show();                     return this;                 }
    •             });