Aide-mémoire jQuery

Gratuit

Une référence jQuery imprimable et consultable — sélecteurs, manipulation du DOM, événements, effets, parcours, AJAX et utilitaires de formulaire. Gratuit.

Sélecteurs

$('#id')

Sélectionner un élément par son id

$('.class')

Sélectionner tous les éléments d'une classe

$('div')

Sélectionner tous les éléments d'une balise

$('*')

Sélectionner tous les éléments de la page

$('[name="email"]')

Sélectionner par valeur d'attribut

$('a[href^="https"]')

Sélecteur d'attribut commençant par

$('ul li:first')

Premier élément correspondant

$('ul li:last')

Dernier élément correspondant

$('tr:eq(2)')

Élément à un index base 0

$('li:not(.done)')

Exclure les éléments correspondant à un sélecteur

$(':checked')

Toutes les cases/radios cochées

$('div:visible')

Seulement les éléments actuellement visibles

$('ul li')

Combinateur descendant

$('ul > li')

Combinateur enfant direct

Document prêt et DOM

$(function () { /* ... */ });

Exécuter du code une fois le DOM prêt

$(document).ready(fn)

Gestionnaire document-ready explicite

$(window).on('load', fn)

Exécuter après le chargement de toutes les ressources

$(this)

Encapsuler l'élément du contexte courant

$(el)

Encapsuler un nœud DOM brut dans jQuery

$('<div class="box"></div>')

Créer un nouvel élément à partir de HTML

$('#box')[0]

Obtenir le nœud DOM sous-jacent

$('#box').get(0)

Obtenir le nœud DOM via .get()

$('.item').length

Compter les éléments correspondants

$('#box').is(':visible')

Tester un sélecteur sur l'ensemble

Manipulation du DOM

$('#box').html('<b>Hi</b>')

Définir le HTML interne

$('#box').text('Hello')

Définir le contenu texte (échappé)

$('#name').val('Ada')

Définir la valeur d'un champ de formulaire

$('#list').append('<li>x</li>')

Insérer du contenu à la fin

$('#list').prepend('<li>x</li>')

Insérer du contenu au début

$('#box').before('<hr>')

Insérer du contenu avant l'élément

$('#box').after('<hr>')

Insérer du contenu après l'élément

$('#box').remove()

Retirer l'élément du DOM

$('#box').empty()

Supprimer tous les nœuds enfants

$('#box').clone()

Créer une copie de l'élément

$('#box').wrap('<div>')

Encapsuler l'élément dans du nouveau HTML

$('#box').replaceWith('<p>')

Remplacer entièrement l'élément

Attributs et CSS

$('#img').attr('src')

Obtenir la valeur d'un attribut

$('#img').attr('alt', 'Logo')

Définir la valeur d'un attribut

$('#cb').prop('checked')

Obtenir une propriété DOM (checked/disabled)

$('#cb').prop('checked', true)

Définir une propriété DOM

$('#img').removeAttr('title')

Supprimer un attribut

$('.box').addClass('active')

Ajouter une classe CSS

$('.box').removeClass('active')

Supprimer une classe CSS

$('.box').toggleClass('open')

Basculer une classe CSS

$('.box').hasClass('active')

Tester si une classe est présente

$('#box').css('color', 'red')

Définir une propriété CSS

$('#box').css({top: 0, left: 0})

Définir plusieurs propriétés CSS

$('#box').width()

Obtenir la largeur calculée en pixels

$('#box').height()

Obtenir la hauteur calculée en pixels

Événements

$('#btn').on('click', fn)

Attacher un gestionnaire d'événement

$('#btn').off('click')

Détacher des gestionnaires d'événement

$('#btn').click(fn)

Gestionnaire de clic abrégé

$('#form').submit(fn)

Gérer la soumission d'un formulaire

$('#sel').change(fn)

Gérer les changements de valeur

$('#in').keyup(fn)

Gérer le relâchement de touche dans un champ

$('#list').on('click', '.item', fn)

Événement délégué pour enfants dynamiques

$('#btn').trigger('click')

Déclencher un événement par programmation

$('#btn').one('click', fn)

Exécuter un gestionnaire une seule fois

e.preventDefault()

