I recently worked through Bocoup’s jQuery tutorial. Highly reccomend taking a look, even if you’ve been working with the library for years. Every time I revisit the fundamentals of a topic my depth of understanding greatly improves. Here are a few notes from each section:
JavaScript Fundamentals
- Everything in JavaScript is an object, except the primitives: strings, booleans, numbers, undefined, and null.
- “this” refers to the object inside the function that was called
- .call and .apply let you pass arguments to a function
- Array literal notation ( var myArray = [ ‘a’, ‘b’, ‘c’ ]; ) is better than invoking “new Array”
- Most values in JS are truthy, only 5 values are falsey: undefined, null, NaN, 0, and ‘ ’
- Ternary operator is a cleaner way to write an if/else statement: var propertyName = ( dim === ‘width’ ) ? ‘clientWidth’ : ‘clientHeight’;
- Naming: “_foo” names with an underscore are typically private, “Dogs” names with an uppercase are usually constructors, and “$.ajax” names with a dollar sign are usually jQuery objects
- The double space surrounding a semicolon when setting properties (firstName : ‘Aaron’) seems weird to me.
jQuery Basics
- Interesting to look at the source code: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js
- Test the contents of a selection by using: if ( $( ‘#nonexistent’ ).length ) { // }
- $() creates a new element in memory. But it wont display until placed it’s on the page
- Getters retrieve info and are typicallly limited to the first element of a selection
- Setters operate on all elements in a selection
Traversing & Manipulating the DOM
- .end() allows you to get back to the original selection but should be refactored out
- .clone() copies an element but the copy must be placed. It is important to change or remove the copied element’s id attribute
- .remove(), .detach(), and .replaceWith() allow you to remove elements from the document
Events & Event Delegation
- Common event methods include: .click(), .keydown(), .keypress(), .keyup(), .mouseover(), .mouseout(), .mouseenter(), .mouseleave(), .scroll(), .focus(), .blur(), and .resize().
- These can all be used with .on( ‘focus blur’, console.log(“Hello”)). You can also bind multiple events at once with .on()
- .trigger() will trigger bound event handlers
- .off() will remove any event handlers that were bound to an event
- Namespacing events allows you to target specific handlers
- Event object properties include: type, which, target, pageX, and pageY
- Event bubbling allows you to use event delegation. This provides performance gains and consistency with handlers executing as planned.
Animating with jQuery
- Common effects include: .show(), .hide(), .fadeIn(), .fadeOut(), .slideDown(), .slideUp(), and .slideToggle()
- Use callback functions at the end of animation methods to specific what should happen next
- .animat() allows the use of custom CSS effects
- .stop() and .delay() are helpful when managing animations
AJAX & Deferreds
- Pass $.ajax() an option URL to apply same configuration across several routes
- Use JSON.stringify() and JSON.parse() to create and parse a JSON string outside of jQuery
- .then() and .always() allow you to attach callbacks on requests
- Specifiy ‘jsonp’ at the dataType to get around blocked XHR requests when calling API’s
- $.Defferred() allows you to manage asynchronous operations