Généralités

jQuery est un framework JavaScript.

Installation

Télécharger le fichier jquery.js et l'inclure dans la page web avant les scripts JavaScript qui l'utiliseront.
CDN

<head>
    <!-- utiliser la version locale -->
    <script type="text/javascript" src="jquery.js"></script>

    <!-- ou télécharger jquery au chargement de la page -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

utiliser la balise fermante et non la forme contractée />
ne pas ajouter de code JavaScript entre les balises

Sélecteurs

// sélectionne l’élément avec l'id "id"
$("#id")
// sélectionne tous les éléments avec la classe "class"
$(".class")

// sélectionne tous les éléments de type "div"
$("div")
// sélectionne tous les éléments de type "a" ayant un parent direct de type "div"
$("div > a")

// sélectionne l’élément suivant de même niveau que l’élément avec l'id "id"
$("#id").next()

// sélectionne l’élément parent de l’élément avec l'id "id"
$("#id").parent()

// sélectionne tous les éléments de même niveau que l’élément avec l'id "id"
$("#id").siblings()

Équivalent de document.getElementById("id") : $("#id")[0]

Obtenir ou modifier le contenu d'un balise (InnerHtml)

var contenu = $("#id").html();

$("#id").html(NouveauContenu);

html

Obtenir ou modifier le style

var backgroundColor = $("#id").css("background-color");

$("#id").css("background-color", "black");

Shorthand CSS properties (e.g. margin, background, border) are not supported.
For example, if you want to retrieve the rendered margin, use:margin-top or margin-right

css

Obtenir ou modifier un attribut

var attribut_value = $('#id').attr('nom de l attribut');

// équivalent
$('#id').attr('value', 'nouvelle valeur');
$('#id').val('nouvelle valeur');

Manipulate classes

if ($('#id').hasClass('myClass'))
{
    $('#id').removeClass('myClass')
}
else
{
    $('#id').addClass('myClass')
}

Evenements

// associe la méthode MonHandler à l’événement mousemove
// écrase toutes les autres méthodes qui étaient associées à cet événement
$(document).mousemove(MonHandler);

// associe la méthode MonHandler à l’événement mousemove
// tout en conservant les méthodes précédement associées à cet événement
$(document).bind("mousemove", MonHandler);

// supprime toutes les méthodes qui étaient associées à l’événement mousemove
$(document).unbind("mousemove");

// supprime l'association entre la méthode MonHandler et l’événement mousemove
// tout en conservant les méthodes précédement associées à cet événement
$(document).unbind("mousemove", MonHandler);

bind

Evenement ready

Permet de déclencher l'exécution du code JavaScript une fois que la page web a été entièrement chargée.

$(function() {
   // do stuff when DOM is ready
});

// équivalent à 
$(document).ready(function() { ... });

Evenement click

Permet de déclencher l'exécution du code JavaScript une fois que l'élément a été cliqué.

$("#id").click(function() {
    // désigne la balise id 
    $(this)
});

Simuler un click

// clique sur une balise a
$('.path > .to > .element > a')[0].click();

mouseover / mouseleave

// quand la sourie passe sur id, on affiche id2
$("#id").mouseover(function () {
    $("#id2").fadeIn();
})

// quand la sourie quitte id, on cache id2
$("#id").mouseleave(function () {
    $("#id2").fadeOut();
})

Ajouter / supprimer une balise

// suppression du noeud id
$("#id").remove();

// detach fonctionne comme remove mais conserve les données associées à l'élément supprimé
// utilise si l'on souhaite réinsérer l'élément
id = $("#id").detach();

// ajout d'id dans main ou déplacement s'il existe déjà dans le DOM
id.appendTo($("#main"));
// autre écriture
$("#main").append(id);

append
appendTo
remove
detach

Tableau / Array

var tableau = ["un", "deux", "trois"];

// map: projection de tableau dans nouveauTableau
var nouveauTableau = $.map(tableau, function(element, index) {
    return index + ' - ' + element;
});

// each: parcourt de tableau
$.each(tableau, function(index, value) {
    console.log(index + ": " + value);
});

// teste si tableau contient valeur
if ($.inArray("valeur", tableau ) > -1)
// inArray retourne l'index de l'élément, sinon -1

var first = tableau.shift();  // extrait la première valeur du tableau
var last = tableau.pop();  // extrait la dernière valeur du tableau

// tableau contenant toutes les balises input
inputArray = $('input').get()

// pour toutes les balises input
$('input').each(function(index) {
    // change l'attribut value avec la valeur de tableau à l'index correspondant
    $(this).attr('value', tableau[index]);
});

map
each

Charger un autre fichier Javascript

// équivaut à l'ajout d'une balise script dans le header
$.getScript("autre_fichier.js");

getScript
Javascript

Exemples

Afficher la position de la souris

<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

function AffichePos(event) {
	$("#posX").html(event.pageX);
	$("#posY").html(event.pageY);
}

$(document).ready(function() {
	$(document).bind("mousemove", AffichePos);
});

</script>
</head>

<body>
X : <div id=posX>0</div><br>
Y : <div id=posY>0</div><br>
</body>

JQuery

Sommaire