Your SlideShare is downloading. ×
jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery

840
views

Published on

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

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