Admin CliCours
Pourquoi choisir jQuery ?
• Basée sur des sélecteurs CSS • Simple à comprendre et à apprendre • Ne modifie pas l’espace de travail et s’interface avec d’autres librairies • Javascript non-intrusif • Multitude de plugins disponibles (http://plugins.jquery.com/)
La fonction jQuery()
• jQuery(‘monSelecteurCSS’) va sélectionner les objets html qui correspondent à monSelecteurCSS et les retourne sous forme de collection directement exploitable. Sélecteurs CSS : #monID, .maClasse, :monType, monElementHtml • jQuery() peut-être remplacé par $() $(‘#monID’), $(‘.maClasse’), $(‘input:radio’), $(‘monElementHtml’)
Exemples de sélecteurs
• $(‘#header’) > sélectionne l’objet html ayant pour id “header” • $(‘.container’) > sélectionne tous les objets ayant la classe “container” • $(‘a’) > sélectionne l’ensemble des liens de la page • $(‘#maListe li’) > sélectionne l’ensemble des ‘li’ de la liste #maListe • $(‘input:reset’) > sélectionne tous les boutons de type “reset”
Liste des sélecteurs
• liste de l’ensemble des sélecteurs possibles avec jQuery 1.2 • Extrait de jQuery CheatSheet (par Color Charge)
http://colorcharge.com/jquery/
Manipuler une collection d’objets • $(‘p’).addClass(‘important’) > ajoute la classe important à l’ensemble des paragraphes • $(‘img#photo’).attr(‘src’,’img/photo.jpg’) > change l’attribut “src” de l’image ayant l’id photo par “img/photo.jpg” • $(‘a.plus’).html(“en savoir plus”) > modifie le code html des liens ayant la classe plus par “en savoir plus” • $(‘#container’).css(“background-color”, “white”) > change la couleur de fond du #container par la couleur blanche
Récupérer des valeurs
• Même si les sélecteurs jQuery retournent des collection d’objets, beaucoup de méthodes (fonctions) s’appliquent directement au premier objet retourné. Elles permettent de récupérer facilement des attributs d’éléments html.
var hauteurContainer = $(‘#container’).height(); var srcPhoto = $(‘img.photo’.attr(‘src’); var contenuLastP = $(‘p:last’).html();
Liste des manipulateurs
• liste de l’ensemble des manipulateurs possibles avec jQuery 1.2 • Extrait de jQuery CheatSheet (par Color Charge)
http://colorcharge.com/jquery/
Télécharger le cours complet
