jQuery Free Tutorial

Welcome to our free jQuery tutorial. This tutorial is based on Webucator's jQuery Fundamentals Training course.

Contact Us or call 1-877-932-8228
Start Tutorial or choose from a lesson below

Lesson 1: jQuery Intro

jQuery is a lightweight, powerful JavaScript library that simplifies the task of front-end scripting on web pages. This chapter introduces jQuery and shows a brief example of some of the library's capabilities.

Lesson 2: JavaScript Basics

jQuery is built on top of JavaScript, a rich and expressive language in its own right. This section covers the basic concepts of JavaScript, as well as some frequent pitfalls for people who have not used JavaScript before. While it will be of particular value to people with no programming experience, even people who have used other programming languages may benefit from learning about some of the peculiarities of JavaScript.

Lesson 3: jQuery Basic Concepts

In this lesson, we will introduce jQuery basic concepts, including working with selections and manipulating the DOM.

Lesson 4: jQuery Core

In this lesson, you will learn the difference between core and non-core jQuery methods and how to use core utility methods.

Lesson 5: Events and Event Handlers

jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed. Inside the function, this refers to the element that was clicked. For details on jQuery events, visit http://api.jquery.com/category/events/. The event handling function can receive an event object. This object can be used to determine the nature of the event, and to prevent the event's default behavior. For details on the event object, visit http://api.jquery.com/category/events/event-object/.

Lesson 6: Effects

jQuery makes it trivial to add simple effects to your page. Effects can use the built-in settings, or provide a customized duration. You can also create custom animations of arbitrary CSS properties. For complete details on jQuery effects, visit http://api.jquery.com/category/effects/.

Lesson 7: Ajax

The XMLHttpRequest method (XHR) allows browsers to communicate with the server without requiring a page reload. This method, also known as Ajax (Asynchronous JavaScript and XML), allows for web pages that provide rich, interactive experiences.

Lesson 8: Plugins

A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. Once the plugin is established, whenever you call $() you're creating a new jQuery object, with your plugin now method included along with all of jQuery's existing methods. The idea of a plugin is to do something with a collection of elements. You could consider each method that comes with the jQuery core a plugin, like fadeOut or addClass. You can make your own plugins and use them privately in your code or you can release them into the wild. There are thousands of jQuery plugins available online. The barrier to creating a plugin of your own is so low that you'll want to do it straight away!

Lesson 9: Best Practices

This chapter consolidates the jQuery and JavaScript best practices that have appeared in earlier chapters.

Lesson 10: Custom Events

We're all familiar with the basic events, click, mouseover, focus, blur, submit, etc., that we can latch on to as a user interacts with the browser. Custom events open up a whole new world of event-driven programming. In this chapter, we'll use jQuery's custom events system to make a simple form designing application.

Lesson 11: jQuery Mobile jQuery UI

jQuery's family of UI interface libraries - jQuery UI for desktops, and jQuery Mobile for smartphones and tablets - offer a set of interactions, widgets, events, and animations to solve common user-interface challenges. Both are well-documented, thoroughly tested, and easy to use.

Try The Complete Course

In addition to the free course material here, our complete self-paced course includes:

  • Video Presentations from Expert Instructors
  • Exercises
  • Interactive Quizzes
  • Readings and Tasks
Learn More