The Complete jQuery Course: From Beginner To Advanced!

You can add jQuery to your project using the HTML <script> tag and referencing the official jQuery CDN (Content Delivery Network) as the source. That's all you need, you can now use jQuery in any JavaScript scripts on your site.

All jQuery code is normally wrapped inside the document.ready(function() {...}) function, which can be abbreviated as $(function() {...}). This makes all the scripts execute only once the page is loaded and all the DOM elements are ready to be worked on. Inside the function you pass into the document.ready() function, you can define all your code to execute.

Learn to fade DOM elements in and out by using jQuery's fadeIn() and fadeOut() functions. A parameter can be used to define the animation duration in milliseconds, the default is 400 (=0.4 seconds). A second parameter can be used to define a function that is executed once the animation has completed.

Fading in an element means that the element's opacity will gradually increase over the specified duration until its full opacity is reached. Fading out of course does the opposite and increases the transparency of the elements until it's completely invisible.

The fadeIn() and fadeOut() functions will also change the CSS "display" property, meaning that fadeOut() will set "display: none" after the element is completely faded out and fadeIn() will first restore the "display" property to its original value before fading the element back in.

In contrast, when using fadeTo(), only the CSS "opacity" property will be changed. This means that elements will not realign as if the element wasn't there which may be preferable in same cases.

But be aware then after using fadeOut(), fadeTo() will not be enough to make the element reappear! You need to also restore the "display" property to "block" for example.

With the show() and hide() functions provided by jQuery, you can easily make elements hidden or visible. By providing a duration as the first parameter, these two functions will again define an animation.

Most commonly though, you'll call show() and hide() without parameters to hide or show elements right when the page first loads.

You can use slideUp() to make elements disappear via a sliding animation and slideDown() to make them appear again. Just like with fadeIn() and fadeOut(), you can specify the duration in milliseconds as the first parameter.

And again, jQuery also provides a slideToggle() function which will apply the correct animation depending on whether the element is currently shown or not. This means that a hidden element will be shown using slideDown() while a shown element will be hidden using slideUp().

You can make elements move around on the page, meaning you can change their position, using a simple custom animation. To create a custom animation, you use the animate() function. By changing the margins of an element, you can make it appear to be moving.

As the first parameter, you pass in an object defining all CSS properties to be animated and their target value. Then you can also define a duration again as the second parameter. In the next lecture, you'll learn how to create more advanced custom animations with jQuery.

Using the animate() function, you can manipulate nearly all CSS properties -- simultaneously. This allows for quite advanced custom animations without a lot of code. You can for example change an element's size, margins, and padding at the same time.

What you can not animate are colors because jQuery cannot transition between the current and the target color.

Delaying animations in jQuery is really easy, just call the .delay() function and pass in the duration in milliseconds you want to delay the following animation.

You can make your code more readable and more concise by using chaining. Chaining means you can directly call the next function on the object returned from a previous call because it will return the originally selected elements. For example, you can write $("header").delay(500).slideUp() which uses chaining to call delay() and then slideUp without writing the selector $("header") again.

All of jQuery's animation functions, such as fadeIn(), slideDown(), and animate() allow you to specify a callback function as the last parameter. That function will then be called once the animation has finished. 

One usage of this is timing animation to be executed one after another, which is exactly what you'll do in this lecture.

Create a simple lightbox that fades in nicely using jQuery animations. This lecture demonstrates a real-world application of jQuery's animations. Inside such a lightbox, you could highlight images or ask your visitors to sign up for your email list.

jQuery makes it really easy to select elements on the page by relying on your existing CSS knowledge. You can simply use $("<css-selector>") to select one or more elements via a CSS selector. Inside the string, you use "#" for selection by ID and "." for selection by class -- just like in CSS. Also, you can separate multiple selector by comma. Just try out different CSS selectors inside the string and see what jQuery gives you. 

Additionally, jQuery also provides various convenience selectors which are prefixed by a colon (":") such as $(":header") to retrieve all heading elements on the page (<h1> to <h6>).

