Admin CliCours
jQuery – Concepts de base jQuery – Concepts de base
• Enveloppe logicielle (Wrapper) jQuery ou $ Enveloppe logicielle (Wrapper) jQuery ou $
• Emploi intelligent de sélecteurs basés sur CSS 3 pour Emploi intelligent de sélecteurs basés sur CSS 3 pour sélectionner des objets DOM dans une page web sélectionner des objets DOM dans une page web
• Retour par les fonctions jQuery de tableaux (Array) Retour par les fonctions jQuery de tableaux (Array) d’objets d’objets
• Puissantes fonctions de manipulation d’objets du DOM Puissantes fonctions de manipulation d’objets du DOM
• Opération sur l’ensemble des objets d’un tableau Opération sur l’ensemble des objets d’un tableau d’objets sans utiliser de boucle explicite d’objets sans utiliser de boucle explicite
• Chaînage des opérations Chaînage des opérations
• Sélection par identifiant (id) Sélection par identifiant (id) jQuery(« #monId ») jQuery(« #monId »)
• Sélection par classe (CSS class) Sélection par classe (CSS class) jQuery(« .maClasse ») jQuery(« .maClasse »)
• Sélection par balise (tag) Sélection par balise (tag) jQuery(« div ») jQuery(« div »)
• Documentation Documentation http://docs. http://docs.jquery jquery.com/Selectors .com/Selectors
• Emploi de filtres pour réduire les Emploi de filtres pour réduire les tableaux d’objets (opérateur “:”) tableaux d’objets (opérateur “:”)
jQuery(« div:eq(1) ») jQuery(« div:eq(1) »)
jQuery(« span:not(#monId) ») jQuery(« span:not(#monId) ») jQuery(« p:first »).hasClass(« myClass ») jQuery(« p:first »).hasClass(« myClass »)
• Création d’un fragment de HTML et ajout à la fin du Création d’un fragment de HTML et ajout à la fin du document document
jQuery(« <p>Qu’est-ce que jQuery?</p> »).appendTo(« body ») jQuery(« <p>Qu’est-ce que jQuery?</p> »).appendTo(« body ») • Changement de CSS Changement de CSS jQuery(« #monId »).toggleClass(« surbrillance ») jQuery(« #monId »).toggleClass(« surbrillance ») jQuery(« tr »).toggleClass(« couleurLigne ») jQuery(« tr »).toggleClass(« couleurLigne »)
• Changement de texte Changement de texte jQuery(« .classeTexte »).text(« texte de remplacement ») jQuery(« .classeTexte »).text(« texte de remplacement »)
• Documentation
http://docs. http://docs.jquery jquery.com/Manipulation .com/Manipulation
Chaque opération jQuery retourne une référence à un Chaque opération jQuery retourne une référence à un tableau d’objets auquel on peut appliquer une autre tableau d’objets auquel on peut appliquer une autre opération, voir un enchaînement d’opérations. opération, voir un enchaînement d’opérations.
Par exemple Par exemple jQuery(« #monId »).addClass( jQuery(« #monId »).addClass( » « maClasseCSS »); maClasseCSS »);
jQuery( jQuery( » « #monId #monId » « ).show(); ).show();
Devient
jQuery( jQuery( » « #monId #monId » « ).addClass( ).addClass( » « maClasseCSS maClasseCSS » « ).show(); ).show();
Automne 2009 Automne 2009Présentation Présentation jQuery jQuery
jQuery – jQuery – Boucle implicite Boucle implicite Certaines instructions de jQuery réalisent des boucles Certaines instructions de jQuery réalisent des boucles implicites sur des ensembles de données. implicites sur des ensembles de données.
Par exemple : Par exemple : jQuery.each([0,1,2,3,4], function() { jQuery.each([0,1,2,3,4], function() { document.write(this + 1); document.write(this + 1); }); }); Écrit : Écrit : 12345 12345
Au moment du chargement d’une page jQuery fournit le Au moment du chargement d’une page jQuery fournit le contrôleur contrôleur ready ready. Le contrôleur . Le contrôleur ready ready initie l’exécution du code initie l’exécution du code lorsque le document est chargé mais sans attendre le lorsque le document est chargé mais sans attendre le chargement des images et l’exécution du contrôleur chargement des images et l’exécution du contrôleur onload onload. .
jQuery(document).ready( function() { jQuery(document).ready( function() {
// code à exécuter au moment du chargement // code à exécuter au moment du chargement }); });
Note : Note : Quand les contrôleurs Quand les contrôleurs ready ready et et onload onload sont utilisés dans la même page, les 2 contrôleurs sont utilisés dans la même page, les 2 contrôleurs vont s’exécuter, le contrôleur vont s’exécuter, le contrôleur ready ready s’exécutant avant le contrôleur s’exécutant avant le contrôleur onload onload. .
jQuery fournit plusieurs fonctions Ajax pour jQuery fournit plusieurs fonctions Ajax pour différents besoins dont load(…) et ajax(…) différents besoins dont load(…) et ajax(…)
La fonction load(…) La fonction load(…) jQuery(‘#nombre’).load(‘/ServeurAjaxSimple/reponse’); jQuery(‘#nombre’).load(‘/ServeurAjaxSimple/reponse’);
Ou la fonction ajax(…) Ou la fonction ajax(…) jQuery.ajax( { type: « POST », jQuery.ajax( { type: « POST », url: « /ServeurAjaxSimple/reponse », url: « /ServeurAjaxSimple/reponse », data: « param1=valeur1¶m2=valeur2 », data: « param1=valeur1¶m2=valeur2 », success: function(rep){ success: function(rep){ /* callback */ /* callback */ alert( « Donnée traitées: » + rep ); } alert( « Donnée traitées: » + rep ); } });
Télécharger le cours complet
