KEMBAR78
Jquery Fundamentals | KEY
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 your code



                                 http://www.flickr.com/photos/oxido1180/2685774194/
true



a boolean
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
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)
‘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 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
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/photos/exfordy/1184487050/
$()
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('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
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

• dataType: text, html, xml, json, jsonp, script

• callback: function   to run when data is received
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/
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/
More options with $.ajax()
• async

• error   callback

• timeout

• cache

• header        modification

• more    ...

                              http://www.flickr.com/photos/jeet_sen/1691759831/
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.defaults,

    
 options

    );


    return this.each(function() {

    
 // ...

    });

};




basic concept of a jQuery object method
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(

    
 jQuery.fn.myPlugin.defaults,

    
 options

    );


    return this.each(function() {

    
 // ...

    });

};




naming the plugin
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
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
jQuery.fn.myPlugin = function(options) {

 jQuery.fn.myPlugin.defaults = {

 
 // ...

 };


    var settings = $.extend(

    
 jQuery.fn.myPlugin.defaults,

    
 options

    );


    return this.each(function() {

    
 // ...

    });

};




enabling chaining
jQuery.fn.hrefToContents = function(options) {


    return this.each(function() {

    
 $(this).text($(this).attr('href'));

    });

};




a plugin that requires iteration
jQuery.fn.hoverClass = function(c) {

 return this.hover(

 
 function() {

 
 
 $(this).addClass(c);

 
 },

 
 function() {

 
 
 $(this).removeClass(c);

 
 }

 );
};




a plugin that doesn't require iteration
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

Jquery Fundamentals

  • 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, therewas 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’slots of stuff you still need to know.
  • 7.
  • 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.
  • 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.
  • 13.
  • 14.
  • 15.
  • 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.
  • 20.
    In a nutshell •Get some elements • Do something to them http://www.flickr.com/photos/exfordy/1184487050/
  • 21.
  • 22.
  • 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.
  • 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.
  • 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