Once you have a set of matched elements by using a CSS selector, you can further traverse the DOM tree to find the element you're looking for. Traversal function in jQuery include the following:

• find() to retrieve all descendant elements
• children() to retrieve only direct child elements
• prev() to retrieve the previous sibling element
• next() to retrieve the next sibling element
• parent() to retrieve the unique parent
• siblings() to retrieve all sibling elements

To restrict the elements selected during traversal, you can pass in selectors again. For example, $(":header").next("p") to find only paragraphs which follow directly after a heading.

In addition to traversal, you can also filter out elements from an existing match by using filter functions. This allows you to restrict a broad match to the specific elements you're looking for. The associated jQuery functions are the following:

• filter() to define positive conditions each element has to fulfill
• first() to get the first element from the selection
• last() to get the last element from the selection
• eq() to get an element from a specific position (can also take in negative numbers to start from back)
• not() to define negative conditions each element has to fulfill

The filter() and not() functions are the most powerful and most flexible of course, but oftentimes first(), last() or eq() are exactly what you need and are very convenient to use. Note that each of these will reduce the number of matched elements to 1. In contrast, filter() and not() may reduce the number of matched elements by any amount.

The Document Object Model (DOM) standardizes the way XML and HTML documents are represented as objects. In this course, we're only interested in the HTML DOM which defines how your HTML pages will be represented internally in your browser.

JavaScript, and thus jQuery, rely on the DOM to know how to work with each HTML element. The DOM defines which properties each element has, which event handlers can be associated with it, how it can be accessed and modified. So in reality, when manipulating your site via JavaScript or jQuery, you working on the DOM -- but you can also imagine you're just manipulating the HTML itself in most cases.

How to add a new element in jQuery? There are various functions available in jQuery to add a elements to the page. This lecture covers all of the following:

• after() to add an element as the next sibling
• before() to add an element as the previous sibling
• append() to add an element as the last child
• prepend() to add an element as the first child
• appendTo() same effect as append() but with other syntax
• prependTo() same effect as prepend() but with other syntax

Check out the lecture resources for a table overview of mappings between the different variants of each function.

How to replace an element in jQuery? Just use the replaceWith() or the replaceAll() function. This lecture covers how to use both of them.

The difference between them is essentially the same as with prepend() and prependTo() for example from the previous lecture. Using replaceWith(), you put the element which will be replaced to the front, with replaceAll() you pass in it as the parameter.

The lecture covers multiple examples to get you familiar with the replacing elements in jQuery.

To remove elements from the page in jQuery, you can use one of the following functions:

• remove() to completely remove the element(s) from the page along with their associated data and event handlers
• detach() to remove the element(s) from the page but make jQuery remember their associated data and event handlers; this is useful if you want to reattach the element(s) to the page again later.
• empty() to remove everything inside an element, including its children and text content.

This lecture teaches you in more detail how and when to use which of these three variants.

At this point, you know how to add, replace, and remove elements as a whole. But what about just an element's attributes? This lecture will give you all the tools to manipulate those as well. The functions covered here are:

• attr() to get and set element attributes
• prop() to get and set boolean properties such as "checked", "selected", and "required"
• val() to get the value of form input fields

With this, you'll be able to create awesome image galleries and more by dynamically changing attribute values, such as the src attribute of an image tag.

Time for a coding activity! Create a stunning image gallery that nicely transitions between each image. You'll do this by combining what you learned about jQuery animations and DOM manipulations so far throughout this course.

By following along such coding activities and really putting into practice what you learned, you're gonna learn best to apply your knowledge in real-world projects.

Setting CSS properties using jQuery is really simple using the css() function. It allows you to retrieve the current value of a CSS property if you specify only one parameter (the name of the CSS property) or to set a new value by adding that as a second parameter. For example:

var currentValue = $("p").css("font-size");
$("p").css("font-size", "20px");

To apply multiple CSS styles at once, I recommend you put them into a CSS class and then add that class to the element via jQuery instead of calling the css() function many times.

