This course will give you the knowledge you need to properly and effectively start integrating jQuery, the popular JavaScript library, into your web development projects. Over the course of two days, you'll learn the fundamental concepts of JavaScript and jQuery and tackle real-world exercises to solidify your understanding of the language and the library. This class is aimed at beginning jQuery users, although intermediate users may also benefit from the more formalized introduction to the library this class will offer.

1. jQuery Fundamentals
rebecca@rebeccamurphey.com
@rmurphey on Twitter
http://delicious.com/rdmey/jquery-class

2. Housekeeping
• ftp: [yourname].jqueryclasses.com
• username: yourname@jqueryclasses.com
• password: jquery!class

3. In the beginning,
there was JavaScript
http://www.flickr.com/photos/freeparking/476376873/

4. Enter jQuery
http://www.flickr.com/photos/timsnell/513274898/

5. • Reads like what you mean
• Simplifies cross-browser issues
• Huge community & plugin ecosystem

6. JavaScript 101
Because there’s lots of stuff you still need to know.

7. Operators and logic

8. Objects
• Booleans, strings, numbers,
arrays, and functions are all
objects
• Objects are a good way of
organizing your code
http://www.flickr.com/photos/oxido1180/2685774194/

9. true
a boolean

10. Booleans (true/false)
• Lots of things are “truthy”
• true
• '0' (or any non-empty string)
•1 (or any non-zero number)
• any array, even empty ones
• any object, even empty ones

11. Booleans (true/false)
• A few things are “falsy”
• false
•0
• undefined
• null
• '' (an empty, zero-length string)
• NaN (“not a number,” the result of illegal math operations)

12. ‘hello’
a string

13. 42
a number

14. ['hello', 'world']
an array

15. function() { }
a function

16. Functions
• Functions can take arguments, but they don't have to
• Functionscan return anything, including other functions -- but
they don't have to return anything
• Functions can be assigned to variables
• Functions
can be passed to other functions by name, or as
anonymous functions
• Functions are normally called by putting () after their name

17. Variable scope
http://www.flickr.com/photos/8/12978541/

18. Closures
http://www.flickr.com/photos/gadl/272562772/

19. jQuery

20. In a nutshell
• Get some elements
• Do something to them
http://www.flickr.com/photos/exfordy/1184487050/

21. $()

22. Selectors
http://docs.jquery.com/Selectors

23. Chaining
http://www.flickr.com/photos/itsgreg/315015695/

24. Events
http://docs.jquery.com/Events
http://docs.jquery.com/Events/jQuery.Event

25. $('a.foo').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.css({ color : 'red' });
console.log('You clicked a link that points to ' +
$this.attr('href'));
});
when an a.foo link is clicked, prevent the default action,
color the link red, and tell the user where the link pointed to

26. CSS

27. Manipulating
http://www.flickr.com/photos/nnova/3373350948/

28. Traversing
http://www.flickr.com/photos/jenny-pics/3258777653/

29. Effects
http://www.flickr.com/photos/foxypar4/2153422313/

30. XHR
http://www.flickr.com/photos/timsnell/513274898/

31. XHR basics
• type: GET or POST
• url: a fully qualified or relative URL
• data: object or query string
• dataType: text, html, xml, json, jsonp, script
• callback: function to run when data is received

32. POST or GET?
• POST when you want to
change something on the
server
• GET when you just want to
get something from the
server
http://www.flickr.com/photos/14511253@N04/3298001461/

33. POST or GET?
• POST when you want to
change something on the
server
• GET when you just want to
get something from the
server
http://www.flickr.com/photos/14511253@N04/3298001461/

34. More options with $.ajax()
• async
• error callback
• timeout
• cache
• header modification
• more ...
http://www.flickr.com/photos/jeet_sen/1691759831/

35. XHR events
• ajaxStart
• ajaxStop
• ajaxComplete
• ajaxError
• ajaxSend
• ajaxSuccess

36. $('#loading')
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});

37. Utility Methods
http://www.flickr.com/photos/geoftheref/2486112196/

38. Plugin authoring

39. Plugins
• Extend core jQuery
• $.myPlugin()
• Extend jQuery object methods
• $('#foo')
.myPlugin()

40. Extending object methods
• Chainability
• Options & defaults
• Callbacks

41. jQuery.fn.myPlugin = function(options) {
jQuery.fn.myPlugin.defaults = {
// ...
};
var settings = $.extend(
jQuery.fn.myPlugin.defaults,
options
);
return this.each(function() {
// ...
});
};
basic concept of a jQuery object method

42. jQuery.fn.myPlugin = function(options) {
jQuery.fn.myPlugin.defaults = {
// ...
};
var settings = $.extend(
jQuery.fn.myPlugin.defaults,
options
);
return this.each(function() {
// ...
});
};
naming the plugin

43. jQuery.fn.myPlugin = function(options) {
jQuery.fn.myPlugin.defaults = {
// ...
};
var settings = $.extend(
jQuery.fn.myPlugin.defaults,
options
);
return this.each(function() {
// ...
});
};
setting the defaults for the plugin

44. jQuery.fn.myPlugin = function(options) {
jQuery.fn.myPlugin.defaults = {
// ...
};
var settings = $.extend(
jQuery.fn.myPlugin.defaults,
options
);
return this.each(function() {
// ...
});
};
overriding the defaults with user-defined options

45. jQuery.fn.myPlugin = function(options) {
jQuery.fn.myPlugin.defaults = {
// ...
};
var settings = $.extend(
jQuery.fn.myPlugin.defaults,
options
);
return this.each(function() {
// ...
});
};
enabling chaining

46. jQuery.fn.hrefToContents = function(options) {
return this.each(function() {
$(this).text($(this).attr('href'));
});
};
a plugin that requires iteration

47. jQuery.fn.hoverClass = function(c) {
return this.hover(
function() {
$(this).addClass(c);
},
function() {
$(this).removeClass(c);
}
);
};
a plugin that doesn't require iteration

48. jQuery.fn.myPlugin = function(options) {
jQuery.fn.myPlugin.defaults = {
callback : function() { alert('done'); }
};
var settings = $.extend(
jQuery.fn.myPlugin.defaults,
options
);
this.each(function() {
// ...
});
jQuery.fn.myPlugin.defaults.callback();
return this;
};
adding a callback