jQueryfacile | Par l'exemple

Une série d'exemples regroupés par catégories.

  1. Manipulations de base du DOM
    1. text() - Remplacer ou lire le texte d'un élément
    2. html(), $('<element/>', {}) - Créer un élément et l'insérer dans le DOM
    3. before(), after(), append(), prepend() - Insérer un élément dans un ordre déterminé
    4. wrap(), wrapAll(), wrapInner() - Insérer un élément autour ou à l'intérieur
  2. Événements
    1. click() - Créer un événement simple
    2. click(), addClass() - Ajouter une classe
    3. click(), this - Cibler l'élément lui-même
    4. click(), removeClass(), preventDefault() - Supprimer une classe et le comportement par défaut
  3. En pratique : liste de liens éditable (pas à pas)
    1. on(), parent() - Cliquer sur un élément créé dynamiquement et remonter d'un niveau
    2. val() - Lire ou définir la valeur d'un champ de formulaire
    3. remove() - Supprimer un élément
    4. :checked - Sélectionner un bouton radio actif
    5. each() - Faire une boucle
  4. En pratique : menu à onglets (pas à pas)
    1. attr() - Lire ou définir la valeur d'un attribut
    2. show(), hide() - Cacher ou afficher un élément
    3. eq(), index(), :visible - Sélectionner un élément visible et déterminer son rang dans un ensemble
  5. CSS, hauteur et largeur
    1. css() - Lire ou définir la valeur de propriétés CSS
    2. height(), width(), outerHeight(), outerWidth() - Connaître la hauteur et la largeur d'un élément
  6. Parcourir l'arborescence
    1. prev(), next(), siblings(), parent() et children() - Parcourir le DOM
    2. prevAll(), nextAll() et parents() - Parcourir le DOM (suite)
  7. En pratique : événements formulaire (pas à pas)
    1. focus(), blur() - Initier une action à la sélection ou à la désélection d'un élément de formulaire
    2. RegExp(), test() - Valider les entrées dans les champs (JavaScript)
    3. change(), trigger(), option:selected - Détecter un changement et initialiser une action
    4. submit(), serialize(), preventDefault() - Soumettre et encoder un formulaire sans recharger la page
  8. Plus loin avec les événements
    1. bind() - Combiner plusieurs événements dans un même gestionnaire
    2. stopPropagation() - Arrêter la propagation d'un événement dans le DOM
  9. Animation
    1. toggle(), toggleClass() - Alterner entre affichage et masquage, ajout et suppression de classe
    2. slideToggle(), next() - Découvrir et cacher un élément avec un effet de tiroir
    3. fadeIn(), fadeOut(), setInterval(), JSON - Faire apparaître ou disparaître un élément en fondu
    4. animate(), jQuery Color, jQuery Easing - Animer les propriétés CSS
    5. position() et opérateur ternaire - Créer un méga menu
    6. elem[attr$="val"], :hidden, :first - Choisir les bons sélecteurs pour créer un menu à tiroirs
  10. Requêtes AJAX
    1. load() - Charger le contenu d'un fichier externe
    2. ajax(), done() - Passer des variables à un script PHP et charger les données renvoyées
    3. ajax(), json - Charger des données JSON renvoyées par un script PHP (même domaine)
    4. ajax(), jsonp, API (conversion de devises) - Charger des données JSON renvoyées par un API (domaine différent)
    5. $.each() - Faire une boucle dans des données en format JSON
    6. Widget météo - Recourir à l'API d'OpenWeatherMap
  11. jQuery UI
    1. Draggable, Resizable - Déplacer et redimensionner un conteneur
    2. Sortable, Droppable - Éditer des menus
    3. Datepicker, Moment.js - Manipuler les dates
  12. Plugins: les indispensables
    1. iCheck - Modifier le rendu des balises input de type checkbox et radio (et options supplémentaires)
    2. Select2 - Modifier le rendu de la balise select (et options supplémentaires)
    3. jQuery Cookie - Lire, écrire et supprimer des cookies
  13. Compléments
    1. Sélectionner une élément
    2. Afficher un texte saisi par l'utilisateur

Références

© jQueryfacile, 2015. Contact.