Liste de toutes les fonctions JQuery

jQuery a de nombreuses fonctions importantes et utiles, prédéfinies pour manipuler le DOM, réaliser des animations et gérer facilement les événements. Dans ce tutoriel nous allons découvrir la liste de toutes les fonctions utiles en JQuery.
 
 

.toggle()

La méthode toggle() est une méthode qui permet de basculer entre les méthodes hide() et show(). Il affiche les éléments cachés et cache les éléments visibles.

$(document).ready(function(){
     $("button").click(function(){
          $("p").toggle();
     });
});
<p>Ceci est un paragraphe.</p>
<button>Afficher/masquer le paragraphe</button>
Résultat

Ceci est un paragraphe.

 

.hide()

La méthode hide() est une méthode qui permet de cacher un élément s’il était visible.

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
});
<p>Ceci est un paragraphe.</p>
<button id="hide">Masquer le paragraphe</button>
Résultat

Ceci est un paragraphe.

Comment récupérer l'url de la page courante avec jQueryComment récupérer l’url de la page courante avec jQueryL’exemple suivant vous montrera comment trouver l’URL de la page courante en utilisant jQuery.     Code source : <!DOCTYPE html> <html> <head> <meta charset="UTF-8">…Lire plus
.show()

La méthode show() est une méthode qui permet d’afficher un élément s’il était caché.

$(document).ready(function(){
  $("#show").click(function(){
    $("p").show();
  });
});
<p style="display: none;">Ceci est un paragraphe.</p>
<button id="show">Afficher le paragraphe</button>
Résultat

 
 

.html()

La méthode html() définit ou retourne le contenu (innerHTML) des éléments sélectionnés. Lorsque cette méthode est utilisée pour retourner du contenu, elle retourne le contenu du premier élément correspondant. Lorsque cette méthode est utilisée pour définir le contenu, elle écrase le contenu de TOUS les éléments correspondants.

$(document).ready(function(){
  $("button").click(function(){
    $("p").html("Bienvenu Sur WayToLearnX!");
  });
});
<button>Changer le contenu de tous les éléments P</button>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
Résultat

Ceci est un paragraphe.

Ceci est un autre paragraphe.

Framework Javascript les plus utilisésFramework Javascript les plus utilisésJavaScript est un langage multi-paradigme. Il prend en charge les styles de programmation événementiels, fonctionnels et impératifs y compris la programmation orientés objet. La plupart…Lire plus
.css()

La méthode css() est une méthode qui permet de récupérer ou définir la valeur de l’attribut « style » d’un élément.

$(".exemple").css("background-color", "blue");

 

.find()

La méthode find() est une méthode qui permet de rechercher tous les éléments descendants de l’élément sélectionné. Dans l’exemple ci-dessous, la méthode find() recherche tous les éléments <p> descendants de l’élément <ul>:

$(document).ready(function(){
  $("ul").find("p").css({"color": "blue", "border": "3px solid blue"});
});
<div>div 
   <ul>ul
     <li>li
       <p>p</p>
     </li>
   </ul>   
</div>
Résultat
div
    ul
  • li

    p

 
 

.append()

La méthode append() est une méthode qui permet d’injecter un élément dans le DOM après l’élément sélectionné.

$(document).ready(function(){
  $("#btn").click(function(){
    $("ol").append("<li>Élément ajouté</li>");
  });
});
<ol>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
</ol>
<button id="btn">Ajouter un élément à la liste</button>
Résultat
  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum

 

.prepend()

La méthode prepend() est une méthode qui permet d’injecter un élément dans le DOM avant l’élément sélectionné.

$(document).ready(function(){
  $("#btn").click(function(){
    $("ol").prepend("<li>Élément ajouté</li>");
  });
});
<ol>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
</ol>
<button id="btn">Ajouter un élément à la liste</button>
Résultat
  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
Comment récupérer la valeur d'un CheckBox avec jQueryComment récupérer la valeur d’un CheckBox avec jQueryVous pouvez utiliser le sélecteur :checked de jQuery en combinaison avec la méthode each() pour récupérer les valeurs de toutes les checkboxes sélectionnées. La méthode…Lire plus
.attr()

La méthode attr() est une méthode qui permet de récupérer ou définir n’importe quel attribut d’un élément.

