jQueryFundamentals.md

Javascript Basics

• Inside of a method — indeed, inside of any function — there is a special keyword available to us: this. It refers to the object that is the context in which the function was called.

• You can force the meaning of this to be what you want it to be, using the .call() or .apply() method on the function itself.

• With a var person and a function called sayIt, we can force the function to act upon the person variable. sayIt.call( person, 'Hello', '!!1!!1' );

• As it turns out, most values in JavaScript are truthy — in fact, there are only five values in JavaScript that are falsy:

  • undefined (the default value of declared variables that are not assigned a value)
  • null
  • NaN ("not a number")
  • 0 (the number zero)
  • '' (an empty string)

jQuery Basics

• $ is just a shorter, more convenient name for the jQuery function.
• $() does double duty as an alias for $(document).ready() if you pass it a function.
• The $ function has one last role: creating new elements. If you pass an HTML snippet to $(), it will create a new element in memory — that is, the element will be created, but it won't be placed on the page until you place it on the page. (i.e. $( '<p class="greet">Hello!</p>' ); // creates a new <p> with content and class)

Traversing & Manpulating

• An initial selection can serve as the "home base" for making additional selections; for example, you may have an existing selection that contains an individual list item, and then need to work with its siblings or the unordered list that contains the item.
• jQuery provides the .val() method for altering the value of form elements such as select and input elements. $( 'input[type="text"]' ).val( 'new value' );
• There are many methods for placing elements — you can place them before, after, around, inside, and outside of other elements, depending on your specific needs.

Events and Event Delegation

• jQuery makes it easy to respond to user interaction with a web page. This means that you can write code that runs when a user clicks on a certain part of the page, or when she moves her mouse over a form element.
• One advantage that .on() offers is the ability to use "namespaced" events.
• Often, you'll want to prevent the default action of an event; for example, you may want to handle a click on an a element using AJAX, rather than triggering a full page reload. . The right way to prevent the default behavior of an event is to call the .preventDefault() method of the event object.

Effects

• Although you can use jQuery for effects, it is often much more efficient to achieve animations using CSS rather than JavaScript. Modern browsers and mobile devices handle CSS much better.
• Often, you'll want to do something once an animation is done — if you try to do it before the animation completes, it may affect the quality of the animation, or it may remove elements that are part of the animation. You can provide a callback function to the animation methods if you want to specify what should happen when the effect is complete.

AJAX & Deferreds

• AJAX requests run asynchronously — that means that the $.ajax method returns before the request is finished, and therefore before the success callback runs.
• Deferreds provide a means to react to the eventual success or failure of an asynchronous operation, and reduce the need for deeply nested callbacks.