jQuery Masterclass Course: JavaScript and AJAX Coding Bible

Selects all elements with the given tag name.

Selects all elements.

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

The #id selector selects the element with the specific id.

The .class selector selects all elements with the specific class.

The element selector can also be used to select multiple elements.

Select only the first element.

Select odd/even elements for amazing effects.

Select an element which has a specific name and class.

Select all children of another selected element.

Select an element based the attribute and it's value.

Select an element based on it's type.

The :contains() selector selects elements containing the specified string. The string can be contained directly in the element as text, or in a child element. This is mostly used together with another selector to select the elements containing the text in a group.

Note: The text is case sensitive.

The attr() method can be used to either fetch the value of an attribute from the first element in the matched set or set attribute values onto all matched elements.

Learn how to set an attribute using in jQuery.

Learn how to set an attribute using a function in jQuery.

Learn how to set not one but multiple attributes at one.

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

The val() method returns or sets the value attribute of the selected elements.

When used to return value: 
This method returns the value of the value attribute of the FIRST matched element.

When used to set value: 
This method sets the value of the value attribute for ALL matched elements.

Note: The val() method is mostly used with HTML form elements.

Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

Add or remove one or more classes from each element in the set of matched elements.

The bind() method attaches one or more event handlers for selected elements, and specifies a function to run when the event occurs.

An optional object of data passed to an event method when the current executing handler is bound.

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

Tip: Use the event.isPropagationStopped() method to check whether this method was called for the event.

The event.preventDefault() method stops the default action of an element from happening.

For example:

• Prevent a submit button from submitting a form

• Prevent a link from following the URL

Tip: Use the event.isDefaultPrevented() method to check whether the preventDefault() method was called for the event.

The click() method attaches an event handler function to an HTML element.

The function is executed when the user clicks on the HTML element.

The dblclick() method attaches an event handler function to an HTML element.

The function is executed when the user double-clicks on the HTML element.

The mouseenter() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer enters the HTML element.

The mouseleave() method attaches an event handler function to an HTML element.

The function is executed when the mouse pointer leaves the HTML element.

The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.

The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element.

The mousedown() method attaches an event handler function to an HTML element.

The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element.

The mouseup() method attaches an event handler function to an HTML element.

The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element.

The keydown event occurs when a keyboard key is pressed down.

The keydown() method triggers the keydown event, or attaches a function to run when a keydown event occurs.

The keypress() method triggers the keypress event, or attaches a function to run when a keypress event occurs.

The keypress event is similar to the keydown event. The event occurs when a button is pressed down.

The keyup event occurs when a keyboard key is released.

The keyup() method triggers the keyup event, or attaches a function to run when a keyup event occurs.

Tip: Use the event.which property to return which key was pressed.

The submit event occurs when a form is submitted.

This event can only be used on <form> elements.

The submit() method triggers the submit event, or attaches a function to run when a submit event occurs.

The change event occurs when the value of an element has been changed (only works on <input>, <textarea> and <select> elements).

The change() method triggers the change event, or attaches a function to run when a change event occurs.

Note: For select menus, the change event occurs when an option is selected. For text fields or text areas, the change event occurs when the field loses focus, after the content has been changed.

The focus event occurs when an element gets focus (when selected by a mouse click or by "tab-navigating" to it).

The focus() method triggers the focus event, or attaches a function to run when a focus event occurs.

Learn how to detect when the user takes focus off the form/input.

Learn how to detect when the user scrolls on your website.

Learn how to detect when the Window has been resized.

Learn how combine multiple events using a single selector.

Learn how to get and set CSS properties.

Learn how to set multiple CSS properties using a single selector.

With jQuery, it is easy to manipulate the CSS of elements.

jQuery has several methods for CSS manipulation. We will look at the following methods:

• addClass() - Adds one or more classes to the selected elements

• removeClass() - Removes one or more classes from the selected elements

• toggleClass() - Toggles between adding/removing classes from the selected elements

• css() - Sets or returns the style attribute

With jQuery, it is easy to work with the dimensions of elements and browser window.

jQuery has several important methods for working with dimensions:

• width()

• height()

• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

We will look at four jQuery methods that are used to add new content:

• append() - Inserts content at the end of the selected elements

• prepend() - Inserts content at the beginning of the selected elements

• after() - Inserts content after the selected elements

• before() - Inserts content before the selected elements

Remove elements and content, there are mainly two jQuery methods:

• remove() - Removes the selected element (and its child elements)

• empty() - Removes the child elements from the selected element

jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.

A descendant is a child, grandchild, great-grandchild, and so on.

With jQuery you can traverse down the DOM tree to find descendants of an element.

An ancestor is a parent, grandparent, great-grandparent, and so on.

With jQuery you can traverse up the DOM tree to find ancestors of an element.

With jQuery you can traverse sideways in the DOM tree to find siblings of an element.

Siblings share the same parent. 

The most basic filtering methods are first(), last() and eq(), which allow you to select a specific element based on its position in a group of elements.

Other filtering methods, like filter() and not() allow you to select elements that match, or do not match, a certain criteria.

Hide, Show, Toggle, Slide, Fade, and Animate. WOW!

With jQuery you can fade elements in and out of visibility.

The jQuery slide methods slide elements up and down.

The jQuery animate() method lets you create custom animations.

The jQuery stop() method is used to stop an animation or effect before it is finished.

The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.

A callback function is executed after the current effect is 100% finished.

With jQuery, you can chain together actions/methods.

Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.

The jQuery load() method is a simple, but powerful AJAX method.

The load() method loads data from a server and puts the returned data into the selected element.

Load JSON-encoded data from the server using a GET HTTP request.

Load data from the server using a HTTP GET request.

Load data from the server using a HTTP POST request.

Remove the whitespace from the beginning and end of a string.

Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

Merge the contents of two or more objects together into the first object.

Search for a specified value within an array and return its index (or -1 if not found).

A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.

$.data() is used to give the information about data

$.proxy() is used to Returns a function that will always run in the provided scope — that is, sets the meaning of this inside the passed function to the second argument.

$.isWindow() is used to get information about the window.

Return a number representing the current time.

The $.isNumeric() method checks whether its argument represents a numeric value. If so, it returns true. Otherwise it returns false. The argument can be of any type.

Execute the next function on the queue for the matched elements.

Execute some JavaScript code globally.

Official jQuery Website

W3Schools

jQuery UI

Wikipedia

JavaScript Foundation

jQuery Mobile

GitHub jQuery: https://github.com/jquery/jquery

npm Package Manager

Codecademy

cdnjs

Khan Academy

MDN (Mozilla Developer Network)