jQuery : écrivez moins pour faire plus !

Par tit_toinou Mise à jour : 28/10/2010 Difficulté : Intermédiaire Durée d'étude : 14 jours 9 054 visites depuis 7 jours, classé 28/786

jQuery est une bibliothèque JavaScript gratuite et très pratique, ayant une syntaxe courte et logique, compatible avec tous les navigateurs courants.
jQuery est devenue une référence importante à savoir utiliser : pour preuve, elle est largement répandue sur la toile. Microsoft, Twitter, Mozilla, Google Code, Amazon et Wordpress France, pour ne citer qu'eux, l'utilisent.
Vous ne le savez peut-être pas encore, mais jQuery est même utilisé par le Site du Zéro sur la page que vous visitez en ce moment .

Pour pouvoir suivre ce tutoriel sur « jQuery JavaScript Library », je vous recommande fortement de :

1. Connaître les bases de l'HTML (les balises) ainsi que du CSS (les sélecteurs) ;
2. mais surtout de connaître le JavaScript ;
3. en maîtrisant les événements, le DOM, etc. ;
4. ainsi que ses subtilités telles que les closures ou encore les objets.

Tout le long du tutoriel, je vais mettre à disposition les exemples d'utilisation de jQuery sur un site personnel. Il suffit de cliquer sur le titre de l'exemple ("Essayez ce code !") pour accéder à la page.
Chacune de ces pages donnera un lien vers JSBin et un autre vers jsFiddle. Ce sont deux sites bac à sable, où on peut tester et éditer son propre code JavaScript.

Il est important que vous n'hésitiez pas à modifier le code pour vous entraîner !


Ce tutoriel se propose donc comme alternative à la documentation officielle, en partant de zéro.
Bonne lecture .

• Bases de jQuery
• Plus loin dans jQuery
• Lire aussi
• Commentaires et appréciations

• Retour en haut

  Partie 1 : Bases de jQuery

  Dans cette première partie nous verrons jQuery Core, c'est-à-dire le script jQuery nu, sans aucun plugin tierce. Nous y étudierons la sélection basique des éléments par la fonction principale, la modification et l'accessibilité du contenu des éléments ainsi que de leurs attributs et de leurs style, et pour finir l'animation des éléments et les événements les plus basiques.
  
  Nous partirons de zéro et verrons pas à pas comment utiliser chaque méthode avec un ou plusieurs exemples. Le QCM de fin de chapitre vous permettra de vérifier vos connaissances tandis que le TP vous entraînera à les mettre en pratique, et ne nécessitera que les connaissances acquises au fur et à mesure du tutoriel.

  • Chapitre 1

    ---

    Découvrir jQuery

    • Présentation
    • Installation
    • Fonction principale
    • Sélecteurs
    • Q.C.M.
  • Chapitre 2

    ---

    Manipuler le contenu

    • Contenu textuel
    • Remplacer la balise
    • Insertion à l'intérieur et à l'extérieur
    • Envelopper
    • Copier, supprimer et vider
    • TP : Condensé
    • Q.C.M.
  • Chapitre 3

    ---

    Modifier la structure

    • jQuery et le document
    • Passer une fonction aux méthodes
    • Créer des éléments
    • Attributs
    • Formulaires
    • Boucler sur des éléments
    • TP : Sommaire automatique
    • Q.C.M.
  • Chapitre 4

    ---

    Décorer la page

    • Style
    • Classes
    • Dimensions
    • Ascenseurs
    • Positions
    • Q.C.M.
  • Chapitre 5

    ---

    Animer des éléments

    • Équivalents des événements
    • Créer ses animations
    • Utiliser les effets
    • Contrôler les animations
    • TP : Menu déroulant
    • Q.C.M.

  
  Vous connaissez maintenant les principales méthodes de jQuery qui vous seront utiles à tout moment.
• Retour en haut

  Partie 2 : Plus loin dans jQuery

  Ici, nous finirons de voir entièrement jQuery Core. Vous y étudierez les événements, le parcours du document par des méthodes, l'AJAX, comment créer ses propres plugins ainsi que bien sûr tous les petits utilitaires mis à notre disposition par jQuery.
  
  Les explications seront un peu moins fournies en exemples par rapport aux chapitres de la partie précédente, mais nous comptons bien sûr sur vous pour couvrir tous les aspects d'une méthode de façon autonome. Par contre, les QCM et les TPs seront toujours au rendez-vous !

  • Chapitre 1

    ---

    Gérer les événements

    • Écouter et supprimer
    • Déclencher
    • Déléguer
    • Espaces de noms
    • Q.C.M.

  
  Vous êtes maintenant capables de maîtriser l'ensemble de cette bibliothèque JavaScript.

Partager

Lire aussi

	Dynamisez vos sites web avec Javascript !
	Développez votre propre plug-in jQuery !
	Les bibliothèques
	time.h et ses fonctions

Retour en haut

46 commentaires pour "jQuery : écrivez moins pour faire plus !"

Note moyenne : 3.50 / 4 (133 votes)

Pseudo	Commentaire
tit_toinou	# Posté le 26/11/2011 à 14:52:42
	Effectivement je ne suis pas très à jour .. [Cod'Art][Processing] Visualisation des fonctions complexes jQuery : écrivez moins pour faire plus !
CEditeur	# Posté le 11/02/2012 à 02:27:39
Avis : Très bon	très très outil ce tuto n’hésiter pas à donné de la suite SVP, j'attend avec impatience
voynich	# Posté le 22/02/2012 à 04:54:32
Avis : Très bon Études : EFREI	Merci bcp de ton amabilité de nous avoir offert ce cours, ça nous est très utile, merci bien encore, j’espère juste, comme la plupart ici, que tu puisse pouvoir continuer ce magnifique cours, car y en parmi nous, qui sauront pas continuer tout seuls, au moins dans mon cas (désolé. Merci encore.
Julien xD	# Posté le 04/03/2012 à 15:42:19
Victor Numquam Cedit Avis : Très bon Ville : Plouzane Pays : France métropolitaine Études : ENIB (Ecole Nationale d'Ingénieurs de Brest) - Bretagne	Sérieux, ce tutoriel déchire ! Je viens de terminer ce qui était en ligne, j'y vois carrément plus clair ! Merci à toi ! Je t'encourage grave à mettre la suite ! Le Monde appartient à ceux qui se couchent tard.
Rafale56	# Posté le 16/05/2012 à 16:13:17
Avis : Très bon	Très bon tuto Tit_toinou ! Est-ce qu'il y aura la suite prochainement ? Mes encouragements pour la suite.

Voir tous les commentaires