Introduction to jQuery: a practical guide to get started simply

If you are getting into web development, you have surely already heard of jQuery. This JavaScript library, created by John Resig in 2006, quickly became essential thanks to its ability to simplify writing native JavaScript. It allows you to easily interact with the DOM (Document Object Model), animate HTML elements, and even handle AJAX requests with simplicity. Let's discover together how jQuery can make your life as a developer much more enjoyable.

Why use jQuery?

Before the massive arrival of modern frameworks such as React, Vue, or Angular, jQuery largely dominated the market. Its slogan, "Write less, do more", perfectly illustrates its philosophy: simplifying common JavaScript tasks with a concise and intuitive syntax.

Here is a concrete example to illustrate the simplicity of jQuery. Suppose you want to hide an HTML paragraph by clicking a button. With pure JavaScript, you would write this:

document.getElementById('myButton').addEventListener('click', function() {
  document.getElementById('myParagraph').style.display = 'none';
});

Using jQuery, this operation becomes extremely simple:

$('#myButton').click(function() {
  $('#myParagraph').hide();
});

Here, not only is the code shorter, but it is also much more readable.

Getting started with jQuery

To get started, you first need to include the library in your HTML project. You can easily integrate it via a CDN like this:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

DOM selection and manipulation

One of jQuery's great strengths lies in its ability to easily manipulate the DOM. Here's how to change the text of an element:

$('#title').text('Welcome to my website!');

You can also modify CSS very simply:

$('.important').css('color', 'red');

Event handling

Event handling in jQuery is very intuitive. Here is an example of displaying an alert when a button is clicked:

$('#buttonAlert').on('click', function() {
  alert('Button clicked !');
});

Simplified animations

jQuery greatly simplifies common animations. For example, to progressively show or hide an element, you would use:

$(‘#box’).fadeIn(1000); // Fade in over 1 second
$(‘#box’).fadeOut(500); // Fade out over 0.5 seconds

Loading dynamic content (AJAX)

AJAX requests become very easy to handle. Here is a simple example to load content from another HTML file:

$('#content').load('content.html');

You can also retrieve JSON data from a server:

$.getJSON('datas.json', function(data) {
  console.log(data);
});

Practical exercise: a simple to-do list

To put into practice what we have learned, here is a small interactive to-do list project in just a few lines of code:

HTML:

<input type="text" id="tache" placeholder="New task">
<button id="add">Add</button>
<ul id="list"></ul>

jQuery:

$('#add').click(function() {
  var task = $('#task').val();
  if(task!== ''){
    $('#list').append('<li>' + task + ' <button class="erase">Delete</button></li>');
    $('#task').val('');
  }
});

$(document).on('click', '.erase', function() {
  $(this).parent().remove();
});

This small example clearly shows how jQuery allows you to create a dynamic interface in very little time and with very clear code.

What future for jQuery in 2026?

With the evolution of native JavaScript (ES6+) and modern frameworks, many wonder if jQuery is still relevant today. The answer is nuanced. jQuery remains useful in specific contexts:

• Simple or quick projects where a full framework would be excessive.
• Existing sites that already use it extensively.
• Progressive JavaScript learning.

Moreover, its lightweight nature (especially with the slim version) and its broad compatibility with various browsers continue to make it an interesting option for many developers.

Conclusion

This introduction has allowed you to see how this library drastically simplifies many common JavaScript tasks. Thanks to its simple and intuitive syntax, jQuery is an excellent choice for getting started in web programming, especially for learning to easily interact with the DOM and handle events efficiently.

Even though jQuery is now competing with many other technologies, it remains an excellent solution for quick projects and progressive learning. So don't hesitate to try it and integrate it into your future projects!

There you go, now you can shine at parties...

Itamde courses

• Learn to create 2D games easily with LUA and LÖVE 2D
• Understanding programming: the basics for beginners
• Learn to program in C#
• Learn to program in C++
• Path to becoming a web developer
• JavaScript course: master the fundamentals of web programming
• Learn to code in HTML and CSS: complete course
• Path to becoming a video game developer