This document compares jQuery and Prototype JavaScript libraries. It provides examples of common tasks like selecting elements, creating elements, handling events, and animations. Key differences are shown such as jQuery using $() and Prototype using $$(). The document also discusses plugins, references, and waiting for the DOM to load.

1. jQuery
v. 1.3.2

2. Andrew Homeyer
with Near Infinity since July ‘08
twitter: @andrewhomeyer

5. ajaxrain.com

6. http://www.google.com/insights/search/#cat=422&q=jquery%2Cprototype&date=1%2F2006%2045m&cmpt=q

7. http://www.google.com/insights/search/#cat=422&q=jquery%2Cprototype%2Cmootools%2Cdojo%2CYUI&date=1%2F2006%2045m&cmpt=q

8. How it’s gonna go down:
jQuery:
$(‘li:last’).css(‘backgroundColor’, ‘red’);
Prototype:
$$(‘li’).last().setStyle({‘backgroundColor’: ‘red’});

9. $( )

10. jQuery( )

11. Play nice with others
jQuery.noConflict();

12. Selecting elements
$(‘#mydiv’) //element with id mydiv
$(‘mydiv’)

13. $(‘div’) //all div elements on page
$$(‘div’)

14. $(‘div.warning’) //all div elements
with class of warning
$$(‘div.warning’)

15. $(‘*’) //everything
$$(‘*’)

16. selecting with filters
// all spans that contain
$(‘span:has(img)’) an image
$$('span').findAll(function(v){
return v.select('img').length > 0;
});

17. $(‘.mytable tr:even’) //even rows
$$(‘.mytable tr:nth-child(even)’)

18. :first :empty
:last :has(selector)
:not(selector) :parent
:even :hidden
:odd :visible
:eq(index) :checked
:animated :selected
:contains(text) :input

19. :first :empty
:last :has(selector)
:not(selector) :parent
:even :hidden
:odd :visible
:eq(index) :checked
:animated :selected
:contains(text) :input

20. creating elements
$(‘<a></a>’) //returns a new <a>
new Element(‘a’)

21. $(‘<a></a>’).appendTo(document.body)
document.body.insert(new Element(‘a’))

22. $(‘body’).append(‘<a></a>’)
document.body.insert(‘<a></a>’)

23. chaining
$(‘li’)
.css(‘backgroundColor’, ‘red’)
.text(‘new content’)
$$(‘li’).each(function(v){
v.setStyle({‘backgroundColor’: ‘red’}).update(‘new content’);
}

24. $(‘div’)

25. $(‘div’).filter(function(){
return $(this).css(‘color’) == ‘green’
})

26. $(‘div’).filter(function(){
return $(this).css(‘color’) == ‘green’
})
.remove()

27. $(‘div’).filter(function(){
return $(this).css(‘color’) == ‘green’
})
.remove()
.end()

28. $(‘div’).filter(function(){
return $(this).css(‘color’) == ‘green’
})
.remove()
.end()
.text(“no green divs”)

29. events
$(‘a’).click(function(){
$(this).slideUp();
})
$$(‘a’).each(function(v){
v.observe(‘click’, function(a){
Effect.SlideUp(a);
});
});

30. effects
$(‘#box’).show(‘slow’);
$(‘box’).appear();

31. show
hide fadeIn
toggle fadeOut
slideDown fadeTo
slideUp animate
slideToggle

32. short circuit effects
jQuery.fx.off = true;

33. 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})

34. ajax
$(‘#container’).load(‘content.html’)
new Ajax.Updater(‘container’, ‘content.html’);

35. ajax with JSONP
$.getJSON(url, function(data){
//process your data
});

36. Waiting for the DOM
<script type=“text/javascript”>
$(document).ready(function(){
//DOM’s loaded, do your stuff
});
</script>
document.observe(‘dom:loaded’, function(){
});

37. shortcut
<script type=“text/javascript”>
$(function(){
//DOM’s loaded, do your stuff
});
</script>

38. 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;
};

39. references
jQuery Enlightenment (http://jqueryenlightenment.com/)
API: docs.jquery.com, visualjquery.com