jquery fundamental

javascript_basics

function expression:

var addTwoNumbers = function(a, b) {
  return a + b;
};

function declaration:

function addTwoNumbers(a, b) {
  return a + b;
}

This lets us call our function just like we did before, but this approach should be used with caution, as explained in this post.

Bottom line: naming functions using the function declaration approach can have unexpected results if you don't fully understand a feature of JavaScript known as hoisting. The details of hoisting are beyond the scope of this guide, but for now we'll stick to assigning function expressions to variables.

all variables should be declared with a var statement unless they are intended to be global

The confusion arises because the meaning of this can change — as mentioned above, it depends on the context in which the function was called!

var person = {
  firstName : 'Boaz',
  lastName : 'Sender',
  greet : function() {
    log( 'Hi, ' + this.firstName );
  }
};

var sayIt = person.greet; // store the method in a variable

sayIt(); // logs 'Hi, undefined' -- uh-oh

What's a developer to do? First, be aware that storing object methods in variables can have unintended consequences for the meaning of this. Second, be aware that 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.

only five values in JavaScript that are falsy: undefined, null, NaN, 0, ''

jquery_basics

the $() function does double duty as an alias for $(document).ready()

It's important to understand that any selection you make will only contain elements that existed in the page when you made the selection.

use $().length to check whether your selection is empty or not.

get a new jQuery object containing a single element by using .eq() and passing the index of the element you're after.

In jQuery, this almost always refers to the raw DOM element on which the function is currently operating.

$( 'li' ).each(function( index, elem ) {
  // this: the current, raw DOM element
  // index: the current element's index in the selection
  // elem: the current, raw DOM element (same as this)
  $( elem ).prepend( '<b>' + index + ': </b>' );
});

You'll notice that, inside the function that we pass to .each(), we have access to the current raw DOM element in two ways: as this and as elem. As discussed in the JavaScript Basics section, this is a special keyword in JavaScript, reherring to the object that is the current context of the function. In jQuery, this almost always refers to the raw DOM element on which the function is currently operating. So, in the case of .each(), it refers to the current element in the set of elements we're iterating over.

traversing_and_manipulating

You can also add to an existing selection by using the .add() method. You can pass it a selector, an array of elements, a string of HTML, or a jQuery object.

Removing elements:

events

advantage that .on() offers:

When you specify a function to be used as an event handler, that function gets access to the raw DOM element that initiated the event as this. If you want to use jQuery to manipulate the element, you will need to pass it to $()

Preventing the default action: .preventDefault()

Event bubbling && Event delegation

effects

Built-in effects

Custom effects with .animate()

Managing animations