John Taieb Watch on YouTube

Bases de jQuery | Partie 1 - Qu'est ce que jQuery et comment l'utiliser

3 min read 2 hours ago

Published on Oct 08, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will introduce you to jQuery, a popular JavaScript library that simplifies HTML document manipulation, event handling, and animation. You will learn what jQuery is, how to set it up, and some basic functionalities that will help you create interactive web pages.

Step 1: Understanding jQuery

jQuery is a fast, small, and feature-rich JavaScript library.
It simplifies tasks such as DOM manipulation, event handling, and AJAX interactions.
jQuery is cross-browser compatible, making it easier to write code that works on various web browsers.

Step 2: Setting Up jQuery

Include jQuery in Your Project
- You can include jQuery by adding a <script> tag in the <head> section of your HTML file.
- Use the following CDN link to include the latest version of jQuery:
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
Ensure Proper Loading
- Place your custom scripts that use jQuery after the jQuery script tag to ensure that jQuery is loaded before your code runs.

Step 3: Basic Syntax and Selectors

jQuery uses the $ symbol as a shortcut for jQuery.
The basic syntax is:
```
$(selector).action();
```
Selectors:
- jQuery selectors are similar to CSS selectors.
- Common selectors include:
  - $("p") selects all <p> elements.
  - $(".className") selects all elements with the specified class.
  - $("#idName") selects an element with the specified ID.

Step 4: Manipulating the DOM

Changing Text
- To change the text of an element, use:
```
$("#elementID").text("New text");
```

Changing HTML

To change the inner HTML of an element:

$("#elementID").html("<strong>New HTML content</strong>");

Adding and Removing Classes

To add a class to an element:

$("#elementID").addClass("newClass");

To remove a class:

$("#elementID").removeClass("oldClass");

Step 5: Handling Events

jQuery makes it easy to handle events like clicks, mouse movements, and keyboard actions.

Basic event handling syntax:

$("#buttonID").click(function() {
    // Action to perform on click
});

Common events:
- click()
- hover()
- focus()
- blur()

Step 6: Animations and Effects

jQuery provides built-in methods for animations:
- To hide an element:
```
$("#elementID").hide();
```
- To show an element:
```
$("#elementID").show();
```
- To toggle visibility:
```
$("#elementID").toggle();
```
You can also create custom animations using:

$("#elementID").fadeIn();
$("#elementID").slideUp();

Conclusion

In this tutorial, you learned the basics of jQuery, including setting it up, understanding its syntax, manipulating the DOM, handling events, and creating animations. As you explore more features of jQuery, you can enhance your web development skills significantly. For more advanced techniques, consider exploring additional resources or tutorials. Happy coding!

Table of Contents

Recent