To add or remove a CSS class from an element in jQuery, you can use addClass() and removeClass() respectively. They're really easy to use, just call $("a").addClass("fancy-link"), for instance, to add the class "fancy-link" to all links on the page.

In jQuery, you can associate arbitrary data to any element on the page using the data() function. This allows you to then retrieve that data anytime you have a reference to that element. For instance, you could associate all available images to the image gallery DOM element so that you can always access those images from the gallery element.

To add such data, you can call $(".gallery").data("availableImages", images) for example to associate an array to the key "availableImages". In order to retrieve that data, you can then call $(".gallery").data("availableImages").

If you want to remove data from an element again, just call the removeData() function. For instance, $(".gallery").removeData("availableImages").

You already know how to change elements as a whole and their attributes/properties. The only thing that's left is how to change what's between the opening and closing tag of an HTML element, like for example the text inside a <p> tag.

There are two functions in jQuery to get or set that content:

• html() to get or set the text while considering HTML inside the content
• text() to get or set the text without parsing any HTML (will output tags on the page)

In contrast to append(), prepend() etc., this allows you to add content without adding a new element. You only modify the actual text inside a tag.

An event is like a signal which tells you that the user performed some action on your page, like for example clicking on an element. Those events can then be handled (reacted to) by an event handlers, which is just a function that's going to be executed whenever that signal is emitted.

Event handling is used to enhance the responsiveness of your site and provide a better user experience for your visitors. Event handling in jQuery is fairly simple and you're gonna learn how to use all the most important events.

The most commonly handled event is the click event, that is when the user clicks some element on your page. The click event can be addressed in jQuery using the click() function.

You just call the click() function on the element(s) which should react to clicks and pass in the function which will act as the event handler. For example, you can do $("#some-button").click(function(event) { ... }) to associate a click handler to the element with ID "some-button".

You can always add the event as the first function parameter and jQuery will then fill that with additional information about the event, such as where the event occurred on the page.

The hover event is triggered both when the user enters and leaves an element with the mouse. You can handle that event in jQuery very similar to click events, but using the hover() function instead. This lecture will guide you through the usage of the hover event in more detail.

To attach different event handlers for when the mouse enters an element and when it leaves it again, you can use mouseenter() and mouseleave(). The usage is again the same as with any other event function in jQuery, so you can pass in a function as the event handler as the first parameter.

There is a shorthand for this in jQuery, which is the assign different event handlers to hover() for mouseenter and mouseleave. So that would be hover(handlerIn, handlerOut) which you can use for example like so:

$(".box").hover(function() { ... }, function { ... });

The first function defines what happens on mouseenter, whereas the second one defines the event handler for mouseleave.

To add the same event handler function for multiple events in jQuery, you can use the on() function and pass in a space-separated list of events, like so:

$("#login").on("click keydown", function(event) { ... });

The .on() function will be important again when you learn about delegated events. For now, it's just an alternative way to attach event handlers to elements.

Instead of using anonymous inner functions as event handlers, you should modularize your code into reusable chunks. This includes writing your function definitions for more complex functions outside of the call to event handler functions and then simply passing in a reference to them as the event handler. Thus, you don't define your function inside the .click() call for example.

Attaching a click handler would then look something like this: $("#login").click(loginUser);

Events with click() etc. cannot be bound to elements which are added to the page later on dynamically. Instead, the handler must be attached to an existing parent element which delegated to its children using on(). It's important that the parent element is always on the page, otherwise you have the same issue again.

To use event delegation in jQuery, you use the .on() function and, as the second parameter, you pass in a selector for the descendants to delegate to like so:

$(".parent").on("click", "li", function() { ... });

This would delegate to list item descendants and handle clicks on those list item elements.

In jQuery, you can pass additional data to events by adding them to your event function call as the first parameter before defining the event handler. This first parameter then takes an object like so:

$("#element").click({ key: value, key2: value2 }, function() { ... });

It's now time for another coding activity where you're going to create an image gallery with a nice hover effect as well as a click handler that highlights an image in a lightbox.

Code along and put into practice what you've learned in this section!

