CM13 JQuery
Télécharger le CM13 JQuery en pdf
Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
Page 1 : Mussab Zneika CY Cergy Paris Université JQuery et AJAX
Page 2 : 2jQuery jQuery jQuery est une bibliothèque JavaScript légère, "écrivez moins, faites plus".L'objectif de jQuery est de faciliter l'utilisation de JavaScript sur votre site web. Encapsuler les tâches communes qui nécessitent de nombreuses lignes de code JavaScript pour accomplir dans list des méthodes que on peut appeler avec une seule ligne de code.La bibliothèque jQuery contient les fonctionnalités suivantes:Manipulation HTML / DOMManipulation de CSSMéthodes d'événement HTML
Page 3 : 3jQuery jQuery Principe de jQuery1. Selectionner une partie du document. :- prend en entree une chaine de caracteres contenant un selecteur- renvoie en sortie un objet jQuery- Objet jQuery = ensemble de noeuds du DOM Document Object Model2. Agir dessusExemple :1. "div" renvoie un objet contenant tous les "div" du document.2. "div".hide cache tous les "div" du document.Exemple :1. "div" renvoie un objet contenant tous les "div" du document.2. "div".hide cache tous les "div" du document.
Page 4 : 4jQuery jQuery Sélecteur Possibilité de sélectionner de manière similaire aux css : par type de bloc : "balise" par identifiant id : "id" par classe class : : ".class"// divTest/div "div" // ul id="test"tt/ul "test" // ul class="test"tt/ul ".test" // divTest/div "div" // ul id="test"tt/ul "test" // ul class="test"tt/ul ".test"
Page 5 : 5jQuery jQuery Sélecteurs de hiérarchie Possibilité d'atteindre : Les fils . Tous les descendants espace. Le + ou les frères suivants. ul liitem 1/li liitem 2/li li class="trois"item 3 olli3.1/li/ol/li liitem 4 olli4.1/li/ol/li liitem 5/li /ul ul liitem 1/li liitem 2/li li class="trois"item 3 olli3.1/li/ol/li liitem 4 olli4.1/li/ol/li liitem 5/li /ul // cache 4 et 5 'li.trois li'.hide; // cache 4 'li.trois + li'.hide; // cache les ol "ul ol" .hide// ne cache rien "ul ol" .hide// cache 4 et 5 'li.trois li'.hide; // cache 4 'li.trois + li'.hide; // cache les ol "ul ol" .hide// ne cache rien "ul ol" .hide
Page 6 : 6jQuery jQuery Sélecteurs de formulaire// sélectionner les cases à cocher"input:checkbox"// sélectionner les boutons radio"input:radio"// sélectionner les boutons":button"// sélectionner les champs texte":text""input:checked""input:selected"
Page 7 : 7jQuery jQuery Sélecteurs de formulaire: Examplehtml lang="en"head meta charset="utf-8" script src="jquery-3.3.1.min.js"/script/headbodyselect name="valeur" onchange="select1"option value="1"1/optionoption value="2" selected="selected" 2/optionoption value="3"3/option/selectscriptfunction select1alert"select option:selected".val;/script /body
Page 8 : 8jQuery jQuery La fonction each Appelle une fonction pour chaque élément sélectionné this = élément courant i - index de l'élément courant "table tr" .eachfunctioni this.addClass"odd"; ; "table tr" .eachfunctioni this.addClass"odd"; ;
Page 9 : 9jQuery jQuery Modifier le contenu HTML.html'contenu' : remplacement du contenu d’un element lesbalises sont considerees comme des balises.text'contenu' : remplacement du contenu d’un element enconsiderant le tout comme du texte les caracteres et des balises sontremplaces par les entites XML > et <append'contenu' : insertion du contenu dans l’elementselectionne a la suite des elements existants.prepend'contenu' : insertion du contenu dans l’elementselectionne avant les elements existants
Page 10 : 10jQuery jQuery Insérer des éléments append insère du contenu à la fin de la sélection //Ajout d'une espace et de trois astérisques à la suite de chaque titre h2 'h2'.append' ';prepend insère du contenu au début de la sélection Ajout de trois astérisques et d'une espace avant chaque titre h2 'h2'.prepend' ';before insère du contenu avant la sélection Ajout d'une ligne de séparation horizontale avant le titre h2 ‘h2'.before'hr';after insère du contenu après la sélection Insertion de un sauts de ligne après chaque balise hr'hr'.after‘br’;
Page 11 : 11jQuery jQuery Gestion des attributs Dans chaque balise html, nous retrouvons des attributs différents comme : title, alt, width, height etc. JQuery permet de manipuler ces attributs facilement à l'aide de la fonction .attr"name","parametre";// met tous les attributs comme celui du premier bouton "button:gt0" .attr"disabled", "button:eq0".attr"disabled; Modifier des valeursval : permet d'obtenir la valeur des objets valvaleur permet de modifier la valeur des objets
Page 12 : 12jQuery : Gestionnaire d'événements jQuery : Gestionnaire d'événements Associer une fonction à un événement:1- sel.clickfunction … 2- sel.on'click', function …'img.grand'.mouseentertraitement1;'img.grand'.mousemovetraitement2;'img.grand'.onmouseenter:traitement1, mousemove:traitement2;la méthode on a plusieurs avantages. Elle permet de :Limiter l'écriture en associant une même méthode événementielle à plusieurs éléments
Page 13 : 13AJAX et JQuery AJAX et JQuery jQuery fournit plusieurs méthodes pour AJAX.Avec les jQuery AJAX méthodes, vous pouvez demander du texte, du HTML, du XML ou du JSON à un serveur distant en utilisant HTTP Get et HTTP PostAvec JQuery, nous pouvons écrire la fonctionnalité AJAX avec une seule ligne de code.
Page 14 : 14jQuery load MéthodejQuery load MéthodeLa méthode load nous permet de charger des données à partir d'un serveur et de les placer dans l'élément sélectionné.Syntaxe: sélecteur .load URL, données,callback;URL: l'URL que nous souhaitons charger.Données: clé / valeur paires de chaîne de requête à envoyer avec la demande.callback : le nom d'une fonction à exécuter une fois la méthode load terminée.Il est également possible d'ajouter un sélecteur jQuery au paramètre URL.
Page 15 : 15jQuery load Méthode: Exemple jQuery load Méthode: Exemple html head script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"/script script document.readyfunction "b1".clickfunction "div1".load"file1.txt"; ; ; /script /head body div id="div1"h2jQuery et AJAX /h2/div button id="b1"Changer le contenu/button /body /html
Page 16 : 16jQuery load Méthode: Exemple jQuery load Méthode: Exemple html head script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"/script script document.readyfunction "b1".clickfunction "div1".load"file1.txt div2"; ; ; /script /head body div id="div1"h2jQuery et AJAX /h2/div button id="b1"Changer le contenu/button /body /html File1.txt: div id="div1" div1 /divdiv id="div2" div2/divdiv id="div3" dive3/div
Page 17 : 17jQuery ajax MéthodejQuery ajax Méthode .ajax nom: valeur, nom: valeur, ...NomDescriptiondataTypeType de données attendu de la réponse du serveur.dataSpécifie les données à envoyer au serveursuccessresult,status,xhrUne fonction à exécuter lorsque la requête s'est terminée avec succèserrorxhr,status,errorUne fonction à exécuter en cas d'échec de la demandetypeSpécifie le type de demande. GET ou POSTXhrUne fonction utilisée pour créer l'objet XMLHttpRequest
Page 18 : 18jQuery .ajax Méthode: Exemple jQuery .ajax Méthode: Exemple html head script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"/script script document.readyfunction "b1".clickfunction .ajax url:"file1.txt" , success:functionresults "div1".htmlresults;; ; ; /script /head body div id="div1"h2jQuery et AJAX /h2/div button id="b1"Changer le contenu/button /body /html
Page 19 : 19jQuery .get MéthodejQuery .get MéthodeLa méthode .get demande des données au serveur avec une requête HTTP GET.Syntaxe: .getURL,callback;Exemple: .get"page1.php", Function données, état….;
Page 20 : 20jQuery .get Méthode : ExemplejQuery .get Méthode : Exemplehtml head script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"/script script document.readyfunction "b1".clickfunction .get"page1.php", functiondata, status "div1".html"Data: " + data + "\nStatus: " + status; ; ; ; /script /head body div id="div1"h2 Ajax et JQuery Get Methode /h2/div button id="b1"Changer le contenu/button /body /htmlPage1.php ?php echo "Bonjour M/Mme "; ?
Page 21 : 21jQuery .post MéthodejQuery .post MéthodeLa méthode .post demande des données au serveur avec une requête HTTP POST .Syntaxe: .getURL, Données,callback;Exemple: .post "page1.asp", nom: "Zneika", ville: "Pontoise" , Function données, état ……… ;
Page 22 : 22jQuery .post Méthode : ExemplejQuery .post Méthode : Exemple!DOCTYPE html html head script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"/script script document.readyfunction "b1".clickfunction .post"page1.php", nom: "Zneika", ville: "Pontoise" , functiondata,status alert"Data: " + data + "\nStatus: " + status; ; ; ;/script /head body div id="div1"h2 Ajax et JQuery POST Methode /h2/div button id="b1"Changer le contenu/button /body /html ?php var1 = POST"nom"; var2 = POST"ville"; echo "Bonjour var1 ville var2";?
Page 23 : Sources•Cours de Jean-Loup Guillaume http://jlguillaume.free.fr/www/documents/teaching/ntw1213/LI385C5Jquery.pdf•Cours de programmation web avancée de Thierry Hamonhttps://perso.limsi.fr/hamon/PWA-20122013/Cours/JQuery.pdf• jQuery : écrivez moins pour faire plus ! http://openclassrooms.com/courses/jquery-ecrivez-moins-pour-faire-plus•Premiers pas avec AJAX https://openclassrooms.com/fr/courses/1631636-simplifiez-vos-developpements-javascript-avec-jquery/1636305-premiers-pas-avec-ajax•AJAX Introductionhttps://www.w3schools.com/xml/ajaxintro.asp23
Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23