Tutorial pour apprendre  jQuery

Apprendre  jQuery

jQuery cours tutorial

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.

jQuery est une bibliothèque JavaScript développée par John Resig.

Une bibliothèque est une collection organisée ou un ensemble homogène de méthodes qui permet d’exécuter des tâches qui peuvent être répétées de façon uniforme sur les navigateurs courants.

Elle est sous licence GPL et MIT, et donc complètement réutilisable sur des travaux professionnels.

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 :

Sélectionner le code

  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/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.

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>jQuery demo</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>

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

Sélectionner le code

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

 

Ou la bibliothèque jQuery officiel:

Sélectionner le code

  <head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>

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

Exemple qui affiche une message d’alerte

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>jQuery demo</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/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