Outils pour utilisateurs

Outils du site


cours2011:jquery_semestre_4:td:bases_jquery

Bases jQuery

L'objet jQuery

Une des particularités de jQuery est d'utiliser une seule variable comme point d'entrée : jQuery. Le but est d'éviter la pollution des variables globales.

jQuery et $ : le même objet.

Comme on utilise souvent la fonction jQuery, il est d'usage d'utiliser un nom plus court : $

les usages de base de la fonction jQuery/$

voir la documentation : http://api.jquery.com/jQuery/

Sélecteurs

On peut appeler jQuery avec une chaîne de caractères contenant un sélecteur CSS. Cela retourne une collection d'éléments correspondant au sélecteur (instance de jQuery).

console.log( $('.menu li') )

HTML

Si on passe à la fonction jQuery une chaîne de caractères représentant du code HTML, elle retourne les éléments ainsi créés.

$('.menu li').append($("<span> | </span>"))

Dom ready ?

Si on appel la fonction jQuery avec une fonction comme paramètre, c'est équivalent à ”$(document).ready()” : c.-à-d. exécuter le code quand on pourra manipuler le DOM de la page HTML (se produit avant que la page soit totalement chargée).

jQuery(function ($) {
  //mon code qui utilise le DOM
});

les idiomes de base

JavaScript : les closures

Application pour isoler le code jQuery

JavaScript : tout est Objet (même les fonctions)

jQuery : différence entre fonctions et méthodes

Le chaînage

Règle de base pour jQuery : si une méthode ne retourne pas de valeur significative, elle retourne l'objet sur lequel elle est appelée. Cela permet d'enchaîner les appels sur le même objet (ou collection d'objets).

var tooltip = $("<div>Test</div>") 
	.addClass("tooltip")
	.css({
		position:"absolute",
		left:$this.position().left,
		top:$this.position().top+$this.outerHeight()
	})
	.insertAfter($this)
	.fadeIn()
	.load($this.attr("href").replace("#"," #"));

Javascript : la possibilité de tester les arguments de fonction

La syntaxe propre à jQuery pour les getter/setter

// lire
$('...').css("border-left-color");
// écrire
$('...').css("border-left-color","#F00");

Les objets en notation littérale

Entre accolades ”{}” des couples de clefs/valeurs séparés par des virgules (les clefs sont des chaînes de caractères). si la clef répond aux règles d'un identifiant :

  • On peut omettre les guillemets.
  • On peut utiliser la notation pointée pour la lire.

C'est fréquemment utilisé par la librairie jQuery pour permettre de passer de multiple valeur à une fonction p. ex. :

$('..').css( { prop1:"val1",prop2:"val2,prop3:"val3" } )

Les collections (instances de jQuery)

console.log($('.menu li'));
console.log($('.menu li').first());
$('.menu li').append($("<span> | </span>"));
$('.menu li').first().append($("<span> | </span>"));

Par défaut une méthode s'applique à tous les éléments retournés par un sélecteur (si cela à du sens).

Les catégories de la documentation

+Ajax                           // Fonctions pour AJAX
   Global Ajax Event Handlers      // Événements globaux pour les requêtes AJAX (c.-à-d. pour toutes les requêtes)
   Helper Functions                // Encoder les données (formulaire,objets...) pour transmission.
   Low-Level Interface             // La fonction ajax de base (et ses 10 000 options)
   Shorthand Methods               // Raccourci pour les actions courantes jQuery.post() jQuery.get() jQuery.getJSON() .load
 Attributes                     // Modifier les attributs des éléments du DOM : <elm attr="..."> Et les propriétés (~=attribut?) 
 Callbacks Object               // Base pour du pub/sub (Observer pattern)
 Core                           // jQuery et autre (spéciaux)
 CSS                            // Tout pour les CSS (e.g. changer le contenu de l'attribut style)
 Data                           // Association de données aux éléments (gestion HTML5 data- ) et queues d'animation
 Deferred Object                // Pour enchaîner des actions (programmation asynchrone) p. ex. AJAX
 Deprecated                     // Ne pas utiliser (va disparaître)
 Dimensions                     // Manipuler les (propriétés de) dimensions des éléments
+Effects                        // Les effets
   Basics                          // Montrer / cacher
   Custom                          // Animer, enchaîner les animations, les arrêter...
   Fading                          // Effets de fondu
   Sliding                         // Effets de volet
+Events                         // La gestion des événements
   Browser Events                  // Du navigateur : redimensionner la fenêtre, la faire défiler
   Document Loading                // Quand on peut manipuler le DOM, quand la page à fini de charger
   Event Handler Attachment        // Ajouter des gestionnaires d'événements 1.7 utilisez on(/off) ou les raccourcis
   Event Object                    // Ce que reçoit un gestionnaire d'événements
   Form Events                     // Raccourcis propres aux formulaires
   Keyboard Events                 // Raccourcis propres au clavier
   Mouse Events                    // Raccourcis propres à la souri
 Forms                          // Utilitaires pour gérer les données des formulaires
 Internals                      // Affaires internes ;)
+Manipulation                   // Changer le DOM
   Class Attribute              // Problème propre à l'attribut "class". Une valeur, plusieurs class CSS séparer par des espaces
   Copying                      // cloner un élement
   DOM Insertion, Around        // Ajouter des éléments autour d'un existant
   DOM Insertion, Inside        // Ajouter des éléments dans un existant et changer le contenu texte/HTML
   DOM Insertion, Outside       // Ajouter des éléments avant ou après un existant
   DOM Removal                  // Supprimer des éléments (Attention .detach() != .remove(), p. ex. utiliser .remove())
   DOM Replacement              // Remplacer des éléments
   General Attributes           // Nuance Attribut/Propriétés (syntaxe get/set propre à jQuery)
   Style Properties             // Propriétés CSS et taille, position, défilement (scroll) 
+Miscellaneous
   Collection Manipulation      // .each() : exécuter du code pour chaque élément 
   Data Storage                 // Associer des données aux éléments HTML (compatible HTML5 attribut data- )
   DOM Element Methods          // Manipule la liste retournée par un sélecteur (par position, la taille, convertir en tableau)
   Setup Methods                // jQuery.noConflict() : redonne à $ sa valeur précédente
 Offset                         // Position, parent positionné, défilement (scrolling).
+Plugins                        // Appeller à disparaître (passent à jQuery UI)
   Data Link                    // Abandoné
   Templates                    // Abandoné
+Properties                     // Illustre la différence en l'Objet (~Class~) jQuery et ses instances (résultat d'un sélecteur)
   Properties of jQuery Object Instances
   Properties of the Global jQuery Object
+Selectors                      // Tous les sélecteurs CSS3 et plus
   Attribute
   Basic
   Basic Filter
   Child Filter
   Content Filter
   Form
   Hierarchy
   jQuery Extensions            // des extensions, dont certaines propres à jQuery (:parent)
   Visibility Filter
+Traversing                     // Se déplacer/sélectionner dans le DOM (~l'arbre~)
   Filtering                    // affiner, trier les éléments "sélectionnés"
   Miscellaneous Traversing     // ajouter, trouver les enfants et .end() pour "abuser" du "method chaining"
   Tree Traversal               // parent/enfant , précédant/suivant ...
 Utilities                      // des fonctions diverses (ex: jQuery.extend())
+Version                        // Les notes de version (évolution apportée)
   ...
   Version 1.6
   Version 1.7

Avoir toujours la documentation avec soit

cours2011/jquery_semestre_4/td/bases_jquery.txt · Dernière modification: 2012/01/26 23:00 (modification externe)