$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width", "450");
  });
});
<img src="WayToLearnX.png" width="265" height="90"><br>
<button>Modifier la largeur de l'image</button>
Résultat

 
 

.val()

La méthode val() est une méthode qui permet de récupérer ou définir l’attribut « value » d’un élément.

$(document).ready(function(){
  $("button").click(function(){
    $("input").val("WayToLearnX");
  });
});
<p>WWW.<input>.COM</p>
<button>Définir la valeur de l'élément input</button>
Résultat

WWW..COM

 

.text()

La méthode text() est une méthode qui permet de récupérer ou définir le contenu texte d’un élément.

$(document).ready(function(){
   $("button").click(function(){
      alert($("div").text());
   });
});
<div>Welcom to <b>WayToLearnX</b>!</div><br>
<button>Afficher le contenu texte de l'élément DIV</button>
Résultat
Welcom to WayToLearnX!

 

.each()

La méthode each() est une méthode qui permet d’itère sur un ensemble d’éléments.

$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
<ul>
  <li>JavaScript</li>
  <li>JQuery</li>
  <li>HTML</li>
</ul>
<button>Afficher la valeur de chaque élément de la liste</button>
Résultat
  • JavaScript
  • JQuery
  • HTML
Parcourir un tableau avec jQuery.each()Parcourir un tableau avec jQuery.each()La méthode JQuery.each() ou $.each() peuvent être utilisés pour effectuer une itération transparente sur toute collection, qu’il s’agisse d’un objet ou d’un tableau. Puisque la…Lire plus
.on()

La méthode on() est une méthode qui permet d’attacher une fonction à un événement pour un élément.

$(document).ready(function(){
  $("p").on("click", function(){
    alert("Le paragraphe a été cliqué.");
  });
});
<p>Cliquez sur ce paraghraphe.</p>
Résultat

Cliquez sur ce paraghraphe.

 
 

.off()

La méthode off() est utilisé pour supprimer le gestionnaire d’événement attaché avec la méthode on().

$(document).ready(function(){
  $("button").click(function(){
    $("p").off("click");
  });
});

 

Sélecteurs jQuery
$("span") //sélectionner tous les éléments SPAN

$("#elemID") //sélectionner un élément par son identifiant

$(".className") //sélectionner un élément en fonction de la classe CSS

$("{id*='val'}") //sélectionner l'élément par id qui contient la chaîne 'val'

$("{id^='s'}") //sélectionner l'élément par id qui commence par 's'

$("{id$='s'}") //sélectionner l'élément par id qui se termine par 's'

 

Pseudo-sélecteurs avec jQuery
$(":parent") // tous les éléments avec des nœuds enfants

$(":empty") // tous les éléments sans enfant ni texte

$(":header") // tous les éléments h1, h2, h3, h4, h5 et h6

$(":contains(val)") // tous les éléments avec le texte "val"

$("li:gt(5)") // tous les éléments li avec un index supérieur à 5
 
$("li:lt(5)") // tous les éléments li avec un index inférieur à 5

$("li:even") // tous les éléments li avec un index paire

$("li:odd") // tous les éléments li avec un index impaire
Comment définir une fonction en jQueryComment définir une fonction en jQuery ?L’exemple suivant vous montrera comment définir une fonction dans jQuery. Essayer de tester le code suivante, vous allez voir un bouton « Cliquez ici », lorsque vous…Lire plus
Ajouter, supprimer et basculer des classes CSS
$("#elemID").addClass('className'); // ajouter une classe à l'élément

$("#elemID").removeClass('className'); // enlever la classe de l'élément

$("#elemID").toggleClass('className'); // basculer(ajouter/supprimer) une classe d'un élément

 

Largeur et hauteur d’un élément
var x = $("#elemID").width(); // récupérer la largeur d'un élément

var y = $("#elemID").height(); // récupérer la hauteur d'un élément

$("#elemID").height(500); // définir la hauteur d'un élément

 
Liste des fonctions JavascriptListe des fonctions JavascriptDans ce tutoriel nous allons découvrir la liste des fonctions natives les plus utilisées en Javascript.     Méthodes de gestion des tableaux – Array…Lire plus

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *