This article will explain what JavaScript and jQuery are, how they differ, and how/why they should be used.
What is JavaScript
JavaScript began life in the mid-1990s as a scripting language for adding interactivity to web pages.
Over time it has been developed into a full-featured programming language, which can even be run outside the web browser (more detail on this in our Node.js article).
You can also see our article outlining the differences between JavaScript and Typescript here.
What is jQuery?
jQuery is a library written in JavaScript.
It is not a separate language or implementation – it’s just a helpful set of tools written in JavaScript. It uses the same syntax and runs in the same place; it’s just a bunch of extra tools that make it easier to add interactive elements to your page, fetch and parse data, and perform logic.
Specifically, jQuery’s primary purpose is to make it easier to interact with the HTML DOM.
It also contains useful tools for retrieving data from APIs and web services using REST and AJAX.
What is the HTML DOM, and how is jQuery helpful with it?
When working with HTML webpages, the DOM (Document Object Model) is the tree structure formed by the HTML tags in it.
Each HTML element is represented in the DOM – paragraphs, tables, images, links – everything.
jQuery lets you easily navigate and modify the DOM to access and alter page elements. The helper functions provided by jQuery are far easier to use than trying to do the same thing in plain JavaScript.
For example, consider this HTML table (called “peopleTable“) containing Name and Age columns:
<table id="peopleTable">
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
<tr>
<td>
Bob
</td>
<td>
34
</td>
</tr>
</table>
The DOM can be easily traversed using jQuery to select the table and add a row:
$('#peopleTable tr:last').after('<tr><td>Tim</td><td>21</td></tr>');
Above, jQuery finds the peopleTable and then finds the last row in the table and adds a new row after it (containing a record for Tim).
Doing this in JavaScript is a lot more laborious and harder to read:
var newRow = document.getElementById('myTable').getElementsByTagName('tbody')[0].insertRow(document.getElementById('myTable').rows.length);
newRow.innerHTML = '<tr><td>Tim</td><td>21</td></tr>';
So, Which Should I Use?
jQuery is not inherently better than JavaScript – it’s just a library that extends JavaScript’s functionality. It may or may not be suitable for your needs, depending on what kind of application you are building.
JavaScript has matured a lot since jQuery had its heyday, so many of the problems solved by jQuery are now no longer issues when writing JavaScript code. It’s certainly worth looking into whether you actually need to use it – relying on big helper libraries isn’t always the best way to write code now that JavaScript has come of age.
More modern JavaScript libraries like Angular and React are alternatives to jQuery, which may work better for you, especially if building mobile apps.
What jQuery is not suitable for is server-side work. Applications running in Node.JS do not have an HTML page to traverse, so the purpose of jQuery isn’t relevant inside Node.js applications.
