Différences

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

--- web:js:jquery [2023/04/18 02:13] – [Actions sur éléments] jcheron
+++ web:js:jquery [2023/04/18 02:33] (Version actuelle) – [Chargement du DOM] jcheron
@@ Ligne 64: / Ligne 64: @@
 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é (sans avoir à faire une itération).
+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>
@@ Ligne 75: / Ligne 75: @@
 //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>