It would be hard to overstate the impact jQuery had on web development after the open-source JavaScript library was released more than 15 years ago.
A toolbox that created a new shorthand for otherwise complex JavaScript programming, jQuery continues to live up to its developers’ motto: “Write less, do more.”
Even today, jQuery is popular among professional developers, while others with little or no programming experience can use the library to add advanced functionality to their websites. Here’s what’s behind one of web development’s biggest success stories.
Check Out Our Video Guide on jQuery, the Web’s Most-Used JavaScript Library
How Popular Is jQuery?
StackOverflow’s 2022 survey of web technologies used by professional developers found that just over 29% of more than 45,000 respondents were working with jQuery. Among the JavaScript libraries, jQuery was second only to React.js, the library first developed at Facebook (now Meta) in 2011 and which is now embraced by over 44% of those developers.
But the current projects of web developers don’t tell the whole story. Based on BuiltWith’s Internet technology trends, jQuery was found on more than 80 million websites in 2022. That’s a huge lead over the nearly 11 million websites running React.
The jQuery library has been bundled with the core of WordPress for more than a decade, making it available out of the box to hundreds of themes that rely on its functionality to create dynamic websites. Drupal is another popular content management system that has included jQuery among its core components. No matter what technologies are the current favorites of developers, jQuery remains the most-used JavaScript library on the web.
A Brief History of jQuery
The battle of the browsers has waged since the beginning of the web, and developers have always been casualties. In 2006, when web developer John Resig unveiled jQuery, Microsoft’s Internet Explorer browser was the undisputed market leader — a reversal of Netscape’s advantage less than a decade earlier.
At the time, Mozilla’s new Firefox had a 10% market share (compared to Microsoft’s 84%) and Apple’s Safari had just appeared on the scene. Google’s Chrome, today’s market leader, didn’t exist. JavaScript programmers like Resig regularly struggled to write code that would run in all browsers.
His new jQuery library was built to address the differences in the way JavaScript was implemented by those browsers and help developers write less code while accomplishing tasks like these:
- Manipulating the HTML elements in a web page
- Dynamically modifying CSS
- Responding to events like mouse clicks and key presses
- Handling Ajax requests to update a page’s content without reloading
Following Resig’s release of the library, other developers built applications on top of jQuery, often sharing their work as plugins to make new functionality available to everyone.
What Is jQuery UI?
jQuery UI is a popular collection of plugins designed to enhance user interfaces. It’s seen as an “official” companion to the core jQuery library and adds a host of special effects and such widgets as date-pickers, progress bars, sliders, spinners, and tabbed or collapsible panels.
What’s the Difference Between jQuery and JavaScript?
It’s important to know that jQuery is JavaScript. When you use jQuery, you are working with instances of JavaScript objects that reflect jQuery’s naming conventions for methods (functions) and properties. Let’s take a look at vanilla JavaScript and jQuery, tackling the same task.
Here’s a snippet of HTML somewhere on a web page:
<p id="target">Old text</p>Vanilla JavaScript code that can find the <p> element with the id “target” — and then replace the text between the tags — could look like this:
const content = document.getElementById( "target" );
content.textContent = "New text";JavaScript’s getElementById() method returns an object that includes the HTML and the text content of the paragraph with the “target” id. The object is assigned to the constant reference content, then its textContent property is changed to “New text”.
JavaScript allows you to chain methods, making it possible to achieve the above with a single statement:
document.getElementById( "target" ).textContent = "New text"; Not surprisingly, then, you can also chain jQuery actions. To change “Old text” to “New text” using jQuery, you could do this:
$( "#target" ).text( "New text" );The dollar sign ($) is a short alias for jQuery, and ( "#target" ) is an example of a jQuery selector. In this case, the selector is looking for an HTML element with the id of our target paragraph. The jQuery text() method is chained to make “New text” the paragraph’s content.
How To Use jQuery on Your Website
Add jQuery to your website by linking the library’s code from the site’s pages. The jQuery library could be on your web server or a publicly accessible content delivery network (CDN). The official jQuery website can hook you up with the latest versions of the library.
The jQuery library is available in minified (compressed) JavaScript for fast loading in production or uncompressed for readability and debugging.
You will also write at least a little JavaScript to invoke jQuery and tackle tasks specific to your web application. In the HTML of your website’s pages, you can link the jQuery library and the file containing your code like this:
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>In this example, version 3.6.0 of jQuery and your site-specific code in a file called my_script.js are located in the/js/ directory on the website. The jQuery library is usually included in the <head> section of a web page. It’s common for developers to place some links to JavaScript files, including code that relies on the jQuery library, near the bottom of a page, usually just before the closing of the <body> tag. You will always want any site-specific code that invokes jQuery to appear after the link to the library itself.
Linking to jQuery on a CDN
The jQuery library will often download faster when delivered by a robust CDN. jQuery is so ubiquitous across the web that there is a good chance a visitor to your site will already have the library cached in their browser for multiple CDNs. We can modify the HTML snippet above to make use of Cloudflare’s JavaScript content delivery network like this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>Invoking jQuery in Your Application
When writing your jQuery application, a best practice is to confirm that the web page has finished loading before your code begins to run. You can test this by using the ready() method, which hands off your code when the document has loaded, like this:
$(document).ready(function() {
// Your jQuery application will go here
});That start for a jQuery application is so common that the library’s developers have devised even briefer syntax:
$(function() {
// Your jQuery application will go here
});Selecting Elements in the DOM with jQuery
The foundation of most jQuery applications is the ability to traverse the structure of a web page as an object (the document object model, or DOM) and target various elements within the HTML. Selecting an element (or a group of elements) is the step before doing something with that element, like changing its appearance or updating nearby content. jQuery selectors target DOM properties in a variety of ways. The most common include:
- By HTML element (tag) name
- By CSS properties (including IDs and class names)
- By the relative position of an element within the DOM
- By the value of the content in form fields
- By the current state of an element
Here are some examples:
// Select all HTML paragraph tags in a document
$( "p" );
// Select the element with the ID "myID"
$( "#myID" );
// Select all elements with the CSS class name "myClass"
$( ".myClass" );
// Select all input, textarea, select, and button elements in a form
$( ":input" );
// Select the children of some other element
// (In this case, the entries in an unordered list)
$( "ul > li" );
// Select all anchors with the rel attribute “nofollow”
$( "a[rel='nofollow']" );
// Select all checkboxes in a “checked” state
$( "input:checked" )You can combine jQuery selectors for more-specific targeting. Examples:
// HTML paragraph tags with the CSS class “myClass”
$( "p.myClass" );
// HTML paragraphs with the text “Kinsta” anywhere within them
$( "p:contains('Kinsta')" );
// HTML div tags that have at least one paragraph tag as a descendent
$( "div:has(p)" );
// The first entry in any unordered list with the CSS class “myList”
$( "ul.myList li:first" ); Manipulating the DOM With jQuery
Now that you know how to select various elements within a web page, you can modify them using jQuery methods. As mentioned earlier, you can often chain these actions to get a lot done with little coding. Some examples:
// Select the element with the ID “alert” and add a red background
$( "#alert" ).css( "background-color", "red" );
// Select the element with the ID “alert” and add the class “urgent” to its markup
$( "#alert" ).addClass( "urgent" );
// Find any paragraph with the class “myName” and make its content “Kinsta”
$( "p.myName" ).text( "Kinsta" );
// Like the statement above, but with support for HTML markup
$( "p.myName" ).html( "<strong>Kinsta</strong>" );
// Add the attribute/value rel=”nofollow” to every anchor
$( "a" ).attr( "rel", "nofollow" );
// Hide the element with the ID “myDiv” (but keep it in the DOM)
$( "#myDiv" ).hide();
// Make the element hidden above visible again
$( "#myDiv" ).show();
// Remove from the DOM everything INSIDE the element with the ID “myDiv”
$( "#myDiv" ).empty();
// Remove from the DOM the entire element with the ID “myDiv”
$( "#myDiv" ).remove();Handling Events With jQuery
The kind of DOM manipulation described above would go unnoticed by web visitors if it all happened as soon as a page loaded. That’s why your jQuery application can detect and respond to events like mouse clicks, mouse movement, keystrokes, and more to create a truly responsive experience.
Detecting Mouse Clicks With jQuery
Responding to the click of a mouse (or a tap on a touch-screen device) is a common task for web applications. We’ve combined some jQuery and HTML in an example that also takes advantage of jQuery’s built-in event object, which will contain useful information about our “click event”:
<script>
// Invoke jQuery
$(document).ready(function () {
// Assign “click” method to all button elements
// Our function passes the built-in object with event details
$( "button" ).click(function ( event ) {
// Make sure all button backgrounds are white
$( "button" ).css( "background-color", "white" );
// Change our H2 text to report the ID of the clicked button
$( "#buttonReport" ).text("You clicked " + event.target.id);
// Set the background color of the clicked button to red
$( "#" + event.target.id ).css("background-color", "red");
});
});
</script>
<h2 id="buttonReport">Click a button!</h2>
<button id="Button1">Button 1</button>
<button id="Button2">Button 2</button>
<button id="Button3">Button 3</button> The result:
Detecting Mouse Movement With jQuery
Knowing the mouse pointer’s current location over a web page is useful in many responsive web applications. Here’s an example of how jQuery can help:
<script>
$(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
$( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
$( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
$( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
$( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
</script>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>The example above also shows how jQuery’s css() method can be used to set multiple CSS properties at once. Here’s the result:
Handling Ajax Requests With jQuery
A big part of jQuery’s popularity is its ability to simplify the Ajax requests web applications can use to exchange data with servers without reloading pages. The library has many tools to manage Ajax requests for data in plain text, HTML, XML, and JSON formats. The jQuery approach is to offer shorthand options for the most common tasks. One of the simplest in the Ajax toolbox is the load() method:
<div id="myContent">Replace Me</div>
<button>Load Content</button>
<script>
// Request the file content.php from the server after a button is clicked.
// Place the results in the HTML element with the ID “myContent”
$( "button" ).click( function (){
$( "#myContent" ).load( "content.php" );
});
</script>A lot is happening there with just three lines of JavaScript and two HTML elements. The result would look something like this:
How To Use jQuery UI
Add jQuery UI plugins to your projects, and you will have access to many special effects and widgets built on the core jQuery library. Here’s an example using jQuery UI to add a pop-up calendar as a date-picker within a web form.
First, add the jQuery UI library and its supporting CSS to your web pages. In this example, we are linking to the libraries on Cloudflare’s JavaScript CDN along with the core jQuery library:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />Next, add a form input field within your HTML and, via JavaScript, attach jQuery UI’s datepicker() method using a selector:
<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">
<script>
$( function() {
$( "#myDate" ).datepicker();
} );
</script> Clicking in the input form field will now launch the date-picker:
How To Use jQuery in WordPress
The jQuery library comes bundled with WordPress and is a key component of many WordPress themes. Even if your current theme is not already using jQuery, you can take advantage of the registration of JavaScript dependencies within WordPress to get all your jQuery code up and running.
You’ll do this by editing the functions.php file that is part of your theme. A theme update can overwrite that file, so it’s a good practice to keep your changes safe by first creating a child theme and editing the functions.php file there. At the very least, create a manual WordPress backup before you proceed.
Registering Your jQuery JavaScript in functions.php
You can use an FTP or SFTP client to transfer the functions.php file between your desktop and the web server to edit it. WordPress administrators can also modify functions.php within the CMS:
From the dashboard, select Appearance > Theme File Editor.
Click Theme Functions in the left-hand menu.
The contents of your functions.php file will depend on the currently active theme. Above are functions of the Twenty Twenty-One theme. You can add your own jQuery script to your site’s configuration using the WordPress utility function wp_enqueue_script(). Here’s the template for that function:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );And here’s what all that means:
- $handle: The user-friendly name linked to this script. (The jQuery core library is already registered in WordPress with the handle jquery.)
- $src: The path and filename or URL pointing to the JavaScript source code.
- $deps: The handles of any other JavaScript sources this script requires to function properly.
- $ver: Any version number you have assigned to your JavaScript source code.
- $in_footer: If set to true, the script will be added near the bottom of the page. Otherwise, scripts will be placed in the
<head>block.
After a script is queued, it’s added to a page with the add_action() function. See it all in action by adding a block like this at the bottom of your functions.php file:
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Above, the new jQuery script is given the handle my_script, and the WordPress utility function get_template_directory_uri() helps build a URL for the JavaScript file within the theme’s directories.
An array of other handles tells WordPress that my_script depends on jQuery core, jQuery-UI core, and the jQuery-UI datepicker plugin Finally, we’ve assigned the script version number 1.0 and asked that it be placed near the bottom of the page.
How To Load jQuery from a CDN in WordPress
We know that jQuery can be served up from several content delivery networks. We also know that, out of the box, WordPress wants to load jQuery and many jQuery plugins from the file system of the local web server.
You can change that behavior by eliminating the configuration information registered with the existing jquery handle and rewriting it. To do that, add a block of code in functions.php beginning with the wp_deregister_script() function:
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_deregister_script('jquery');
wp_register_script(
'jquery',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
null,
'3.6.0',
False
);
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );The jquery handle has been assigned to the jQuery library on the Cloudflare CDN and it remains a dependency for the local my_script. You can use the same approach to pull other jQuery components — like jQuery-UI — from a CDN.
For more on jQuery and WordPress, we have a guide to troubleshooting configuration problems that can result in errors like “jQuery Is Not Defined.”
Summary
For more than 15 years, the open-source jQuery library has helped developers build rich, dynamic web applications with as little coding as possible. Today, jQuery is used on more websites than any other JavaScript library.
It’s also bundled with some popular content management systems, including WordPress. What’s more, a robust ecosystem of jQuery plugins created by other JavaScript programmers helps developers with varying levels of experience add advanced functionality to their websites.
And if you want to build jQuery-powered websites and applications, take a look at Kinsta’s WordPress hosting, Application hosting, and Database hosting solutions.
