jQuery Fundamentals

Posted on by Aaron Careaga

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