jQuery is a different type of JavaScript library, with emphasis on getting the job done with the most efficient code possible. JavaScript DOM manipulation -- even with some existing JavaScript libraries -- can be tedious and uninteresting. But jQuery provides a new and exciting way to wrap existing markup with awesome dynamic functionality in a few lines of code. Not only is the approach powerful, but elegant as well. This presentation will go over the key parts of the jQuery library, including selectors, DOM transversal and manipulations, events, effects, and ajax -- including running code examples.

1. jQuery
JavaScript Library of the Future
Matt Taylor

2. YOUR
WEBAPP
SUCKS

3. YOUR
WEBAPP
SUCKS

12. “Most of the people
writing in JavaScript
are not
programmers”
- Douglas Crockford

13. “Programmers who
attempt to use JavaScript
for non-trivial tasks often
find the process
frustrating if they do not
have a solid understanding
of the language.”
- David Flanagan

14. 1998

20. The
“Accidental”
RIA Developer

25. THEY
USE
jQUERY

27. UNOBTRUSIVE

28. UNOBTRUSIVE
FUNCTIONAL

29. UNOBTRUSIVE
PRAGMATIC
FUNCTIONAL

30. IT IS OKAY
NOT TO BE
OBJECT
ORIENTED

31. IT IS OKAY
NOT TO BE
OBJECT
ORIENTED

32. jQuery Object
jQuery

33. jQuery Object
jQuery(...)

34. jQuery Object
$(...)

35. $() returns $

36. Accessing the DOM
with Selectors

37. Accessing the DOM
with Selectors
$(‘#myId’)

38. Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)

39. Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)

40. Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)

41. Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)

42. Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)

43. Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)
$(‘li:not(:last)’)

44. Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)
$(‘li:not(:last)’)
$(‘#myId .myClass’)

45. Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)
$(‘li:not(:last)’)
$(‘#myId .myClass’)
$(‘#myTable tr.eq(3)’)

46. Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
http://tinyurl.com/jlotf
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)
$(‘li:not(:last)’)
$(‘#myId .myClass’)
$(‘#myTable tr.eq(3)’)

47. WHAT
YOU
GET
BACK

48. Implicit Iteration
$(‘li’).addClass(‘highlight’)

49. Explicit Iteration
$(‘li’).each(function() {
$(this).addClass(‘highlight’);
});

50. Modifying
Appearance of a
Webpage

51. Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)

52. Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,

53. Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,
‘width’:‘200px’})

54. Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,
‘width’:‘200px’})
.height(‘100px’)

55. Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,
‘width’:‘200px’})
.height(‘100px’)
.addClass() .removeClass()

56. Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,
‘width’:‘200px’})
.height(‘100px’)
.addClass() .removeClass()
.toggleClass()

57. EVENTS
$(‘p’).click(function() {
// do stuff
});
$(‘p’).click() // triggers
$(‘p’).live(‘click’, function() {
// do stuff
}

58. AJAX
$.ajax({
type: "POST",
url: "saveUrl",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Ajax Event Callbacks
ajaxStart, ajaxStop, ajaxComplete,
beforeSend, ajaxError, ajaxSend, etc.

59. EFFECTS
.hide()
.show() speeds
.fadeIn() callbacks
.fadeOut() compound effects
.toggle()
.slideToggle()
animate()

60. jQuery UI
Open source UI components
built on jQuery

61. Plugins
Nearly 500 plugins
Simply include the .js and
call a function

62. Matthew Taylor
rhyolight@gmail.com
http://dangertree.net
@rhyolight

63. Matthew Taylor
rhyolight@gmail.com
http://dangertree.net
@rhyolight