LEARNING PATH: jQuery: Master Web Development with jQuery 3

This video gives an overview of the entire course.

We can easily demonstrate these tasks using the jQuery Cycle plugin.

Plugins need not be limited to providing additional jQuery methods. They can extend the library in many ways and even alter the functionality of existing features.

While the jQuery UI code may often be packaged as a single file, it is actually a comprehensive suite of related plugins.

To create a website or application for modern day smart phones and tablets, we can turn to the jQuery Mobile project.

Some of the built-in capabilities of jQuery are provided via what we have been calling global functions.

Most of jQuery's built-in functionality is provided through its object instance methods, and this is where plugins shine as well.

We'll replicate a feature of CSS by using a more brute-force JavaScript approach-- an approach that is more suitable for demonstration than for production code.

These widgets present a consistent API to JavaScript programmers. This consistency makes learning to use one easy.

We'll build an HTML document consisting of a list of news items. We'll place those items in a table so that we can experiment with selecting rows and columns in multiple ways.

There is much to learn about performing our element-finding tasks efficiently. This efficiency can work as both code that is easier to write and read, and code that executes more quickly inside the web browser.

To be able to get the most out of .end() and .addBack(), and in general to write efficient jQuery code, we need to understand a little more about how the DOM traversal methods work.

For our sample document, we will create a simple photo gallery. The gallery will display set of photos with an option to display additional photos upon the click of a link.

The event target represents the innermost, or most deeply nested, element that receives the event.

Custom events must be triggered manually by our code. In the sense, they are like regular functions that we define, in that we can cause a block of code to be executed when we invoke it from another place in the script.

Several native events have the potential for frequent triggering. Common culprits include scroll, resize, and mousemove. To account for this, we will implement event throttling

To implement special behavior for an event, we add a property to the $ .event.special object.

To refresh our memory about jQuery's effect methods, we'll set up a baseline from which we build in this section, starting with a simple hover animation.

There are many cases in which this animation queue, known within jQuery as fx, causes desirable behavior. In the case of hover actions such as ours, it needs to be avoided.

Some of the object's properties are undocumented and intended to use solely within the library itself. In this video, we will take a look at a few of the documented properties.

We can subtly alter the effect by changing the easing equation to easeInQuart for the top property alone, causing the element to follow a curved path rather than a straight one.

At times, we come across situations in which we want to act when a process completes, but we don't necessarily know how long the process will take, or even if it will be successful. To handle these cases, jQuery offers deferred objects

Even though we've looked at a number of advanced features, jQuery's Effects Module has much more to offer.

Sorting rows of table is a common task and is an efficient way to assist users in quickly finding the information they need. Obviously, there are, a number of ways to do this.

We will use the jQuery DOM manipulation methods to insert new elements and move other existing elements to new positions within the DOM. We will start with the most straightforward piece of the puzzle – linking the table headers.

The solution for slow comparator is to pre-compute the keys for comparison. We can do most of the expensive work in an initial loop and store the result with jQuery's .data().

We've managed to sort the rows correctly by manipulating the content, we can make our code more efficient by outputting more HTML from the server in the form of HTML5 data attributes

More often than not, web applications rely on JavaScript to deliver content as well as manipulate it once it arrives. In our third table sorting example, we'll do the same.

The simple methods, though, do quite a bit of work for us behind the scenes. We can get even more utility out of them if we better understand what they do.

We encountered the concept of progressive enhancement. To reiterate, this philosophy ensures a positive user experience for all users by mandating that, a working product be put in place first before additional embellishments are added for users with modern browsers.

Introducing any kind of network interaction into an application brings along some degree of uncertainty. Because of these reliability concerns, we should always plan for the worst case and prepare for error scenarios.

When an Ajax request is made, jQuery determines the best mechanism available for retrieving the data. This transport could be the standard XMLHttpRequest object, Microsoft ActiveX XMLHTTP object, or a <script>.

A common feature of searches is to display a dynamic list of results as the user is typing. We can emulate this "live search" feature for our jQuery API search by binding a handler to the keyup event

The jQuery Ajax framework is powerful, as we've seen, but even so there are times when we might want to change the way it behaves. Unsurprisingly, it offers multiple hooks that can be used by plugins to give the framework brand new capabilities.