What jQuery is
jQuery is a JavaScript library that shortens common page tasks: finding elements, changing text and classes, handling events, animation and requests to the server. This course targets jQuery 3.7, the current version used by most projects.
A first example
The whole library is available through one function, $ (its other name is jQuery). You pass it a CSS selector and it returns the matching elements:
<h1>My tasks</h1>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$('h1').text('To-do list');
console.log($('h1').text()); // To-do list
</script>The first <script> tag loads jQuery, the second changes the heading text. Below the example you see the new heading and the console.log output.
The same in plain JavaScript
From the DOM chapter of the tutorial you know how to do this without a library:
<h1>My tasks</h1>
<script>
document.querySelector('h1').textContent = 'To-do list';
</script>The difference is small. But jQuery works with all found elements at once: $('li').addClass('done') marks every list item, while plain JavaScript needs a loop.
Why jQuery appeared
The library came out in 2006, when browsers supported JavaScript differently. jQuery hid those differences: the same code worked everywhere. Browsers have converged since then, and almost everything jQuery does is now in the language itself: querySelectorAll, classList, fetch, addEventListener.
Is it worth learning today
| Situation | Do you need jQuery |
|---|---|
| A new React, Vue or Svelte project | No, they have their own approach |
| A new small website | Plain JavaScript is usually enough |
| A WordPress site, its themes and plugins | Yes, jQuery ships with WordPress |
| An existing jQuery project | Yes, it has to be maintained |
| jQuery plugins: sliders, input masks | Yes, they require the library |
jQuery is still loaded on a huge number of websites, so reading and fixing such code is a useful skill. The last chapter has a lesson on moving from jQuery to plain JavaScript.
The course example
One example runs through the whole course: a to-do list with an input field, an "Add" button, and items you can mark as done and delete. The form lessons add a simple sign-up form.
Common mistake
The code that uses $ comes before the library is loaded:
<script>
$('h1').text('Hello'); // Error: $ is not defined
</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>The browser runs scripts in order, and at the moment of the call the $ function does not exist yet. Load jQuery before your own code.