Enseignement > IHM > TP HTML JQuery Framworks > TP n°5 (premiers pas en jQuery)  
1. Récupérér la bibliothèque jQuery
 
2. HELLO WORLD !
Ecrire une page HTML qui utilise cette bibliothèque jQuery
 
<script type="text/javascript" src="jquery.js"></script>
 
Etudier la fonction suivante, en affichant une alerte lorsque la page est chargée.
 $(document).ready(function() 
{ // Traitement à effectuer lorsque le DOM est prêt });

3. Présentation des sélecteurs

La première chose à apprendre de jQuery afin d'être en mesure de séparer vos codes JavaScript et (X)HTML sont les sélecteurs. Ils permettent de sélectionner un ou plusieurs éléments du DOM, ces derniers pouvant être manipulés comme tout autre objet. jQuery permet la sélection des éléments grâce à une fonction spéciale nommée « $ ».

$(document) // Extension de l'objet document à la classe jQuery.
$('*') // Sélectionne tous les éléments.
$('#monDiv') // Sélectionne l'élément ayant l'ID "monDiv".
$('p.first') // Sélectionne les éléments <p> ayant la classe "first".
$('p[title]') //Sélectionne les éléments <p> ayant un attribut "title".
$('p[title="Bonjour"]') // Sélectionne les éléments <p> dont l'attribut title est "Bonjour".
$('p[title!="Bonjour"]') // Sélectionne les éléments <p> dont l'attribut title n'est pas "Bonjour".
$('p[title^="H"]') // Sélectionne les éléments dont l'attribut title commence par "H".
$('p[title$="H"]') // Sélectionne les éléments dont l'attribut title fini par "H".
$('p[title*="H"]') // Sélectionne les éléments dont l'attribut title contient "H".
$('ul, ol, dl') // Sélectionne les éléments <ul>, <ol> et <dl>
$('div .desc') // Sélectionne les éléments ayant la classe "desc" descendants (au sens CSS) d'éléments <div>.
$('div > .enfant') // Sélectionne les éléments ayant la classe "enfant" enfants d'éléments <div>.
$('label + input') // Sélectionne les éléments <input /> dont l'élément précédent (dans le DOM) est <label>.
$('#debut ~ div') // Sélectionne les éléments <div> frères se situant après l'élément dont l'id est "debut".

La sélection par filtre
jQuery offre une très large possibilité de sélection d'éléments en fonction de filtres sur des collections d'éléments.
Le fonctionnement de la sélection par filtre est simple : on sélectionne d'abord un ensemble d'éléments (par défaut, tous) puis on affine cette sélection à partir de certains critères.

// La notation [a|b] signifie que l'on applique le filtre a ou le filtre b.

$('div:first') // Sélectionne le premier élément <div>.
$('div:last') // Sélectionne le dernier élément <div>.
$('div:not(.ok)') // Sélectionne les <div> n'ayant pas la classe "ok".
$('div:[even|odd]') // Sélectionne les éléments <div> de rang [pair|impair] (le premier rang est 0).
$('div:[eq|lt|gt](n)')// Sélectionne le ou les éléments <div> de rang [égal|inférieur|supérieur] à n.
$(':animated') // Sélectionne les éléments actuellement animés.
$("div:contain('dvp')") // Sélectionne les éléments <div> contenant le texte "dvp" (sensible à la casse !)
$('div:empty') // Sélectionne les éléments <div> vides.
$('div:has(p)') // Sélectionne les éléments <div> ayant un descendant <p>.
$('div:parent') // Sélectionne les éléments <div> ayant des enfants (y compris les noeuds texte).
$('div:nth-child([n|even|odd|equation])') // Les enfants de <div> [de rang n|pairs|impairs|résultat de].
$('div:[first-child|last-child]') // Les éléments [premier|dernier] enfants d'un élément <div>.
$('div:only-child') // Les éléments qui sont les seuls enfants d'un élément <div>.
               
Les éléments de formulaire
$(':input') // Tous les éléments <input />, <textarea>, <select> et <button>.
$(':[text|password|radio|checkbox|submit|image|reset|button|file|hidden]') // Les <input /> du type choisi.
$(':[enabled|disabled|checked|selected]') // Les <input /> possédant l'attibut indiqué.

Recoder le tp n°4 de Webdynamique en utilisant JQuery