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

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