Get your next remote job on LaraJobs.

Get started with jQuery in 5 minutes

Get started with jQuery in 5 minutes

Introduction to jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers (especially the old ones).

Nowadays, we might think jQuery has been long dead, but it’s not. It’s still the dominant JavaScript library and the big majority of web developers are using it.

Therefore, why wouldn’t I write articles about it?

Include jQuery in your HTML using the official CDN

To start using jQuery in your web projects, you first need to include it in your HTML. The easiest way to do this is by using the official Content Delivery Network (CDN). Simply add the following script tag in the <head> section of your HTML document:

<!DOCTYPE html>
<html>
<head>
 
<!-- In your development environment, use this version to ease debugging. -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- In a production environment, use the minified version for optimal performances. -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
</body>
</html>

If you are worried about using an outdated version of jQuery, the people behind it don’t recommend using a URL that always points to the latest version of the library for various reasons, but mainly for stability (you don’t want your code to break because it doesn’t work with the newest major version for instance).

Use the slim version of jQuery

Did you know there’s a slim version of jQuery? It excludes the Ajax and animation effects parts, which are not necessary in a world where the native fetch JavaScript API is widely supported, as well as CSS transitions and animations. To use the slim version of jQuery, add .slim after the version number:

<!-- In your development environment, use this version to ease debugging. -->
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
<!-- In a production environment, use the minified version for optimal performances. -->
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>

Create your first jQuery component

Now that you’ve included jQuery, let’s create a simple component: a button that hides itself when clicked. Add the following HTML and jQuery script to your document:

<button id="hide-button">Hide me!</button>

Then, in your JavaScript:

// Run the code when the document is ready to
// avoid errors and unpredictable behavior.
$(document).ready(function () {
// Listen for clicks on the button.
$('#hide-button').click(function () {
// Hide the button, there contained in the "this" variable.
$(this).hide();
});
});

As you saw, this code uses jQuery to attach a click event to the button with the ID hide-button. When the button is clicked, jQuery’s hide() method is called on the element, making it disappear from the page (behind the scenes, it’s simply adding the display: none value to the style attribute).

What does “$” mean in jQuery?

The dollar sign ($) that you have to use in jQuery is simply a JavaScript variable with a funky name that makes writing code faster. You could instead use the jQuery variable.

Conclusion

That’s it! You’ve now seen how jQuery can make JavaScript programming easier and more intuitive, especially for tasks like manipulating HTML elements and handling events. Start experimenting with more components and explore the vast possibilities jQuery offers.

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
The latest community links

Recommended articles

Handle clicks from your users using jQuery

Dive into the simplicity of handling click events with jQuery and learn how to achieve the same results using vanilla JavaScript.

How and when to use jQuery's $(document).ready() method

In JavaScript, running code at the wrong time can lead to errors or unpredictable behavior. Let me show you the fix using jQuery.

Understanding jQuery's .each() method

Learn how to use jQuery's `.each()` method to iterate over DOM elements and arrays, and discover a modern vanilla JavaScript alternative.

Alpine.js: a lightweight framework for productive developers

Smaller and even easier than Vue.js, setting up Alpine.js is as easy as copying and pasting a code snippet.

20+ Laravel best practices, tips and tricks to use in 2024

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

Laravel interview questions and answers for 2024

Nailing a Laravel job interview can be a daunting task, but with the right preparation and mindset, you can set yourself up for success.

How does Laravel work? A crystal clear explanation.

Discover my step by step and simple explanation of how Laravel makes your life easier.

9 testing best practices for Laravel in 2024

Are you familiar with testing? Good. Here are a bunch of best practices to help you level up even more!

A summary of web related sessions from WWDC23

Using a well-known Large Language Model, I managed to summarize every session from WWDC23 that's related to web development.

Add Alpine.js to any Laravel project

Alpine.js is a great companion for a Laravel app. Let's see how you can add it in any project.

- / -