jQuery – The most used JavaScript Framework

26 October, 2015ipivanovNo CommentsJavaScript
61

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

The set of tools used to allow modification and control of the DOM are a bit of mess because they differ across browsers, generally for historical reasons. To make your job easier, a number of libraries have been created that hide these differences, providing a more uniform way of interacting with the DOM. Often they also provide AJAX functionality, taking the burden of that complexity away from you.

jQuery is far and away the most popular DOM library and it is used on a huge number of websites.

By the way, the way you interact with the DOM (or any service that you use via code) is called an Application Programming Interface or API.

jQuery has a very distinctive syntax, all based around the dollar symbol. Here’s some:

$('.btn').click(function() {
// do something
});

This code attaches a click handler to all elements with a class of btn. This selector syntax is core to jQuery.

jQuery is added to a page by simply including it as a file using a script element. Download it from jquery.com, or include it from a Content Delivery Network (CDN) such as CDNJS:

In the following pages we’ll be taking a look at jQuery for selecting and manipulating elements, AJAX and at some of its other useful tricks.

It’s not always the best idea to use a library, and it’s best to choose whether to use a framework based on the specific project. For example, jQuery is a large file to introduce to a page and slow the downloading of that page, particularly on mobile browsers with potentially weak connections.

jQuery: DOM API

Selecting elements and interacting with the DOM are things you’ll probably use jQuery for the most. Luckily it’s really easy to do because the syntax for choosing an element, or set of elements, is exactly the same as element selection in CSS.

jQuery also makes performing actions on many elements at the same time simple, which is incredibly useful.

In the example below $('.note') selects all the elements with a class of note on the page and then we set the background of all of the note boxes to red and their heights to 100px.

$('.note').css('background', 'red').height(100);

jQuery uses a really neat chainable syntax that allows code like the above. This works because, for any kind of “setting” method, jQuery returns the same thing as the selector function (“$”) does: $ is a function that returns a jQuery wrapperaround an element. .css is a method of that jQuery wrapper and it too returns the same wrapper. .height sets the height (duh) of the element selected, and of course there’s an equivalent for width.

Getters and setters

In the above example we used .css and .height to set the value of the element but these methods are also getters. Calling .height without any value returns the current element’s height and calling .css with just a CSS property name retrieves the property’s value.

If you’ve got more than one element selected (you have lots of note elements, say) a getter will retrieve the value for the first of them.

Context

It’s sometimes useful to limit the area of the DOM from which an element can be selected. The area of the DOM used is also known as a different context.

To tell jQuery which area you want to select from you pass a second argument that can be a DOM element, a string selector (selecting an element that jQuery will find and use) or a jQuery object. jQuery will only search within this context for your selector.

Here’s an example. Notice that the variables that are used to store jQuery objects begin with a dollar. This a convention to help you and readers of your code understand that it’s a jQuery object being saved.

var $header = $('header'),
$headerBoxes = $('.note', $header);

jQuery: AJAX

jQuery has some AJAX helper methods that save time and are much easier to read. They are all properties of the $variable: $.get, $.post, and $.ajax.

$.ajax is the main method, allowing you to manually construct your AJAX request – the others are shortcuts to common configurations, like getting data or posting it.Here’s an example that gets some data from a server:

You can see that a configuration object is used to tell jQuery how to get the data. The basics are supplied: a URL, the method (which actually defaults to get) and a function to be called when the data is retrieved, named the success callback.

$.get

This example is just getting some data and, because this is a very common activity, jQuery provides a helper: $.get.

$.get('/data.json', function(data) {
console.log(data);
});

You can also provide an error callback, which will let you know if something goes wrong and the server can’t be reached:

$.post

Sending data to a server is just as easy, using the $.post method. The second argument is the data to be sent – it can be almost anything except a function: jQuery will figure out how to send it for you. How convenient!

jQuery: Other Tricks

jQuery also helps you out with other common tasks, particularly where things are inconsistent across browsers.

DOMContentLoaded

Sometimes you will want to run JavaScript only when the DOM is loaded and ready (but before stylesheets are fully loaded) – for example, to move elements to a different location in the page, or create new ones. We can do this in pure JavaScript (although this will not work in all browsers):