Tutorial jQuery

Date: 22/01/2008 | Catégories: Developpement,Open-source | Tags: ,,

Jquery logojQuery est une bibliothèque javascript open-source et cross-browser qui permet de traverser et manipuler très facilement l'arbre DOM de vos pages web à l'aide d'une syntaxe fortement similaire à celle d'XPath (qui est la syntaxe de manipulation d'arbre XML). jQuery vous permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. mais également de gérer les événements javascript ainsi que de faire des requetes AJAX le plus simplement du monde.

Pour développer jQuery, il suffit de connaitre un seul objet référencé par la variable "$". Cet objet est en fait une fonction javascript qui est le point d'entrée de tout le framework, et dont le retour est l'object "$" lui-meme (dont le contexte dépend de la fonction appelée) ce qui permet d'enchainer facilement et rapidement des actions (comme nous le verrons dans les exemples qui suivent).

Maintenant que les présentations sont faites, passons sans attendre aux exemples !

Tout d'abord, jQuery peut etre téléchargé ici sous forme d'un fichier .js normal ou compressé : http://jquery.com.Une fois téléchargé, il suffit de l'insérer entre les balises <head> et </head> de vos pages html.

Exemple : <script type="text/javascript" src="jquery-1.2.2.min.js"/>Quelques bases sur la sélection...

  • $("p");
    Cet appel retourne tous les éléments P (paragraphes) de votre document : on a rarement fait plus simple.
  • $(".tata");
    Cet appel retourne tous les éléments de votre document qui ont la classe CSS "tata".
  • $("#toto");
    Cet appel retourne l'élément de votre document, s'il existe, dont l'attribut ID est "toto".
  • $("#titi > span");
    Cet appel retourne tous les éléments SPAN contenus dans l'élément dont l'identifiant est "titi". On pourrait écrire cet appel de cette façon également : $("span", $("#titi"));
  • $("table#tutu > tr:even");
    Cet appel retourne tous les éléments TR pairs (pour les lignes impaires remplacer "even" par "odd") contenus dans l'élément TABLE dont l'identifiant est "tutu" (à noter la grande originalité des noms que je donne a mes identifiants...). Cet appel peut etre extremement utile pour appliquer une couleur de fond a toutes les lignes paires par exemple.

A partir de la, vous pouvez appliquer toutes les fonctions de jQuery que vous voulez. En voici quelques exemples concrets (cliquez ici pour télécharger les exemples d’appels jQuery du tutorial et les jouer chez vous) !

  • $("p").addClass("bluebg");
    Cet appel va chercher tous les éléments P de votre document et leur ajouter la classe CSS nommée "bluebg" si ils ne la possèdent pas déjà.
  • $("p").removeClass("bluebg");
    Cet appel retire la classe "bluebg" des éléments P du document.
  • $("p").toggleClass("bluebg");
    Cet appel va alterner les fonctions "addClass" et "removeClass" vues précédemment.
  • $("p:odd").css("border", "5px solid black");
    Cet appel va ajouter une bordure noire de 5px d'épaisseur a tous les éléments P impairs.
  • $("a[href=http://www.google.fr]").css("font-weight", "bold").css("color", "red").css("background-color", "green");
    Cet appel va transformer tous les liens pointant vers le site http://www.google.fr, comme celui-ci : google.fr c'est par ici !
  • $("p#testAppend > span").append("Hello World !");
    Cet appel va ajouter du texte a la balise SPAN contenu dans l'élément P dont l'identifiant est "testAppend".

Quelques effets sympas maintenant !

  • $("#testAnim").show("slow");
  • $("#testAnim").hide("normal");
  • $("#testAnim").slideDown(500);
  • $("#testAnim").slideUp(200);
  • $("#testAnim").toggle();
  • $("#testAnim").fadeIn();
  • $("#testAnim").fadeOut();

Si jamais vous trouvez que la bibliothèque jQuery propose peu d'animation, sachez qu'il est possible de rajouter des plugins ! Voici une petite liste de plugins très intéressants :

  • Interface est certainement le plugin le plus connu : il ajoute énormément d'animations a jQuery. Allez voir la page d'exemples ici
  • ThickBox permet de faire des "popup" html (pour faire des galeries d'images par exemple)
  • UI Datepicker permet de créer des calendriers très simplement
  • etc.

Voila, c'est fini pour cette petite introduction a jQuery. Voici quelques liens qui vous seront certainement utiles :

Bon développement !NDNicolargo: Merci à Ritchi, maître-es développeur pour ce billet !

  • Pingback: Laurent Deséchalliers : “Tech”Blog » [Veille>Dev] Un tutoriel sur JQuery()

  • Jquery est une bibliothèque vraiment pas mal. Le système de votes du planet-libre est d’ailleurs basé dessus.

  • Hello et merci pour ton billet.
    Divers plugins et astuces pour les amateurs : http://www.sakeco.net/blog/tag/jquery

    J’adore cette bibliothèque.

  • J’ai téléchargé ce matin même la librairie 😉
    Merci pour les plugins, ça peut en effet être très utile.

  • sebastien

    Je rajouterais ce lien vers la documentation en français de Jquery, destiné aux allergiques de la langue anglaise :-).

    C’est par ici: http://jquery.developpeur-web2.com

  • Depuis le moment où je me disais qu’il fallait que j’essaie 🙂
    Ton article m’a poussé à le faire, et je crois que je vais adopter jQuery pour pas mal de projets 🙂

  • Bonne petite introduction !

    Precisions:

    $(”#titi > span”); peut aussi s’ecrire $(”#titi span”); (enfin tout comme en css)

    $(”a[href=http://www.google.fr]”)… pour plus de souplesse: $(”a[href^=http://www.google.fr]”) … qui signifie tous les liens commençant par http://www.google.fr (plus souple que l’égalité strict)

    Bonne continuation 😉

  • Bonjour,

    Cet article est très intéressant. Parler de JQuery est une action
    d’utilité publique pour le web.
    Vous pouvez consulter plus d’informations sur le site http://www.webjax.eu
    et plus particulièrement la rubrique http://www.webjax.eu/r/14-JQuery-javascript-framework-ajax-library-jquery-j-query-Framework-Javascript-Library-Ajax-asyncronous-web2.0-ria-dom-control-enhancer
    qui présente la documentation officielle de Jquery en version française.

    Vive le web2.0 et ajax, longue vie aux codeurs 🙂

  • Pour les fans, une liste de 100 scripts Jquery chez Smashing Coding:

    http://smashingcoding.com/2008/06/22/100-scripts-pour-jquery/

    • lolo

      Attention ce lien est malveillant !! Ne cliquez pas sur un lien. Je viens de faire l’expérience. Je suppose que le propriétaire du site en est responsable.

      En résumé, il m’a redirigé vers des pages FAKE et identique à un site marchant très connu. J’ai cliqué sur mon compte par curiosité sachant que c’était un fake. Et à mon plus grand étonnement, celui-ci à sorti mon login et mot de passe !!! Or sur ce site est enregistré mes coordonnées bancaires. Je viens de changer mon mot de passe. Mais je ne sais pas si celui-ci a eu le temps ou non de les récupérer !! Je suis retourné sur le même lien en question 10 minutes après et la page avait disparu. Donc j’en suis sûr, il s’agit d’une arnaque à la carte bancaire.

  • Usman JAVED

    Rien à dire tout est là !
    Bon article.

  • un peu inutile ce tuto, il manque la moitié des choses pour comprendre un minimum …

  • pas d’accord avec toi je pense que c’est un bon début pour commencer même si c’est sûr que tu ne maitriseras pas jquery sur le bout des doigts uniquement avec ce tuto

  • Pingback: Technologies : Inspiration « Ya-leel()

  • Syphax

    Merci pour très bon tutorial.

  • Syphax

    Un tutoriel très intéressant. Merci bien Nicolargo.

  • Pingback: Démarrer avec JQuery « Blog d'Eric BATARSON()

  • Très bon tuto pour commencer JQuerry merci bien!

  • super!

    si gentil, je vous remercie de votre part.

  • si l’on en croit la ligne de vêtements déjà baptisée

  • Bonjour et merci beaucoup pour votre contribution,, je souhaite vous soumettre une question : comment s’y prendre pour imprimer votre article pour le consulter sur mon téléphone portable ? Merci pour tout.

  • Nickel, c’est exactement ce que je cherchais (changer le css d’un élément via jquery)
    merci!

  • J’adore votre blog et Jane. C’est le meilleur là-bas! Depuis, j’ai trouvé le vôtre, je n’ai pas la peine d’aller vérifier sur d’autres. Je suis accro à votre blog parce que je reviens chaque jour en espérant que vous avez mis à jour

  • Wedding around the corner, costumes are perfect when the body, a pair of high heels often become the enemy of brides. Especially for recreational christian louboutin sandals sports camp for brides ,7-8cm high heels, although thousands of people to deportment.

  • La question est : vais-je arriver à le faire avec le peu de compétence dont la nature m’a pourvue ?

  • Laila

    vraiment la biblio est intéressante, merci beaucoup

  • Il ya différents postes dans l’existence à proximité de cela, je crois en tenant il référence pourrait expérience a fait de cette place ou à l’article très instructif. Expression d’objectif pratique ce post est de mauvaise qualité. Simplement je peux prononcer le fait que d’informations fournies ici est unique, simplement pour faire vraiment plus près complète, offrir des informations ancienne obtiendrez été vraiment bon. Les points que vous avez touché énumérés ici sont vitales, ainsi Permettez-moi de repérer un grand nombre de l’information ici pour construire ce fait idéal pour les débutants tout est là. Un grand merci pour cette information. En fait utile!

  • Gracias por este maravilloso sitio. Me gusta mucho la forma en que hizo hincapié en su punto de vista de la derecha here.i aprendido mucho y puedo obtener muchos conocimientos al leer esto.
    responder

  • Just found this article and wanted to thank you for it. I’m a new VA who, after a year of thinking and planning, is ready to “hang her shingle”. I appreciate the links to the other articles as well!

  • Det finns olika poster som finns i närheten av denna, tror jag tar det hänvisas kunde uppleva gjort denna plats eller artikeln verkligen informativa. Konkret mål uttryck detta inlägg är dålig kvalitet. Helt enkelt jag kan uttala att information som tillhandahålls här var unik, bara för att verkligen göra det mer nära fullständig, stödja med tidigare uppgifter kommer att få varit faktiskt bra. De poäng du har berört listas här är avgörande, vilket Låt mig upptäcka många av informationen här för att bygga detta faktiskt bra för helt nybörjare är här. Stort tack för denna information. Faktiskt bra!

  • Saya pikir perspektif Anda adalah mendalam itu, yang hanya dipikirkan dengan baik dan benar-benar fantastis untuk melihat seseorang yang tahu bagaimana untuk menempatkan pikiran bawah tesis dengan baik. Great job ini
    blog Anda sangat good.It sangat baik ditulis dan mudah dimengerti. Tidak seperti blog tambahan saya telah membaca Yang benar-benar tidak baik. Saya aussi menemukan posting Anda sangat menarik

  • Pingback: webjax.eu vilain spammeur - Aymeric Jacquet Aymeric Jacquet, Web Design, Référencement et petite entreprise » Blog Archive()