jQuery

1,046 views

Published on

an introduction to the jQuery JavaScript framework, with comparison to Prototype/Scriptaculous

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

  • Be the first to like this

No Downloads
Views
Total views
1,046
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
46
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery

  1. 1. jQuery v. 1.3.2
  2. 2. Andrew Homeyer with Near Infinity since July ‘08 twitter: @andrewhomeyer
  3. 3. ajaxrain.com
  4. 4. http://www.google.com/insights/search/#cat=422&q=jquery%2Cprototype&date=1%2F2006%2045m&cmpt=q
  5. 5. http://www.google.com/insights/search/#cat=422&q=jquery%2Cprototype%2Cmootools%2Cdojo%2CYUI&date=1%2F2006%2045m&cmpt=q
  6. 6. How it’s gonna go down: jQuery: $(‘li:last’).css(‘backgroundColor’, ‘red’); Prototype: $$(‘li’).last().setStyle({‘backgroundColor’: ‘red’});
  7. 7. $( )
  8. 8. jQuery( )
  9. 9. Play nice with others jQuery.noConflict();
  10. 10. Selecting elements $(‘#mydiv’) //element with id mydiv $(‘mydiv’)
  11. 11. $(‘div’) //all div elements on page $$(‘div’)
  12. 12. $(‘div.warning’) //all div elements with class of warning $$(‘div.warning’)
  13. 13. $(‘*’) //everything $$(‘*’)
  14. 14. selecting with filters // all spans that contain $(‘span:has(img)’) an image $$('span').findAll(function(v){ return v.select('img').length > 0; });
  15. 15. $(‘.mytable tr:even’) //even rows $$(‘.mytable tr:nth-child(even)’)
  16. 16. :first :empty :last :has(selector) :not(selector) :parent :even :hidden :odd :visible :eq(index) :checked :animated :selected :contains(text) :input
  17. 17. :first :empty :last :has(selector) :not(selector) :parent :even :hidden :odd :visible :eq(index) :checked :animated :selected :contains(text) :input
  18. 18. creating elements $(‘<a></a>’) //returns a new <a> new Element(‘a’)
  19. 19. $(‘<a></a>’).appendTo(document.body) document.body.insert(new Element(‘a’))
  20. 20. $(‘body’).append(‘<a></a>’) document.body.insert(‘<a></a>’)
  21. 21. chaining $(‘li’) .css(‘backgroundColor’, ‘red’) .text(‘new content’) $$(‘li’).each(function(v){ v.setStyle({‘backgroundColor’: ‘red’}).update(‘new content’); }
  22. 22. $(‘div’)
  23. 23. $(‘div’).filter(function(){ return $(this).css(‘color’) == ‘green’ })
  24. 24. $(‘div’).filter(function(){ return $(this).css(‘color’) == ‘green’ }) .remove()
  25. 25. $(‘div’).filter(function(){ return $(this).css(‘color’) == ‘green’ }) .remove() .end()
  26. 26. $(‘div’).filter(function(){ return $(this).css(‘color’) == ‘green’ }) .remove() .end() .text(“no green divs”)
  27. 27. events $(‘a’).click(function(){ $(this).slideUp(); }) $$(‘a’).each(function(v){ v.observe(‘click’, function(a){ Effect.SlideUp(a); }); });
  28. 28. effects $(‘#box’).show(‘slow’); $(‘box’).appear();
  29. 29. show hide fadeIn toggle fadeOut slideDown fadeTo slideUp animate slideToggle
  30. 30. short circuit effects jQuery.fx.off = true;
  31. 31. ajax $.ajax({ url:'ajax.json', dataType: 'json', error: function(xhr, textStatus, errorThrown){ console.log(textStatus); }, success: function(data, textStatus){ console.log(data); } }); new Ajax.Request(url, {options})
  32. 32. ajax $(‘#container’).load(‘content.html’) new Ajax.Updater(‘container’, ‘content.html’);
  33. 33. ajax with JSONP $.getJSON(url, function(data){ //process your data });
  34. 34. Waiting for the DOM <script type=“text/javascript”> $(document).ready(function(){ //DOM’s loaded, do your stuff }); </script> document.observe(‘dom:loaded’, function(){ });
  35. 35. shortcut <script type=“text/javascript”> $(function(){ //DOM’s loaded, do your stuff }); </script>
  36. 36. plugins http://plugins.jquery.com/ many great ones out there, and if it’s not, write your own jQuery.fn.pluck = function(attribute){ var plucked = []; this.each(function(){ plucked.push($(this).attr(attribute)); }); return plucked; };
  37. 37. references jQuery Enlightenment (http://jqueryenlightenment.com/) API: docs.jquery.com, visualjquery.com

×