Getting Started with jQuery 3

The DOM serves as the interface between JavaScript and a web page; it provides a representation of the source HTML as a network of objects.

Selectors in jQuery have a spectrum of specificity, from very general selectors, too much targeted selectors. We will look at an example that increases the size of the first letter for top-level <li> text.

Attribute selectors are a particularly helpful subset of CSS selectors. They allow us to specify an element by one of its HTML attributes.

Custom selectors enhance the capabilities of CSS selectors to locate page elements in new ways.

There are many occasions when selecting a parent or ancestor element is essential; that is where jQuery's DOM traversal methods come into play.

We need to explicitly iterate over jQuery objects, especially when the same result is possible by using implicit iteration in jQuery functions.

We have already seen how to make jQuery react to the loading of a web page, but there's bit more to be said about it.

The traditional mechanism for registering event handlers through JavaScript is to assign a function to the DOM element's corresponding property

In illustrating the ability of the click event to operate on normally non-clickable page elements, we have crafted an interface that doesn't indicate that the style switcher label. To remedy this, we can give it a rollover state, making it clear that it interacts in some way with the mouse

To show a case in which .hover() does not help our cause, we'll alter the collapsing behavior

At times, it is convenient to execute code that we have bound to an event, even if the event isn't triggered directly by user input.

There may be times when we need to apply styles that haven't been or can't easily be defined in a stylesheet. Fortunately, jQuery offers the .css() method for such occasions.

The basic .hide() and .show() methods, without any parameters, can be thought of as smart shorthand methods for .css('display', 'string').

In this video, we will include a speed in our example when showing the second paragraph of Abraham Lincoln's Gettysburg Address.

In addition to the prebuilt effect methods, jQuery provides a powerful .animate() method that allows us to create our own custom animations with fine-grained control

The methods are particularly helpful in that they avoid adding a class if it already exists on an element, and correctly handle cases where multiple classes are applied to a single element

To actually manipulate the DOM tree, you'll need to learn a bit more about the function that lies at the very heart of the jQuery library.

Whenever elements can be copied to enhance a page visually, we can let jQuery do the heavy lifting.

It would be nice to be able to modify the pull quote a bit by dropping some words and replacing them with ellipses to keep the content brief

Ajax is just a means of loading data from the server into the web browser without a page refresh. This data can take many forms, and we have many options for what to do with it when it arrives.

The server can dynamically shape the data based on input from the browser. We're helped along by jQuery in this task

At times, though, it is handy to know a bit more about the HTTP request as it progresses. If such a need arises, jQuery offers a suite of functions that can be used to register callbacks when various Ajax-related events occur.