JS CHEAT SHEET
eltjQuery = element récupéré par jquery
| Vanilla | Explication | jQuery |
| array[index] | récupère la valeur de l'indice index dans le tableau array | |
| object[key] object.key | récupère la valeur de la propriété key dans l'objet objet | |
| function bonjour(param1, param2){ } bonjour = function(param1, param2){ } | déclaration de la fonction bonjour | |
| if( condition1 ){ code1; } else if( condition2) { code2; } else { code3; } | si condition1 est vraie, alors le code1 est exécuté. Sinon, si la condition2 est vraie, alors on exécute le code2. Si condition1 et condition2 sont fausses, alors on exécute le code3 | |
| while(condition){ code1 } | Tant que la condition est vraie, alors on exécute le code1 | |
| for(i=0;i<X;i++){ code1; } | répète le code1 tant que i est inférieur à X. Pour parcourir un tableau on utilisera la longueur du tableau comme limite : i | |
| array.push(element) | ajoute l'element au tableau | |
| last = array.pop(element) | supprime la dernière valeur du tableau ( donc array ne contiendra plus element ), et la retourne | |
| array.length | renvoit la longueur du tableau | |
| array.join( separator ) | renvoit une chaîne de caractère contenant tous les élements du tableau, et entre chaque éléments la string separator sera inséré | |
| document.createElement("div"); | Créé et retourne un élément HTML | $("<div>"); $("<div></div>"); |
| parent.appendChild(children); | ajoute l'élément children dans parent ( en dernier enfant ) | parent.append(children); |
| document.getElementById("titre") | renvoit LA représentation javascript DE L'élément HTML dont l'attribut id égal "titre" | $("#titre) |
| document.getElementByClassName("important") | renvoit LES représentations javascript DES éléments HTML dont l'attribut class contient "important" | $(".important") |
| document.getElementsByTagName("div") | renvoit LES représentations javascript DES éléments HTML dont le nom de balise est "div" | $("div") |
| document.querySelector( selector ) | renvoit LES représentations javascript DES éléments HTML ciblés par la règle CSS selector | $(selector) |
| element.setAttribute(name, value); element.getAttribute(name); element.removeAttribute(name); | Permet d'ajouter, récupérer et supprimer un attribut d'un élément HTML | eltjQuery.attr(name,value); eltjQuery.attr(name); eltjQuery.attr(name, null) |
| element.classList.add("important"); element.classList.remove("important"); element.classList.toggle("important"); element.classList.contains("important"); | permet sur l'élément HTML d'ajouter, supprimer et alterner la classe "important". contains renvoit true si l'élément possède la classe "important" | eltjQuery.addClass("important"); eltjQuery.removeClass("important"); eltjQuery.toggleClass("important"); eltjQuery.hasClass("important"); |
| element.value; element.options[element.selectedIndex].value; element.checked; | renvoit la saisie d'un champs de formulaire, d'une liste déroulante (select) , d'une case à cocher (input[type='checkbox']) | eltjQuery.val(); eltjQuery.val(); eltjQuery.prop("checked"); |
| element.style.backgroundColor = "red"; element.style.fontSize = "12px"; | permet de spécifier la couleur de fond "red" et la taille de font "12px" à l'élément | eltjQuery.css({backgroundColor:"red",fontSize: "12px" }) |
| element.textContent = "bonjour"; element.innerHTML = "<strong>bonjour</strong>"; | modifie le contenu text ou html d'un élément html | eltjQuery.text("bonjour"); eltjQuery.html("<strong>bonjour</strong>") |
| element.addEventListener("click", listener) | ajoute un observateur pour les évènements click sur l'élément HTML, qui va exécuter la fonction listener | eltjQuery.on("click", listener); |
| element.removeEventListener("click", listener) | enlève l'observateur d'évènement click sur l'élément HTML | eltjQuery.off("click",listener) |
| document.addEventListener("DOMContentLoaded", function(){ }) | exécute la fonction listener quand l'analyse du DOM est terminée | $( document ).ready(function(){}); $().ready( function(){}); $(function(){ }); |
| timeout1 = setTimeout( action, 1000 ); clearTimeout(timeout1); | exécute une fois la fonction action DANS 1000ms, supprime le timeout1 | |
| interval1 = setInterval( action, 1000 ); clearInterval(interval1); | exécute la fonction action TOUTES LES 1000ms; supprime l'interval | |
| element.parentNode | renvoit le parent de l'élement | eltjQuery.parent() |
| element.children | renvoit le parent de l'élement | eltjQuery.children() |