- Introduction
- History
- Popularity
- jQuery Libraries
- How to install jQuery
- How to code with jQuery
- Conclusion
Introduction
This is an overview of jQuery which is a popular JavaScript library. This guide covers its history, status, and how to integrate it with your websites. This is great for someone new to jQuery and interested in using it to code their website or learning more about it.
History
jQuery has been around for a fairly long time, it was announced and released back in January 2006 at a community event known as BarCampNYC. It was created by John Resig, who worked previously as a software engineer, currently, he's working at Khan Academy as Chief Software Architect. The first official version of jQuery was released on 26th August 2006, the screenshot below shows how the website looked back in the day.
In 2012 the jQuery Foundation was formed as a non-profit organization to support the development of jQuery which was at the time made up of multiple packages: Core, UI, and Mobile.
In 2016 the jQuery Foundation merged with the Dojo Foundation to form the JS Foundation. They aimed to support the development of Javascript technology by collaborating with the community to provide Javascript applications, best practices, and policies.
As of today, jQuery is currently maintained by a group of volunteers and it gets updated regularly.
Popularity
So how popular is jQuery today? Well according to W3Techs it's used by 77.3% of all websites.
jQuery is used by 94.4% of all the websites whose JavaScript library we know. This is 77.3% of all websites..
W3Techs market share statement on jQuery
Other stats have some relevance, Stack Overflow is a website for developers to ask questions and give answers on developer errors, and issues. Stack Overflow conducts a yearly survey asking developers questions about the technologies they use.
In their 2023 Developer Survey for the most popular web technologies used by professional developers, jQuery came in at 22.87% out of all 56742 developers who answered this question.
Even though jQuery is still going strong, there are now what are called JavaScript frameworks that compete with jQuery.
You may have heard of Angular, React, and Vue.js, they are JavaScript frameworks. The big difference between these and jQuery is that jQuery is used solely for JavaScript whereas a JavaScript framework is used to write your HTML, CSS, and JavaScript.
Also, JavaScript frameworks are used to build a single page application (SPA) which means upon visiting a website the entire website is loaded at that point. This means when you navigate to another page it won't send a request to the server to load the next page as it's already loaded so the next page will show instantly with little to no loading time.
This table shows the Stack Overflow results comparing the top three JavaScript frameworks with jQuery.
| Position | Technology | Percentage |
| 1 | React | 42.87% |
| 2 | jQuery | 22.87% |
| 3 | Angular | 19.89% |
| 4 | Vue.js | 17.64% |
As new applications are being built with Angular, React, or Vue.js, jQuery is used less. This would mean jQuery will lose market share as developers will move to using Javascript frameworks instead.
However, as there are a lot of existing websites that do use jQuery then it may take a long while before jQuery becomes irrelevant. According to W3Tech, it's still going strong in website market share.
As of the 2nd February 2024, the number of websites using jQuery according to W3Techs is 77.3% so right now is still a good time to start learning and coding with jQuery as existing websites will still use it.
Also, another statistic to show its high popularity, according to npmjs.com which is where the npm version of jQuery is hosted it receives as of writing jQuery receives 9,255,207 weekly downloads.
jQuery Libraries
This section covers the different types of jQuery libraries available as jQuery isn't necessarily a standalone library, it's made up of a group of libraries that do different things.
jQuery Core
This is the main version of jQuery, whenever you hear anyone refer to jQuery. It's called jQuery Core to differentiate it from the other types as all other libraries use the jQuery name.
jQuery Core - Slim
This is the same as jQuery Core except it doesn't include the following features to provide a lighter and faster version of jQuery Core.
- AJAX
- Effects
- Deprecated code
jQuery UI
jQuery UI is a library used with the jQuery Core library to add extra features. These extras are drag-and-drop functionality, GUI widgets, animation effects, themes, and element positioning.
jQuery UI is currently in maintenance mode so no new features are planned to be added in the future. It's still supported in security and compatibility with the main jQuery Core library.
jQuery Mobile
Please note: jQuery Mobile should NOT be used as it's no longer supported
jQuery Mobile is a library to write Javascript code that integrates mobile-specific features and is cross-compatible with multiple mobile operating systems. As it's no longer supported it may not work with the latest mobile phones, therefore, this library should be avoided and not used at all.
jQuery Sizzle
jQuery Sizzle is a CSS selector, you can use jQuery Core to target CSS properties and run JavaScript code against it. In my opinion, this isn't a required library as in most cases you can use jQuery Core if needed to target CSS.
QUnit
QUnit is a JavaScript testing framework, this is standalone from jQuery so jQuery isn't required for this library to work. Not only does it work in the browser but also server-side JavaScript with Node.js.
How to install jQuery
There are various ways to add jQuery to your website, here are the different ways to do it.
Including the online version
If you want to use a hosted version of jQuery then it's available from the main website. Click the brown button labeled Download jQuery to get the latest version.
You will be taken to the Download jQuery page, find the link that shows "Download the uncompressed, development" text, and click the link. If you were to be adding jQuery to a live website you would use the "Download the compressed, production" link.
You will be shown the source code for the jQuery library, click on the top URL bar, and copy the URL.
In a new script tag add the following to include jQuery to the website. So whenever the website loads jQuery will also be loaded.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>Including a local version
Go to the Downloading jQuery page for jQuery and right-click the "Download the uncompressed", development link, and click the Save link as... option to save jQuery as a file.
Move the jQuery file to the same location as your index.html file and you can use the current location to include it in your website.
<script type="text/javascript" src="./jquery-3.7.1.js"></script>How to code with jQuery
After including jQuery through the script tag you can now use it when you load your website. This section covers the fundamentals of what you can do with jQuery.
Running on page load
Use the following code to run jQuery code when the website loads up. How this code works is the $(document).ready function is only called after the page has finished loading up. If you try to run jQuery without this function then jQuery can't target HTML elements because the jQuery code will run before the HTML elements have loaded.
$(document).ready(function() {
// Add jQuery code here
});Selectors
Selectors are the first thing you need to learn to use the rest of jQuery as it allows you to target HTML elements.
Here is code on how to use selectors, within the brackets you add in the type of HTML you want to target so in the below example you will target all <a> HTML tagged elements on the page.
$("a")The above command will target all <a> tags but what if you wanted to target a single <a> HTML element? Add an ID attribute to the tag and enter a hash (#) followed by the name of whatever you named the ID for the <a> tag.
$("#blog-link")To target HTML elements by the class attribute you would name the elements with the class name and then enter a dot (.) followed by the class name to target all elements with that class name.
$(".nav-links")If multiple HTML elements use the same class name you can target by using both the element name and class name.
$("a.nav-links")Manipulation
After using selectors to target HTML elements you can do certain things like changing the content of the HTML. The below example targets a <p> tag and adds text to it.
Adding text
If multiple HTML elements use the same class name you can target both the element name and class name.
$("p.main-section").text("This is a really important message");Events
What are events?
Events are essentially actions that occur on the website. One common example is when a user clicks a button, after the button click you may want to run an action using JavaScript / jQuery code.
Click event
The following example will run the JavasScript submitForm function every time the button with the ID form-submit-button is clicked. You can run any code within the function passed into the click function.
$("#form-submit-button").on("click", function() {
// Run code here after click
});AJAX
What is AJAX?
AJAX stands for Asynchronous JavaScript And XML, it means sending a request to a web server and retrieving back XML data (or now more commonly JSON data) without causing the web browser to refresh causing the page to reload the whole website again.
It's my personal belief that jQuery was a big contributor to popularizing the use of Ajax which paved the way for making websites more dynamic in terms of website changes happening without refreshing or navigating to pages.
How to send a GET request
Let's say I wanted to get some JSON data from an API you do something like the following code example. The $.get will send a request to the API endpoint at https://api.devpushprojects.com/countries and the success function is where you can add some JavaScript or jQuery code to do something with the data like adding the API data to the page of the website.
$.get(
"https://api.devpushprojects.com/countries",
function(data) {
// Do something with the data
console.log("countries", data);
}
});How to send a POST request
For the majority of cases when there's a form on a website for you to fill in the text fields and click the submit button the website will send a POST request to the website's server. You typically use POST requests whenever you want to send data back to the server.
The code below will be similar to how the GET request is made except you will pass in parameters instead to send data back to the server. The second parameter for the $.post method takes in parameters and the third parameter is the function to handle the response the server sends back.
$.post(
"https://api.devpushprojects.com/countries",
{
"name": "Spain"
},
function(data) {
// Do something with the data
console.log("new country", data);
}
});Effects
jQuery also includes functions that provide animations to your website such as fade and sliding. These are used for showing, hiding, or moving HTML elements on the page.
This example shows how you can use the slideDown function to show some hidden text on a button click. The click event happens, then the slide-down animation occurs and finally at the end of the slide-down animation code can be run within the function passed into the slideDown function.
$("#show-text-button").on("click", function() {
$("#hidden-text").slideDown("slow", function() {
// Run code after text is now shown.
});
});Conclusion
This guide has provided an overview of jQuery by detailing its history, its current popularity and usage, how it compares with modern JavaScript frameworks, the different jQuery libraries, installation, and an introduction to how to code with it.
At this point, you have all the relevant information needed to start coding with jQuery. There are more functions that jQuery provides not covered in the guide as there is a lot to go through. Mastering jQuery isn't quick and will take time for you to get used to and code, best of luck in your journey to use jQuery.