Empêcher l'action par défaut du navigateur

e.stopPropagation()

Empêcher l'événement de remonter (bubbling)

e.target

L'élément qui a déclenché l'événement

Effets et animation

$('#box').show()

Afficher un élément masqué

$('#box').hide()

Masquer un élément

$('#box').toggle()

Basculer la visibilité

$('#box').fadeIn(300)

Faire apparaître un élément en fondu

$('#box').fadeOut(300)

Faire disparaître un élément en fondu

$('#box').fadeTo(300, 0.5)

Fondre vers une opacité donnée

$('#box').slideUp()

Faire remonter un élément (replier)

$('#box').slideDown()

Faire descendre un élément (déplier)

$('#box').slideToggle()

Basculer une animation de glissement

$('#box').animate({left: 100})

Animer des propriétés CSS

$('#box').stop()

Arrêter l'animation courante

$('#box').delay(500).fadeIn()

Retarder le prochain effet en file

Parcours du DOM

$('#box').find('.item')

Trouver les descendants correspondant à un sélecteur

$('#box').parent()

Obtenir le parent direct

$('#box').parents('.row')

Obtenir tous les ancêtres correspondant à un sélecteur

$('#box').closest('.row')

Plus proche ancêtre correspondant (ou soi-même)

$('#box').children()

Obtenir les enfants directs

$('#box').siblings()

Obtenir les éléments frères

$('#box').next()

Obtenir le frère suivant

$('#box').prev()

Obtenir le frère précédent

$('.item').each(fn)

Itérer sur chaque élément correspondant

$('.item').filter('.on')

Réduire l'ensemble par un sélecteur

$('.item').first()

Réduire l'ensemble au premier élément

$('.item').eq(1)

Réduire l'ensemble à un seul index

AJAX

$.ajax({url: '/api', method: 'GET'})

Requête AJAX à contrôle total

$.get('/api', fn)

Requête HTTP GET abrégée

$.post('/api', data, fn)

Requête HTTP POST abrégée

$.getJSON('/api.json', fn)

Requête GET attendant du JSON

$('#box').load('/part.html')

Charger du HTML dans un élément

$.ajax({dataType: 'json'})

Définir le type de réponse attendu

$.ajax({data: {q: 'x'}})

Envoyer des paramètres de requête

.done(function (res) {})

Exécuter un callback en cas de succès

.fail(function (err) {})

Exécuter un callback en cas d'échec

.always(function () {})

Exécuter un callback après achèvement

$.ajaxSetup({headers: {}})

Définir les valeurs par défaut pour toutes les requêtes

Formulaires

$('#form').serialize()

Encoder les données du formulaire en chaîne de requête

$('#form').serializeArray()

Encoder les données du formulaire en tableau

$('#name').val()

Lire la valeur d'un champ

$('#name').val('Ada')

Écrire la valeur d'un champ

$(':input')

Sélectionner tous les champs de saisie du formulaire

$('#cb').is(':checked')

Tester si une case est cochée

$('#sel option:selected')

Obtenir l'option sélectionnée

$('#in').focus()

Placer le focus sur un champ

$('#form').on('submit', fn)

Gérer l'événement de soumission du formulaire

$('#in').prop('disabled', true)

Désactiver un contrôle de formulaire

Utilitaires

$.each(arr, fn)

Itérer sur un tableau ou un objet

$.map(arr, fn)

Construire un nouveau tableau à partir de chaque élément

$.grep(arr, fn)

Filtrer un tableau par un prédicat

$.extend({}, a, b)

Fusionner des objets dans une cible

$.trim(' hi ')

Supprimer les espaces en début/fin

$.inArray(2, arr)

Trouver l'index d'un élément dans un tableau

$.isArray(x)

Tester si une valeur est un tableau

$.isFunction(x)

Tester si une valeur est une fonction

$.parseJSON(str)

Analyser une chaîne JSON en objet

$.now()

Horodatage actuel en millisecondes

$.type(x)

Obtenir le type interne d'une valeur

Aucune entrée ne correspond à « :q ».

Besoin d'aide ?

Un problème avec cet outil ? Signalez-le à notre équipe.

Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.

<iframe src="https://tweakee.com/fr/studio/dev/jquery-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>