Get your next remote job on LaraJobs.
JavaScript jQuery

Get started with jQuery in 5 minutes

Benjamin Crozat
Published on Feb 12, 2024 0 comments Edit on GitHub
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.

Wait, there's more!

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
  • SaaSykit
    Launch your SaaS in days with a Laravel-based boilerplate.
    Get SaaSykit →
  • Summarize and talk to YouTube videos. Bypass ads, sponsors, chit-chat, and get to the point.
    Try Nobinge →
  • Monitor the health of your apps: downtimes, certificates, broken links, and more.
    20% off the first 3 months using the promo code CROZAT.
    Try Oh Dear for free
  • Keep the customers coming; monitor your Google rankings.
    30% off your first month using the promo code WELCOME30
    Try Wincher for free →
The latest community links
- / -