jQuery Fundamentals
    rebecca@rebeccamurphey.com
         @rmurphey on Twitter
http://delicious.com/rdmey/jquery-class
Housekeeping
• ftp: [yourname].jqueryclasses.com

• username: yourname@jqueryclasses.com

• password: jquery!class
In the beginning,
there was JavaScript
             http://www.flickr.com/photos/freeparking/476376873/
Enter jQuery




               http://www.flickr.com/photos/timsnell/513274898/
• Reads   like what you mean

• Simplifies   cross-browser issues

• Huge    community & plugin ecosystem
JavaScript 101
Because there’s lots of stuff you still need to know.
Operators and logic
Objects


• Booleans, strings, numbers,
 arrays, and functions are all
 objects

• Objects are a good way of
 organizing y...
true



a boolean
Booleans (true/false)
• Lots    of things are “truthy”

  • true

  • '0'   (or any non-empty string)

  •1     (or any no...
Booleans (true/false)
•   A few things are “falsy”

    • false

    •0

    • undefined

    • null

    • ''   (an empty,...
‘hello’



a string
42



a number
['hello', 'world']



an array
function() { }



a function
Functions
• Functions   can take arguments, but they don't have to

• Functionscan return anything, including other functi...
Variable scope




                 http://www.flickr.com/photos/8/12978541/
Closures




           http://www.flickr.com/photos/gadl/272562772/
jQuery
In a nutshell


• Get   some elements

• Do    something to them




                            http://www.flickr.com/phot...
$()
Selectors
http://docs.jquery.com/Selectors
Chaining
           http://www.flickr.com/photos/itsgreg/315015695/
Events
        http://docs.jquery.com/Events
http://docs.jquery.com/Events/jQuery.Event
$('a.foo').click(function(e) {

 e.preventDefault();

 var $this = $(this);

 $this.css({ color : 'red' });

 console.log(...
CSS
Manipulating
          http://www.flickr.com/photos/nnova/3373350948/
Traversing
        http://www.flickr.com/photos/jenny-pics/3258777653/
Effects
          http://www.flickr.com/photos/foxypar4/2153422313/
XHR
      http://www.flickr.com/photos/timsnell/513274898/
XHR basics
• type: GET     or POST

• url: a   fully qualified or relative URL

• data: object   or query string

• dataTyp...
POST or GET?
• POST  when you want to
 change something on the
 server

• GET when you just want to
 get something from th...
POST or GET?
• POST  when you want to
 change something on the
 server

• GET when you just want to
 get something from th...
More options with $.ajax()
• async

• error   callback

• timeout

• cache

• header        modification

• more    ...

  ...
XHR events
• ajaxStart

• ajaxStop

• ajaxComplete

• ajaxError

• ajaxSend

• ajaxSuccess
$('#loading')

 .ajaxStart(function() {

 
 $(this).show();

 })

 .ajaxStop(function() {

 
 $(this).hide();

 });
Utility Methods
          http://www.flickr.com/photos/geoftheref/2486112196/
Plugin authoring
Plugins
• Extend   core jQuery

 • $.myPlugin()

• Extend   jQuery object methods

 • $('#foo')
   .myPlugin()
Extending object methods
• Chainability

• Options   & defaults

• Callbacks
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(
...
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(
...
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(
...
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(
...
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(
...
jQuery.fn.hrefToContents = function(options) {


    return this.each(function() {

    
 $(this).text($(this).attr('href'...
jQuery.fn.hoverClass = function(c) {

 return this.hover(

 
 function() {

 
 
 $(this).addClass(c);

 
 },

 
 function(...
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 callback : function() { alert('done'); }

 ...
Upcoming SlideShare
Loading in...5
×

Jquery Fundamentals

6,608

Published on

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.

Published in: Technology, Design
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,608
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Jquery Fundamentals

  1. 1. jQuery Fundamentals rebecca@rebeccamurphey.com @rmurphey on Twitter http://delicious.com/rdmey/jquery-class
  2. 2. Housekeeping • ftp: [yourname].jqueryclasses.com • username: yourname@jqueryclasses.com • password: jquery!class
  3. 3. In the beginning, there was JavaScript http://www.flickr.com/photos/freeparking/476376873/
  4. 4. Enter jQuery http://www.flickr.com/photos/timsnell/513274898/
  5. 5. • Reads like what you mean • Simplifies cross-browser issues • Huge community & plugin ecosystem
  6. 6. JavaScript 101 Because there’s lots of stuff you still need to know.
  7. 7. Operators and logic
  8. 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. 9. true a boolean
  10. 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. 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. 12. ‘hello’ a string
  13. 13. 42 a number
  14. 14. ['hello', 'world'] an array
  15. 15. function() { } a function
  16. 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. 17. Variable scope http://www.flickr.com/photos/8/12978541/
  18. 18. Closures http://www.flickr.com/photos/gadl/272562772/
  19. 19. jQuery
  20. 20. In a nutshell • Get some elements • Do something to them http://www.flickr.com/photos/exfordy/1184487050/
  21. 21. $()
  22. 22. Selectors http://docs.jquery.com/Selectors
  23. 23. Chaining http://www.flickr.com/photos/itsgreg/315015695/
  24. 24. Events http://docs.jquery.com/Events http://docs.jquery.com/Events/jQuery.Event
  25. 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. 26. CSS
  27. 27. Manipulating http://www.flickr.com/photos/nnova/3373350948/
  28. 28. Traversing http://www.flickr.com/photos/jenny-pics/3258777653/
  29. 29. Effects http://www.flickr.com/photos/foxypar4/2153422313/
  30. 30. XHR http://www.flickr.com/photos/timsnell/513274898/
  31. 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. 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. 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. 34. More options with $.ajax() • async • error callback • timeout • cache • header modification • more ... http://www.flickr.com/photos/jeet_sen/1691759831/
  35. 35. XHR events • ajaxStart • ajaxStop • ajaxComplete • ajaxError • ajaxSend • ajaxSuccess
  36. 36. $('#loading') .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });
  37. 37. Utility Methods http://www.flickr.com/photos/geoftheref/2486112196/
  38. 38. Plugin authoring
  39. 39. Plugins • Extend core jQuery • $.myPlugin() • Extend jQuery object methods • $('#foo') .myPlugin()
  40. 40. Extending object methods • Chainability • Options & defaults • Callbacks
  41. 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. 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. 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. 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. 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. 46. jQuery.fn.hrefToContents = function(options) { return this.each(function() { $(this).text($(this).attr('href')); }); }; a plugin that requires iteration
  47. 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. 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

×