Book Image

jQuery Essentials

By : Troy Miles
Book Image

jQuery Essentials

By: Troy Miles

Overview of this book

<p>JQuery is still the most popular JavaScript library. It is used in over 60% of the top websites on the Internet. It was written to make DOM manipulation (so, moving things around a web page) easier for developers. It acts through JavaScript to ascribe HTML elements to the DOM attributes. Because it is a library of predefined functions, all you need to start using jQuery is a working knowledge of the syntax and a reference for the functions available to you.</p> <p>This practical guide shows you how to make the most of jQuery to boost the performance of your websites and applications. We start off with a quick glance through the basics of JQuery, followed by the explanation of JQuery selectors, filters, and DOM element manipulation. After this, you will learn how events and animations can be used to create and design beautiful and user-friendly sites. Next, you will be familiarized with Ajax functions to help you send and receive data from your server. Finally, we’ll walk you through using built-in plugins and eventually create your own plugins for your websites.</p> <p>By the end of this book, you will be able to to build robust and efficient websites successfully using JQuery.</p>
Table of Contents (17 chapters)
jQuery Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

The major components of jQuery


Looking at the jQuery API page, http://api.jquery.com, for the first time can be mind-numbing. It lists over 300 different methods. Don't freak out; there is a method to the madness. Most of the API methods can be divided into just a few categories.

The DOM selection

These are the methods that give jQuery its name. They help find the element or elements that you are looking for in the document object model (DOM). If you know browser JavaScript, you are probably thinking what is the big deal? It has always been possible to query the DOM. There are document.getElementById, document.getElementsByClassName, and so on. But the interface of jQuery is much cleaner than any of these methods. jQuery uses CSS-style selectors to parse the DOM, and it consistently returns a jQuery object as an array of zero or more elements.

The document methods return different things depending on which method you call. If you call document.getElementById, it returns either an element object or null if the element is not found. For document.getElementsByClassName, it returns HTMLCollection, an array-like object.

DOM manipulation

Once you have found an element, you will usually want to modify it somehow. jQuery has an extensive set of manipulation methods. The built-in document methods can't compare. jQuery's methods allow you to delete or replace markups. You can also insert a new markup before, after, or surrounding the old markup.

Events

Being able to handle events is crucial to creating a dynamic website. While modern browsers all pretty much follow the standards, this wasn't the case a few years ago. jQuery makes it possible to support both modern and old browsers from the same code base.

Form

A good number of websites on the Internet have one or more forums to send user information back to a web server. These methods make it easier to send the information back to a server.

CSS and animation

CSS methods are convenience methods and aid the handling of classes and the locations and dimensions of elements. Unlike the built-in JavaScript methods, they do far more than simply reading the class attributes' string; they allow you to add, remove, toggle, and check for the presence of a class.

Animation methods are simple but add polish to your website. No longer do you have to settle for a markup, which appears or disappears; now, it fades in or out or even slides in or out. And if you are so inclined, you can use jQuery's effect framework to create your own custom animation effects.

Ajax

As we've already discussed, Ajax is one of the main features of jQuery. Even if you don't need to support legacy browsers, jQuery's Ajax methods are much cleaner than those of the browser. They also have built-in support for asynchronous success and error functions and even return a JavaScript promise object.

Helpers

The final, main group of jQuery methods is about helper functions, such as .each(), to iterate over a collection. jQuery also adds methods to determine the type of a JavaScript object, and it functions strangely missing from the language. Plus, it adds other methods that don't fit neatly into a category.