21-04-2008, 09:45 PM
[center][large]Gestion simplifiée des événements et modification du DOM avec jQuery[/large][/center]
Dans ce tutoriel, vous apprendrez comment appliqué simplement une fonction sur un événement et à manipuler le DOM.
Il faut tout d'abord inclure la libraire jQuery dans le <head> de votre fichier html.
Dans les lignes suivantes nous appliquons la fonction ready à l'élément document. Cela permet d'exécuter le code écrit entre ces lignes dès que le document est prêt à être manipulé.
Afin d'illustrer la manipulation du DOM et l'ajout d'un événement onclick nous allons coder un système de texte caché, s'affichant en cliquant sur un lien. Le tout sera bien sûr totalement utilisable sans javascript.
Commençons par créer notre structure de base :
Nous allons commencer par ajouter un texte dans les titres afin de pouvoir dérouler le texte que nous aussi cacher par la même occasion.
Comme vous pouvez le constater, un simple sélecteur CSS permet de sélectionner l'élément à manipuler et à lui appliquer la fonction désiré. La fonction hide permet de cacher instantanément l'élément. La fonction append quant à elle permet d'ajouter du texte à la fin de l'élément.
Pour le moment, nous avons cacher notre texte et préparé le titre pour l'événement onclick.
Avec jQuery, vous pouvez enchainer les fonctions en les séparant par un point, ce qui vous permet d'effectuer plusieurs actions à la suite.
Vous pouvez à présent tester que l'événement onclick a bien été appliqué.
La prochaine étape va consister à modifier le texte à l'intérieur du <span>, ainsi que de sélectionner le premier <p> suivant le titre afin de modifier son statut.
Les commentaires devraient être suffisant ^^
En partant de ces quelques principes de la manipulation vous devriez pouvoir appréhender jQuery et sa façon de travailler.
Le prochain tutoriel reprendra cet exemple pour en faire une fonction incorporé à jQuery, soit un plugin.
Dans ce tutoriel, vous apprendrez comment appliqué simplement une fonction sur un événement et à manipuler le DOM.
Code :
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Your code here
});
</script>
Dans les lignes suivantes nous appliquons la fonction ready à l'élément document. Cela permet d'exécuter le code écrit entre ces lignes dès que le document est prêt à être manipulé.
Afin d'illustrer la manipulation du DOM et l'ajout d'un événement onclick nous allons coder un système de texte caché, s'affichant en cliquant sur un lien. Le tout sera bien sûr totalement utilisable sans javascript.
Commençons par créer notre structure de base :
Code :
<h5 class="switch">Texte 1</h5>
<p class="tohide">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam magna ipsum, commodo nec, ultrices eu,
faucibus nec, eros. Suspendisse tristique, nibh et fringilla aliquet, felis massa ultricies lacus,
eget auctor arcu quam sit amet magna. Mauris gravida consectetuer metus.
</p>
<h5 class="switch">Texte 2</h5>
<p class="tohide">
Nam ornare iaculis mi. Integer eu tellus in nisl fringilla elementum. Aenean lorem erat, volutpat
egestas, posuere in, dictum vitae, sapien. Quisque massa massa, convallis vitae, egestas tincidunt,
consequat quis, sapien. Etiam ultricies aliquet lorem.
</p>
<h5 class="switch">Texte 3</h5>
<p class="tohide">
Sed blandit, lectus in ornare aliquam, mauris risus sagittis dui, nec convallis est pede at pede. Cras
luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Morbi rutrum, eros facilisis mattis tempor, mauris lorem rutrum nunc, sed commodo massa mi eget erat.
</p>
Code :
$(document).ready(function(){
// Nous cachons tous les paragraphes ayant la classe tohide
$('p.tohide').hide();
// Nous ajoutons le texte [+] à la fin des titres h5 ayant la classe switch
$('h5.switch').append(' <span>[+]</span>');
});
Pour le moment, nous avons cacher notre texte et préparé le titre pour l'événement onclick.
Avec jQuery, vous pouvez enchainer les fonctions en les séparant par un point, ce qui vous permet d'effectuer plusieurs actions à la suite.
Code :
$(document).ready(function(){
// Nous cachons tous les paragraphes ayant la classe tohide
$('p.tohide').hide();
// Nous ajoutons le texte [+] à la fin des titres h5 ayant la classe switch
$('h5.switch').append(' <span>[+]</span>')
// On sélectionne le span nouvellement créé.
.children('span')
// On lui assigne l'événement onclick qui exécute la fonction passée en argument.
.click(function(){
alert('Click !!!');
});
});
La prochaine étape va consister à modifier le texte à l'intérieur du <span>, ainsi que de sélectionner le premier <p> suivant le titre afin de modifier son statut.
Code :
$(document).ready(function(){
// Nous cachons tous les paragraphes ayant la classe tohide
$('p.tohide').hide();
// Nous ajoutons le texte [+] à la fin des titres h5 ayant la classe switch
$('h5.switch').append(' <span>[+]</span>')
// On sélectionne le span nouvellement créé.
.children('span')
// On lui assigne l'événement onclick qui exécute la fonction passée en argument.
.click(function(){
// On modifie le texte du bouton
if($(this).html() == '[+]')
$(this).html('[-]');
else
$(this).html('[+]');
// On resélectionne le parent et on sélectionne le premier paragraphe caché
$(this).parent().next('p.tohide').toggle();
});
});
En partant de ces quelques principes de la manipulation vous devriez pouvoir appréhender jQuery et sa façon de travailler.
Le prochain tutoriel reprendra cet exemple pour en faire une fonction incorporé à jQuery, soit un plugin.