Advanced: Web Development with jQuery
jQuery Links to an external site. is a JavaScript library designed to simplify the processes of traversing and manipulating elements in client-side HTML. It is an open source library commonly found on many sites.
Adding and Loading the Library
As an external library, jQuery needs to be added to a project in order to use it. While many tools come with or utilize jQuery in different ways, a fresh project using no other tools or project management software will need to add jQuery to the project using one of two different ways.
Externally Loading
As a popular library used on many sites, jQuery can be loaded from an external content delivery network (CDN). Hosting common libraries and other resources, many large companies have their own private and sometimes even public networks for loading libraries they or their customers use the most to help with bandwidth and loading concerns.
jQuery can be loaded from many different CDNs. It can be found on Google’s Links to an external site., Microsoft’s Links to an external site., and on CDNJS Links to an external site.. To use any of these, simply copy the link provided for the library or additional functionality wanted into a SCRIPT tag.
Local Usage
jQuery can be downloaded in both compressed and uncompressed versions from its website Links to an external site.. Often, it is highly recommended to start with the uncompressed version when developing or testing code, because it is human readable and you can more easily diagnose potential problems. When the code is ready for a more public audience, it can be switched over to the compressed version to save bandwidth and space.
Where do I put the jQuery SCRIPT tag?
Generally, it is recommended to place jQuery in the HEAD section for most projects. For any code that uses or is based on jQuery, it should be placed either right after or in a place that makes the best sense for the project.
Using Selectors
One of the core operations jQuery was designed to solve is better traversal of the document object model (DOM). While it supplies functions like getElementById() Links to an external site., getElementsByClassName() Links to an external site., and querySelector() Links to an external site., these can be complicated to use and often require many lines of code to complete common tasks. jQuery helps with this task through the same functionality all three of the DOM functions also use: selectors.
Selector Options
jQuery has a long list of possible combinations of things Links to an external site. that can searched for in an HTML document. From searching for an element by ID Links to an external site., elements by their classes Links to an external site., and even children elements that are at a certain depth (level) away Links to an external site., many different types of elements can be found easier using jQuery.
Selectors
Using a selector starts with the dollar-sign, $. In jQuery, a selector starts with the dollar-sign and then the selector in quotations within parentheses following it. This is a function call that uses the selector as a search parameter.
Selector usage returns either no results, one element, or multiple elements. For the case of returning multiple elements, the list will be an array.
Manipulating Elements Using Selectors
Finding elements is only half of the designed purpose of jQuery. The second core purpose is to manipulate those elements once found. jQuery has many different functions Links to an external site. for changing the content, attributes, and placement of elements.
One of the commonly-used functions is append() Links to an external site.. This inserts content at the end of any existing element matching the selector on which it is applied. This is a common way to change the document through finding certain elements and adding to their existing content. When you're generating a dynamic page, you can add content flexibly with append ().
Depending on the task, this could be be done through using text() Links to an external site.for text content or even html() Links to an external site. to change the inner HTML of the element or to overwrite existing content.
Try it
See what happens to the class emptyElement below, and then try out changing what happens or which class the items are to see how that makes a difference.
When is the document ready?
One of the most common problems when using jQuery is understanding when elements are loaded and ready. In order for an element to be found using a selector, it must exist. However, knowing when certain elements exist can be a confusing issue during loading times and across browsers that handle things in different ways. And that means that if scripts just run, they might call on something that's not there yet.
jQuery has a solution for this problem in its .ready() Links to an external site. function. This will be called after all of the elements are loaded and ready to be found or changed. It can also be written with the shortcut $(), which is increasingly more common. .ready() Links to an external site. ensures that the script doesn't try to execute before the necessary components have loaded and fail.
When using the .ready() or its shortcuts, code using jQuery can be included as separate files or, when in the same document, after the elements on which they act.
Reacting to Events
Beyond finding and changes elements, jQuery also supports a robust set of functions for listening and reacting to events within a browser. While most browsers have the standard addEventListener() Links to an external site., jQuery has shortcuts and quick functions for accessing the common tasks associated with dealing with events Links to an external site..
On()
One of the most commonly-used functions for listening for events is the on() function Links to an external site. in jQuery. It works through supplying the event (as a string) and then a function to run when that event happens.
Frequently, although not always, an anonymous function (Need a refresher on functions?) will be used with on() to act on the event. Within this function, other selectors and actions can take place. For the situations where the result of the selector is needed, the this keyword can be wrapped in the selector function, $() Links to an external site., to make it a jQuery object.
To change the text content of the element(s) on which the on() function had been used, for example, it would be the following: $(this).text().
So here, clicking generates a string describing the action, which is then taken as input: 
One()
The function one() acts like the function on(), but only runs at most once. For the situations where a single event or action needs to happen, this is a very useful shortcut.
Click() and Other Events
To help with the common tasks of listening for certain events, jQuery has shortcut versions Links to an external site. of many events like click() Links to an external site. and keypress() Links to an external site.. These are used like on() and one(), but do not have the first parameter of listing the event. The name of the function itself signals for which event it is used.
Try it
See what happens when you click on the elements below, and then try out changing what happens.
Ajax
Commonly written with a capital first letter, “Ajax” is a an acronym originally standing for Asynchronous JavaScript And XML (AJAX). When the technique first came into common usage around 2005, it was used with XML to communicate with a database to get data and react to it after a webpage had initially loaded.
Over a decade later, it is core to how many sites function and continues to serve as a fundamental web technology driving nearly all interactive websites and projects. You might use Ajax for form validation--to check whether something is a real zip code and not just 5 random numbers, for example.
Using Ajax in jQuery
Note: Retrieving data from a service or content from a webpage can have many potential challenges. To protect the user from different ways they can be attacked or preyed upon, many browsers have built-in safeguards that block out-going requests across protocols (HTTP or HTTPS), depending on what are called Cross-origin resource sharing (CORS) rules, and on the content in which data sent or requested. Depending on the service or server, there be additional rules or expectations as well.
Similar to using a selector and a function on the result, the ajax() Links to an external site. function in jQuery accepts an object parameter of different properties to set. The done() and fail() functions are called depending on the outcome. If everything worked, the done() function is called. If not, or there was a problem of some sort, the fail() function is called.
Once content has been retrieved (and no problems were encountered), additional actions can be taken depending on the content and how it should be handled. For example, when working with text content, a common action might be to append the text to an element or act on it somehow.
Try it
See what happens below, and then try append to add some more text.