Différences

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

--- web:js:jquery [2023/04/13 20:22] – créée jcheron
+++ web:js:jquery [2023/04/18 02:33] (Version actuelle) – [Chargement du DOM] jcheron
@@ Ligne 1: / Ligne 1: @@
 ====== jQuery ======
+jQuery est une librairie Javascript facilitant la manipulation du DOM.\\
+Très populaire avant l'avènement des frameworks JS, son utilisation est aujourd'hui plus rare.
+===== Intégration =====
+==== Via CDN ====
+A intégrer juste avant la fermeture du body de la page :
+<sxh html;gutter:false>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
+</sxh>
+==== Via npm ====
+<sxh bash;gutter:false>
+npm install jquery
+</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>