jQuery library

Implémentation

jQuery est une librairie qui permet d'écrire du code JavaScript d'une manière innovante.
La première chose que vous aurez à faire pour profiter de ses capacités sera de l'inclure dans le header de la page :

/** jQuery Inclusion **/
<script type="text/javascript" src="Chemin_vers/jQuery.js"></script>

Une fois fait, vous devrez écrire votre code entre les lignes suivantes :

jQuery(document).ready(function() { 
    //Your Code Here. 
});

Tout en sachant que ce code, pourra ensuite être placé dans le header de votre page, ou dans un fichier .js à part. A partir de ce point, il vous faudra apprendre à maitriser la syntaxe de jQuery qui est bien plus concise et pratique que du JavaScript traditionnel. Voici maintenant quelques exemples qui illustrent bien ceci:

<script type="text/javascript">
  //** jQuery Utilisation **/
  jQuery(document).ready(function() {
    $("#hello").append("<b>The Append Effect</b>");
    $("#spanclick1").click(function () {
      $("p.hidden").addClass("ohmy").show("slow");
    });
    $("#spanclick2").click(function () {
      $("#fadediv").fadeIn("slow");
    });
  });
</script>

Une des forces de jQuery est la manière dont elle interprète les sélecteurs. Par exemple, en JavaScript, pour accéder à un élément de la page, il faut utiliser document.getElementById("someid"), ce qui est long, tandis qu'avec jQuery cela devient $("#someid").

Je vous engage vraiment à en découvrir plus grâce à la documentation sur les sélecteurs sur le site officiel pour avoir un meilleur aperçu de ce dont cette librairie est capable.

Le code suivant est le code html de l'exemple plus haut. La combinaison du html et du code jQuery donne ensuite les résultats obtenus.

<span id="spanclick1">Click here...</span>
<p class="hidden">Congratulations!
You just ran a snippet of jQuery code who
<strong>added the class</strong> "test" to that piece of text
and <strong>revealed it</strong>.
</p>
 
<p id="hello">I would like to demonstrate: </p>
 
<span id="spanclick2">Click here...</span>
<div id="fadediv" class="hidden">Fade In Effect</div>

Ce petit bout de code recherche tous les paragraphes qui ont une class 'surprise', puis leur ajoute une class 'test' et enfin les révèles avec un effet FadeIn.
Facile non? Vous trouverez plein d'autres exemples de code sur jquery.com..

Partager:

Vous seriez peut être aussi intéressé par::

Commentaires récents

Hi schnozz.

Actually in this demonstration, the only style applied specifies that some elements have the class .hidden, which css is as follows:
.hidden {
display: none;
}

Regards. Jeremy

De jdmweb à 13:32 06/10/09 { Répondre }

can you share the relevant style sheet code with this demonstration

De schnozz à 15:52 01/10/09 { Répondre }