Getting Started with jQuery

613 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
613
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Getting Started with jQuery

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

×