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. |
.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. |
.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
|
.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 |
|---|
|
.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 |
|---|
|
.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 |
|---|
|
.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
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
Votre plateforme est la meilleure des plateformes que j’ai pu rencontrée. Très franchement. Félicitation. L’on peut tout apprendre ici… Vraiment merci à vous.