jquery

• jQuery est une bibliothèque JavaScript qui a pour

but de soulager le développeur des tâches
fastidieuses de gestion de compatibilité inter-
navigateurs, ainsi que de lui fournir des effets
classiques.
• une simple bibliothèque à importer
• Inclure dans un fichier HTML
• <script type="text/javascript"
src="jquery.js"></script>
•
• une simple bibliothèque à importer
• Inclure dans un fichier HTML
• <script type="text/javascript"
src="jquery.js"></script>
•
 Presentation
La fonction jQuery()
jQuery() ou $().
C’est une fonction JavaScript
Elle accepte des paramètres
Elle retourne un objet
$ : Syntaxe issue de «  Prototype »
• $ accepte des sélecteurs spécifiques :
$(':radio'), $(':header'), $(':first-child')
• des sélecteurs en forme de filtres :
$(':checked'), $(':odd'), $(':visible')
plus fort: $(':contains(du texte)')
• des attributs
$('a[href]'), $('a[href^=http://'), $('img[src$=.png]'
 plus

• $("p") = document.getElementByTagName("p"); $
("#info") =>document.getElementById("info");
• $("#info") > li") sélectionne toutes les balises
enfants <li> de la balise d’id "#info"
 Les fonctions

• $(selecteur).fonction(); exécute la fonction sur le

sélecteur $
(selecteur).fonction1().fonction2().fonction3();
exécute les fonctions dans l’ordre
 manipuler le contenu de des elements
1. Afficher ajouter modifier le contenu html d’un élément
$(‘div').html()
2. Afficher Afficher ajouter modifier le contenu texte d’un élément
$(‘div'). text()
Exemple
$(‘div').html('<strong>les eleves</strong>')
$(' div ').html( $(‘p') .text('<u>les villes</u>') .text() );
 remplacer un element et son contenu
replaceWith remplece $(‘x').replaceWith (‘y');
X sera remplacé par y
• $('a').replaceWith('<div>ville</div>');
• $('h1').replaceWith($('.nom')); $('#nom').replaceWith('<h1>'+$
('#titre').html()+'</h1>'); $('.uneclasse').replaceWith('<a
href="http://facebook.com">Google</a>');
 Les sélecteurs

• Ensemble d’expressions permettant de désigner

les éléments du document.

• Il existe plusieurs types : Basic, Hiérarchie,

Attribut, Filtres
• $(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="cadc"]') // Sélectionne les éléments <p> dont
l'attribut title est "cadc".
• $('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 > .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
• $('div .desc') // Sélectionne les éléments ayant la classe
"desc" descendants (au sens CSS) d'éléments <div>.
 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.
• $('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.
• $(':header') // Sélectionne les éléments <hn>.
• $(':animated') // Sélectionne les éléments actuellement
animés.
• $("div:contains('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é.
 Insérer et remplacer des éléments : fonctions
alternatives
• // Ajouter du contenu à la fin d'un élément #log $
(x).appendTo("#log");
• // Ajouter du contenu au début de chaque <h1> $
(x).prependTo("h1");
• // Remplacer <hr/> par <br/>
• $("<br/>").replaceAll("hr");
 Copier des éléments

• // Insérer un <div> avec un entête $

(document.body).append("<div id='listeLiens'> <h1>Liste de
liens</h1></div>");
• // Copier tous les liens du document // et les insérer à la fin du div
précédent $("a").clone().appendTo("#listeLiens")
 Les évènements

• un évènement fait le lien entre une action remplie, et une fonction

(du code) exécutée.

• Premier évènement
• l'évènement ready() action écoute le chargement du document
 clavier

• keydown(), touche du clavier est enfoncée ;

• keypress(), maintient une touche enfoncée ;
• keyup(), relâche une touche préalablement enfoncée.
• $(document).keyup(function(t){ //
• // on écoute l'évènement keyup()
• // le code de la touche
• alert(‘on appuie sur la touche
Entrée !'+t.keyCode);
• });
 CSS en jQuery
• la modification du style par jQuery se fait par La méthode
css() qui peut prendre plusieurs sortes d'arguments.

• $('p').css('color', ‘orange');
• $(‘div').css({ color : 'red',
• width : '300px',
• height : '200px‘
• });
 syntaxe

• $(‘h3').css({ borderColor : 'red',

• paddingRight : '30px',
• 'margin-left' : '10px' ,
• ‘float’:’left’
2eme mot commence par majuscule sans guillemets ou apostrophes
• });
guillemets ou apostrophes obligatoires
 ajax

• Application WEB traditionnelle :  Le client envoie une requete HTTP  Le

serveur renvoie une page
• Consommation inutile de la bande passante : Une grande partie du code
HTML est commun aux différentes pages de l'application.
•• Important
Le chargement d’une nouvelle page à chaque requête n’est pas
ergonomique
• Qu'est-ce qu'AJAX ? AsynchronousJavascript and XML
• Pourquoi AJAX: Javascript est très utilisé au niveau du client : validation de
formulaire, modifications de la page, … Tout ne peut pas être confié au
client :  Manque de sécurité/confiance  Limitations
• Principe de base : Le client et le serveur dialoguent.
• Autant faire en sorte que les messages soient le plus petits possibles.  Le
client n'a pas besoin de toute la base de données, juste de suffisamment de
données pour le client.  Le serveur et le client ont chacun un travail
L'application ne doit donc pas être prise en charge entièrement d'un coté ou
de l'autre.
• Ajax utilisé par
• Clients de messagerie : Gmail, Yahoo Mail, HotMail 
Google Maps FlickR, Picasa Deezer Youtube,
Dailymotion  Myspace, Facebook
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fction.js"></script>

<form method="post"> $(document).ready(function(){

<input type=« text » id =« nom » $(‘form').submit(function(){
name=« nom »/>
alert (‘mes amis de classe’);
<input type=« submit » id =«envoi »
name=« envoi »/> });
});

• </form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fction.js"></script>

<form method="post"> $(document).ready(function(){

<input type=« text » id =« nom » $(‘form').submit(function(){
name=« nom »/>
alert (‘mes amis de classe’);
<input type=« submit » id =«envoi »
name=« envoi »/> });
});

• </form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fction.js"></script>

$(document).ready(function(){
<form method="post">
$(‘form').submit(function(){
<input type=« text » id =« nom » var nom = $(‘#nom').val();
name=« nom »/>
$(‘#affichage').html(nom);
<input type=« submit » id =«envoi »
Return false;
name=« envoi »/>
• </form> });
• <div id=« affichage » ></div> });
Ajax php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fction.js"></script>

<form method="post"> $(document).ready(function(){

<input type=« text » id =« nom » $(‘form').submit(function(){
name=« nom »/> var nom = $(‘#nom').val();
<input type=« submit » id =«envoi » $.post('monphp.php',{nom:nom},function(data)
name=« envoi »/> {
• </form> $(‘#affichage').text(data);
• <div id=« affichage » ></div> });
Return false;

if (isset($_POST['nom'])) { });

Echo $nom = $_POST['nom']; } });

$(document).ready(function(){
$('#nom').change(function(){
var nom =$("#nom option:selected").text();
$.post('monphp.php',{nom:nom},function(data){
$('#affichage').html(data);
});
});
});