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="[Link]"></script>
•
• une simple bibliothèque à importer
• Inclure dans un fichier HTML
• <script type="text/javascript"
src="[Link]"></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^=[Link] $('img[src$=.png]'
plus
• $("p") = [Link]("p"); $
("#info") =>[Link]("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="[Link]
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".
• $('[Link]') // 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 $
([Link]).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 !'+[Link]);
• });
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="[Link]"></script>
<script type="text/javascript" src="[Link]"></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="[Link]"></script>
<script type="text/javascript" src="[Link]"></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="[Link]"></script>
<script type="text/javascript" src="[Link]"></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="[Link]"></script>
<script type="text/javascript" src="[Link]"></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('[Link]',{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('[Link]',{nom:nom},function(data){
$('#affichage').html(data);
});
});
});