Web developers use JavaScript every day to bring the necessary functionality to the websites they create. One particular tool that provide a great deal of power and flexibility is jQuery.
jQuery is a JavaScript library that helps to simplify and standardize interactions between JavaScript code and HTML elements. JavaScript allows websites to be interactive and dynamic, and jQuery is a tool that helps streamline that process. We are going to take a high level look at what that means, how it works, and why it is so useful.
Let’s consider one example of how JavaScript can be used to make a website interactive: a button that, when clicked, shows or hides a menu. There are a number of ways of accomplishing this, so let’s compare a few of them:
First, “inline” JavaScript is exactly what it sounds like; putting JavaScript code into the HTML document, directly on the element you want to have trigger an action (in this case, by adding an “onclick” attribute on the button element). Second, we could move that JavaScript code to an external file and attach an “event listener” to the button. Finally, we could use jQuery to ‘find’ the button element and add a ‘click’ method.
To illustrate the differences between these various options without getting deep into code, let’s consider some pros and cons of each approach:
Inline JavaScript
With inline JavaScript, the code is “baked” right into the HTML, which immediately presents a few problems, especially because it violates the principle of Separation of Concerns, or SoC. This is the idea that your HTML (content), CSS (style), and JavaScript (behavior) should not be mixed. In a practical sense, SoC helps avoid problems where making a change to one “concern” negatively affects others. For example, our code could easily break if we changed the page’s HTML structure or wanted to add a second button.
Event Listener
Moving our JavaScript to an external file and attaching an event listener to the button allows us to separate our concerns, but now we need a way to tell the JavaScript function which element to watch for clicks (the button), and which to toggle (the menu). Assigning ID attributes to each element, and then referencing those in the JavaScript, is the easiest and most reliable way to do so, but there are a couple of downsides with this approach.
First, this approach assumes that we are able to manually assign IDs to each element we are ever going to “touch” with JavaScript (which can be problematic if you are using a CMS), and that those IDs will never change. Also, IDs have to be unique and not repeated on a page, so having multiple instances of the same functionality can become complex very quickly. Finally, each browser implements things a little differently, so cross-browser compatibility is a major concern that will increase code complexity (as a quick example, the methods to add event listeners, such as mouse clicks, changed between Internet Explorer 8 and 9, so both methods would need to be included for the same functionality to work, just in two different versions of the same browser).
jQuery
When considering the concerns of the previous two methods, the usefulness of jQuery becomes apparent. Working behind the scenes, jQuery does all of the heavy lifting required to make finding HTML elements simple, and to take care of cross browser compatibility issues. All we need to do is write something like:
$('.button').click( function() {
$('.menu').toggle();
});
It’s possible to use ID attributes with jQuery, but you can just as easily use classes (or even selectors such as “:first” or “:hidden”) to find elements, and then simply use the “click” method to attach an event listener that responds to the user clicking (or tapping) the button, and the “toggle” method to show and hide the menu when the button is clicked.
Also, in this example, we’d be able to add another button on the page by simply adding another element within the “button” class, and the jQuery selector $(‘.button’) would find and attach the click method to it automatically. If we ever need to change which elements are used, the code is available to update all in one place.
This is just one small and simple example, but the advantages to this method are clear. jQuery provides for much faster development and produces code that works in a wider range of browsers. There is some added overhead, because the jQuery library has to be downloaded and parsed, and using raw JavaScript can lead to better performance for some operations, but in general, the benefits of jQuery vastly outweigh the drawbacks. This is why jQuery is used by most of the top websites in the world, and why we use it here at Diagram.
Do you want to know more about how we use jQuery when developing websites? Do you have any questions about how to use jQuery to implement the functions you need on your website? Please feel free to leave a comment below, or contact us to speak to a Solutions Engineer. We’d love to hear from you!
