Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:js:jquery [2023/04/14 03:01] – ll jcheron
+++ web:js:jquery [2023/04/18 02:33] (Version actuelle) – [Chargement du DOM] jcheron
@@ Ligne 18: / Ligne 18: @@
 </sxh>
+===== Bases =====
+==== Accès aux éléments ====
+La fonction **jQuery** ou **$** permet d'accéder aux éléments du DOM et remplace :
+=== getElementById ===
+<sxh javascript;gutter:false>
+//Jquery
+let elm=$('#bt');
+//Javascript
+let elm=document.getElementById('bt');
+</sxh>
+=== getElementsByTagName ===
+<sxh javascript;gutter:false>
+//Jquery
+let elms=$('a');
+//Javascript
+let elms=document.getElementsByTagName('a');
+</sxh>
+=== getElementsByClassName ===
+<sxh javascript;gutter:false>
+//Jquery
+let elms=$('.myClass');
+//Javascript
+let elms=document.getElementsByClassName('myClass');
+</sxh>
+=== querySelectorAll ===
+<sxh javascript;gutter:false>
+//Jquery
+let elms=$('a.myClass');
+//Javascript
+let elms=document.querySelectorAll('a.myClass');
+</sxh>
+==== Actions sur éléments ====
+La fonction **jQuery** ou **$** retourne 1 jQuery object pouvant contenir 0 ou plusieurs éléméents du DOM.
+Elle expose des méthodes dont certaines vont pouvoir modifier tous les éléments retournés (sans avoir à faire une itération).
+<sxh javascript;gutter:false>
+//Masquage de tous les h1
+$('h1').hide();
+//Affichage de tous les h1
+$('h1').show();
+//ajout de la classe header à tous les h1
+$('h1').addClass('header');
+//Equivalent Javascript
+let h1Elms=document.querySelectorAll('h1');
+[...h1Elms].forEach((elm)=>{
+    elm.classList.add('header');
+    }
+);
+</sxh>
+==== Events sur éléments ====
+L'objet jQuery permet également d'ajouter des listener sur les éléments du DOM retournés.
+<sxh javascript;gutter:false>
+//Click sur tous les h1
+$('h1').click(()=>console.log('click sur h1'));
+//Equivalent Javascript
+let h1Elms=document.querySelectorAll('h1');
+[...h1Elms].addEventListener('click',(elm)=>{
+    console.log('click sur h1'));
+    }
+);
+</sxh>
+Ou d'ajouter des écouteurs d'évènements qui pourront être associés aux éléments présents et futurs de la page :
+<sxh javascript;gutter:false>
+$('body').click('h1',()=>console.log('click sur h1'));
+</sxh>
+Les évènements peuvent être déclenchés, si la méthode est appelée sans paramètre :
+<sxh javascript;gutter:false>
+//Provoque le click sur tous les h1
+$('h1').click();
+</sxh>
+==== Chargement du DOM ====
+Il est parfois nécessaire d'attendre que le DOM soit chargé avant d'exécuter du code :
+<sxh javascript;gutter:false>
+$('document').ready(function(){
+    //Code à exécuter après le chargement du DOM
+});
+//Version courte
+$(function(){
+    //Code à exécuter après le chargement du DOM
+});
+</sxh>