facebook google plus twitter

Webucator's Free jQuery Tutorial

Welcome to our free jQuery tutorial. This tutorial is based on Webucator's jQuery Fundamentals Training course.
Start Tutorial or choose from a lesson below
jQuery is a lightweight, powerful JavaScript library that simplifies the task of front-end scripting on web pages. This lesson introduces jQuery and shows a brief example of some of the library's capabilities.
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.
In this lesson, we will introduce jQuery basic concepts, including working with selections and manipulating the DOM.
In this lesson, you will learn the difference between core and non-core jQuery methods and how to use core utility methods.
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/.
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/.
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.
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!
This chapter consolidates the jQuery and JavaScript best practices that have appeared in earlier chapters.
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.
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.