Most commonly, you'll handle mouse events. But you can also handle keyboard events in jQuery by using the keydown() and keyup() functions. Using these is analogous to .click() etc. but normally, you'll want to differentiate between which key was pressed.

To get the key code in jQuery, you use event.which like so:

$("html").keydown(function(event) {
    var keyCode = event.which; ...
});

The focus and blur events are particularly useful for form input elements such as text inputs and textarea elements.

The focus event is triggered when the user focuses the element, for instance by clicking into it or by using the tab key to jump into it. To handle the focus event in jQuery, you use the focus() function as explained in the lecture.

The blur event is the opposite and is triggered when an element loses focus, most commonly because the user went on to the next form input. In jQuery, the blur() function allows you to handle this event.

jQuery's change() event is used for checkboxes, radio buttons, and select elements. It is not particularlyuseful for text input because then the event is only fired once focus is lost, meaning that you can use the blur() event instead.

But for checkboxes, radio buttons, and select elements, you'll want to use the change event which you can handle using the change() function of course.

The submit event is of course essential when talking about forms, it is triggered when the user attempts to submit the form, usually by clicking an <input type="submit">.

You can handle the submit event in jQuery using the submit() function. This allows you to perform form validation on the data you get from the user before actually sending that to the server. You'll see how to use this event in detail in this and the following lectures to create a wonderfully responsive form which validates all user input on the fly.

Time to get serious with the form validation! This lecture guides you through the process of how to perform form validation in jQuery when submitting a form. You will check the data in each input element and see if it fulfills your requirements for that field before sending any data to the server.

The form will also display helpful error messages to tell the user what is wrong with their input so that they can easily correct any mistakes. This will be further improved in the next lecture.

To prevent the actual form submission, you can use event.preventDefault(). This is what you want to do if something's wrong with the input.

In this lecture, you're going to further improve the form by providing fast feedback to your users: As soon as the user switches to the next input field (remember the blur() event), the input will be validated to see if anything must be corrected.

This way, the user gets fast feedback even earlier and can correct all input before even hitting submit -- an awesome way to enhance user experience and avoid any frustration for your users!

With Ajax, you can fetch information from your own or an external server and then display the retrieved data on the page. The beauty of this is that there's no need to reload the page -- all data is added dynamically once the data arrives.

Many sites provide access points for such Ajax calls, called APIs. This includes YouTube, other Google services, Flickr, Pinterest and many more. In many cases, you will need an API key to get permission to perform those requests (you can get an API key for free in most cases). But there are also completely open feeds and APIs which you're going to use in this course.

Ajax stands for Asynchronous JavaScript and XML. Asynchronous means your page will stay responsive while the request is being processed by the target server and then when the data comes back, you handle that via an event handler -- for instance to show that data on the page.

To fetch a file from your own server in jQuery, the easiest way is to use the $.load() function and just specify the path to the file as a parameter:

$("#code").load("js/script.js");

This will load the contents of the script.js file into the #code element.

Flickr provides a public feed for recently uploaded photos which you can access without any API key and other credentials. So this is exactly what you'll do in this lecture to display photos from the Flickr API on your page.

With jQuery, you can use the $.getJSON() function which is also the function you will use most commonly to access such APIs (or feeds). Inside the $.getJSON() function, you specify the URL you want to access (see link in lecture resources) and an event handler which will be executed when the data comes back from the Flickr API.

This is another fun lecture to get you familiar with Ajax requests in jQuery to retrieve JSON data. In this lecture, you will access the completely open Pokéapi to retrieve data about Pokémon (you can also use the Star Wars API instead).

Using the Pokéapi, you'll show all 151 Pokémon from the first generation on the page. Then in the next lecture, you will even show an image of each on the page when the user clicks on one of them.

Time to further improve the "Pokédex" from the previous lecture. Here, you will perform another JSON request anytime the user clicks on the name of one of the Pokémon on the page to retrieve further details about it.

This will further improve your understanding of Ajax with jQuery and how to handle the data you get back from an Ajax call.

A short course summary and conclusion! Find out how to get your certification for this course! 

A special bonus lecture for all of my students here in this course!