oujood.com

Tutorial pour apprendre jQuery

jQuery est une bibliothèque JavaScript complètement réutilisable sur des travaux professionnels. jQuery simplifie grandement la programmation JavaScript.

search |

Apprendre  jQuery

Introduction

Avant de commencer à étudier jQuery, vous devriez avoir une connaissance de base de:

  • HTML
  • CSS
  • JavaScript

Si vous souhaitez étudier ces sujets tout d'abord, trouver les didacticiels sur notre page d'accueil.

Remarque : Nos tutoriels jQuery vous aideront à apprendre les fonctions de base ainsi que les fonctions avancées de jQuery, étape par étape, grâce à une explication facile à comprendre de chaque sujet. Si vous êtes un débutant, commencez par les bases et avancez progressivement en apprenant un peu chaque jour.

jQuery est une bibliothèque JavaScript rapide, légère et riche en fonctionnalités qui repose sur le principe "écrire moins, faire plus". Ses API faciles à utiliser simplifient la traversée et la manipulation des documents HTML, la gestion des événements, l'ajout d'effets d'animation à une page Web et fonctionnent de manière transparente sur les principaux navigateurs tels que Chrome, Firefox, Safari, Internet Explorer, etc.
jQuery vous donne également la possibilité de créer une application basée sur Ajax de manière simple et rapide. De grandes entreprises comme Google, Microsoft et IBM utilisent jQuery pour leurs applications. Vous pouvez donc facilement comprendre à quel point jQuery est populaire et puissant ?
jQuery a été créé par John Resig au début de 2006. Le projet jQuery est actuellement géré et maintenu par un groupe distribué de développeurs en tant que projet open-source.
Vous pouvez économiser beaucoup de temps et d'efforts avec jQuery. Alors mettez ce site Web dans vos favoris et continuez.

jQuery simplifie la programmation JavaScript d'une manière importante.

jQuery est facile à apprendre.

jQuery est une collection de fonctions JavaScript.

jQuery permet d'écrire un minimum de code pour obtenir plus d'actions.

jQuery contient les fonctionnalités suivantes:

  • Sélections d'élément HTML
  • Manipulation d'élément HTML
  • Manipulation de CSS
  • Fonctions d'événement HTML
  • Animations et  effets JavaScript
  • Modification DOM HTML
  • AJAX
  • Utilitaires

Ajout de jQuery à vos Pages

jQuery est stocké en un seul fichier JavaScript, contenant toutes les méthodes nécessaire pour écrire un code JavaScript utile.

Son poids compressé est de 14 Ko, ce qui est tout à fait raisonnable sur la plupart de nos projets.

Il peut être ajouté à une page web comme suit :

Code

  Copier le code

  <head>
  <script type="text/javascript" src=src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Noter que la balise <script> devrait être à l'intérieur de la section <head> de la page

Les navigateurs supportés sont :

  • Firefox 1.5+
  • Internet Explorer 6+
  • Safari 2.0.2+
  • Opera 9+

La bibliothèque jquery est utilisée par exemple sur des sites comme :

  • Dell
  • Google Code
  • Digg
  • Amazon
  • WordPress
  • Drupal
  • The Zend Framework
  • Etc

Exemple JQuery :

L'exemple suivant illustre la méthode  hide() de jQuery, cacher tous les éléments <p> dans un document HTML.

Code

  Copier le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>jQuery demo</title>
   <script type="text/javascript" src=src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script >
  $(document).ready(function(){
    $("button").click(function(){
      $("p").hide();
    });
  });
  </script>
  </head>
  <body>
  <h2>This is a heading</h2>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  <button>Click me</button>
  </body>
  </html>

Dans les chapitres qui viennent nous allons voir comment fonctionne cette bibliothèque jQuery.

Téléchargement de jQuery

Deux versions de jQuery sont disponibles pour le téléchargement : une compressée et l'autre non compressé.

Les deux versions peuvent être téléchargées ici : jQuery.com.

Solutions alternative au téléchargement

Si vous ne souhaitez pas enregistrer la bibliothèque jQuery sur votre propre serveur, vous pouvez utiliser la bibliothèque jQuery hébergé de Google, de Microsoft ou du site officiel de jquery.

Comme suit :

La bibliothèque jQuery hébergé de Google:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Ou la bibliothèque jQuery hébergé de Microsoft:

Code

  Copier le code

  <head>
  <script 
  src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>

Ou la bibliothèque jQuery officiel:

Code

  Copier le code

  <head>
  <script 
  src="https:/src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

Exemple avec la bibliothèque jQuery hébergée chez google

Exemple qui affiche une message d’alerte

Code

  Copier le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>jQuery demo</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
       $(document).ready(function(){
         $("a").click(function(event){
           alert("Comme vous voyez vous ne pouvez aller sur le site
  apprendre-creer-sites.com par ce lien");
           event.preventDefault();
         });
       });
     </script>
   </head>
   <body>
     <a href="http://www.oujood.com/">jQuery</a>
   </body>
   </html>




    Sommaire de :
JQuery
 Cours suivant:
Syntaxe jQuery    cours suivant
Par gerywa 25 juillet 2014

Trafic Booster
hebergement web


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Balise meta données meta

Définit les méta données d'un document HTML

before

Ajoute le contenu avant un élément

svg polygone

Dessin d’un polygone en SVG



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci