+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Gestion simplifiée des événements et modification du DOM avec jQuery (/showthread.php?tid=946)
Gestion simplifiée des événements et modification du DOM avec jQuery - Anthor - 21-04-2008
[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.
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.
RE: Gestion simplifiée des événements et modification du DOM avec jQuery - orditeck - 23-05-2008
L'aide pour ce tutoriel ce trouve à cette adresse :
http://www.jeuweb.org/board/showthread.php?tid=3896