jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<!-- du contenu ici -->
<script src="js/jquery-3.1.1.js"></script>
<script>
// On peut commencer à utiliser jQuery ici
</script>
</body>
</html>
Trois utilisations générales :
Permet de sélectionner l'ensemble des éléments correspondants au sélecteur CSS3
// Sélectionner tous les éléments descendants
// de #view et ayant la class .box
var boxes = $( '#view .box' );
// L'objet jQuery boxes encapsule tous les éléments
// DOM sélectionnés dans un tableau interne
// La méthode .text() agit sur tous ces éléments en
// changeant leurs contenus
boxes.text("Boom");
Le context permet de limiter la recherche dans une zone limitée.
// Sélectionner l'élément #menu
var menu = $( '#menu' );
// L'objet jQuery menu devrait contenir un seul
// élément dans son tableau interne.
// Les deux opérations suivantes seront ainsi optimisées
$('a:even', menu).css('backgroungColor','#F77');
$('a:odd', menu).css('backgroungColor','#7F7');
Accès aux éléments sélectionnés
// L'objet jQuery links contiendra dans son tableau interne
// tous les liens descendants de #menu.
var links = $( '#menu a' );
// la variable premier_lien contiendra le 1er lien DOM
// Elle est de type HTMLLinkElement !!
var premier_lien = links[0];
// Nombre de liens dans links
var nombre_liens = links.length;
Encapsuler un élément DOM dans un objet jQuery
var links = $( '#menu a' );
var premier_lien = links[0];
// Enrober premier_lien avec un objet jQuery
var link = $(premier_lien);
// On peut ainsi continuer à le torturer avec les méthodes jQuery
link.text('Aller doucement');
Agir individuellement sur chacun des éléments de la collection.
var links = $( '#menu a' );
// .each(callback) : callback est appelée pour chaque élément
// les paramètres seront l'indice et l'élément DOM courant.
links.each(function( i, e ){
$(e).text('lien numéro ' + i)
})
// Le text sera modifié différement pour chacun des liens.
Permet de créer un fragment DOM et l'associer à un document donné, par défaut au document courant.
// Création d'un bloc html en mémoire.
var bloc = $('<div class="top"><a href="#top"><img src="top.jpg"></a></div>');
// Ajout du bloc à la fin de toutes les sections du document.
$('section').append(bloc);
attributes est un objet litéral représentant les attributs et événements à associer à l'élément nouvellement créé.
// Création d'un élément.
var alert = $('<div>', {
'class': 'alert alert-danger',
'style': 'position: absolute; left: 20%; width: 60%',
'on': {
click : function(){
$(this).hide()
}
}
}).html('<p>Ceci est une alerte</p>');
$(document.body).append(alert);
Permet en général de réduire une sélection selon des critères.
// .last() et .first() réduisent aux dernier ou au premier élément.
var last = $('section p').last();
// .eq(index) retourne un objet jQuery contenant l'élément d'indice index.
var deuxieme = $('section p').eq(1);
var dernier = $('section p').eq(-1);
// .has(selector) réduit la sélection en fonction des déscendants
var sections_contenant_titre = $('section').has('h1');
// .not(selector) réduit la sélection en fonction des déscendants
var tous_sauf_premier = $('p').not(':first');
Permet en général de réduire une sélection selon des critères.
// <form id="form">
// <input name="a" value="aaa">
// <input name="b" value="bbb">
// </form>
// .map(callback) produit un nouveau objet en retournant pour chaque
// élément une version modifiée.
$('#form input').map(function(i, e) {
return e.name + '=' + e.value;
}).get().join('&');
// Cette expression retournera : a=aaa&b=bbb
Manipulation de l'arbre DOM en fonction des relations hierarchique.
// retourne objet contenant tous les parent des liens ayant classe .active
$('li.active>a').parent();
// retourne les liens ancetres des liens actifs
$('li.active>a').parents('li>a');
// retourne les enfants respectant le critère fourni par le sélecteur
$('article').childreen('p');
// retourne les descendants respectant le critère fourni par le sélecteur
$('article').find('p');
// retorune les frères de l'élément courant avec/sans critère de sélection
$('article:first').siblings();
// premiers éléments ou l'un de leurs ancètres selon critère de sélection.
$('p').closest('article');
Equivaut à addEventListener. jQuery utilise la méthode .on().
<script>
$(function(){
$( "#header a" ).on( 'click' , function(evt){
/* Cette fonction s'exécute à chaque fois qu'on
* clique sur l'un des liens de la sélection ***/
console.log(evt); // evt est de type Event
console.log(this); // this référencie l'objet courant.
});
});
</script>Encapsule des informations sur l'événement. Il permet aussi d'agir sur le déroulement des actions programmées pour celui-ci. Exemple :
<script>
$(function(){
$( "#header a" ).on( 'click' , function(evt){
// Tous les liens de #header ne vont pas suivre ... href
evt.preventDefault();
// Si un handler click est attaché à body, il ne s'exécutera pas.
evt.stopPropagation();
});
});
</script>Mdèle : .on('event') == .event()
Dans la (ou les) callback, on peut exploiter les informations fournies par l'objet jQuery.Event. Exemple :
<script>
$(function(){
$( "#header a" ).click( function(evt){
console.log(evt); // l'objet jQuery.Event
console.log(evt.pageY()); // Position % au document
console.log(evt.screenY()); // Position % l'ecran !
console.log(evt.clientY()); // Position % la fenetre
console.log(evt.offsetY()); // Position % l'élément
console.log(evt.which); // Quel bouton ?
});
});
</script> <script>
$(function(){
$( document ).keypress( function(evt){
console.log(evt); // l'objet jQuery.Event
console.log(evt.target); // Elément ayant provoqué l'evt.
console.log(evt.which); // Code du caractère
console.log(evt.ctrlKey); // Touche Control.(altKey et shiftKey)
});
});
</script>
$( "article > img" ).fadeOut(1e3, function(evt){
$(this).parent().css('border-color', 'red');
// Toutes les images filles des articles vont
// disparaitre progressivement.
// Les bordures des articles deviendront ensuite rouges.
});
Forme générale : .animate( properties [, duration ] [, easing ] [, complete ] )
$( "article > img" ).css('position', 'relative').animate({
'left' : "+=200", // Attributs CSS
'border-radius' : '100'
},
1e3, // Durée de l'animation en ms
function(evt){ // callback appellée à la fin de l'anim.
$(this).css({
'border-color' : 'red',
'box-shadow' : '2px 2px 8px gray'
});
});
$( "article > img" ).css('position', 'relative')
.animate({left : "+=100"}, 1e3)
.animate({top : "+=100"}, 1e3)
.animate({left : "-=100"}, 1e3)
.animate({top : "-=100"}, 1e3);
.delay( durée en ms)
$( "article > img" ).css('position', 'relative')
.animate({left : "+=100"}, 1e3)
.delay(1e3)
.animate({left : "-=100"}, 1e3);
$.ajax({
// l'url de la requete
url : "script.php",
// paramètres de la query string
data : { id : 123 },
// Méthode (GET, POST, ...)
type : "GET",
dataType : "json", // Type de données attendu
success : function( json ) { // Exécutée quand la réponse arrive
$("<div class=\"content\"/>").html( json.html ).appendTo("body");
},
error : function( xhr, status ) { // Exécutée si la requete échoue
alert("Il y a eu une erreur...");
},
complete : function( xhr, status ) { // exécutée dans tous les cas
alert("Fin de la requete");
}
});
// fonctions raccourcies de $.ajax()
// Méthode GET
$.get( url [, data ] [, success ] [, dataType ] );
// Méthode POST
$.post( url [, data ] [, success ] [, dataType ] );
// Récupéer du contenu html et l'ajouter au DOM
$('#container').load( url [, data ] [, complete ] );
// Charger un script javascript et exécuter son contenu.
$.getScript( url [, success ] );
// Récupérer un objet JSON
$.getJSON( url [, data ] [, success ] );
//Récupérer les données d'un formulaire sous forme d'une query string
// $('form').serialize(); Ci-dessous une utilisation possible
$('form').on('submit', function(evt){
evt.preventDefault(); // Ne pas appliquer le comportement normal
// On pourrait valider ici le formulaire
$.get( // Utilisation d'ajax pour la soumission
'go.php',
$(this).serialize(),
function(res){
console.log(res);
// faire qque chose avec la réponse res
});
});
Pour exporter cette présentation
en PDF
cliquez sur ce lien .
Ensuite tapez sur les touches Ctrl + P