jQuery est une librairie JS conçue par Jon Resig en 2006 dans le but de faciliter le développement javascript et plus particulierrement de faciliter la manipulation du DOM.
jQuery n'est pas nécessaire, mais très pratique.
On le retrouve sur la majorité des sites.
Alternatives :
Avant de choisir jQuery, il faut décider de la version à utiliser
Il existe deux façons d'ajouter jQuery à votre page
En local
Via CDN
Avantages et désavantages du CDN
console.log( $ );
var foo = $( '.container li.bar' );
Si aucun élément n'a été trouvé, on récupère bien un objet jQuery, mais ce sera un tableau vide
var foo = $( '.container li a' ); // Sélecteur ne correspondant à rien
console.log( foo.length ); // 0
Le processus de sélection prend du temps
Améliorer les performances de votre site en cachant les variables jQuery
// Bad
window.setInterval( function()
{
var foo = $( '.container li' );
console.log( foo );
}, 100 );
// Good
var foo = $( '.container li' );
window.setInterval(function()
{
console.log( foo );
}, 100 );
Vous pouvez facilement parcourir le DOM à partir d'un élément jQuery en récupérant ses enfants, ses voisins, ses parents, etc.
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul' ).children() );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul' ).children( '.foo' ) );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul li' ).first() );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul li' ).last() );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul li' ).eq( 1 ) );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul' ).find( 'span' ) );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul' ).parent() );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul' ).parent().parent() );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul' ).parents() );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul' ).parents( '.wrapper' ) );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul' ).closest( '.wrapper' ) );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul li' ).filter( '.foo' ) );
- foo
- bar
- toto
- tata
- tutu
console.log( $( 'ul li' ).not( '.foo' ) );
Vous pouvez facilement créer un élément
var new_element_1 = $( '<div></div>' );
var new_element_2 = $( '<div />' );
var new_element_3 = $( '<div>' );
Pour l'ajouter au DOM, nous avons le choix parmi plusieurs méthodes
container
var new_element = $( '<div>' );
$( '.container' ).append( new_element );
Vous pouvez supprimer des éléments avec
$( '.container' ).empty();
$( '.container' ).remove();
Vous pouvez modifier le style d'un élément, changer ses classes et changer son contenu directement
text et html permettent de récupérer et modifier l'intérieur de l'élément
var container = $( '.container' );
console.log( container.html() );
console.log( container.text() );
container.text( 'my little span' );
container.html( 'my little span' );
var container = $( '.container' );
container.addClass( 'toto' );
container.addClass( 'tata tutu' );
container.removeClass( 'container tata' );
container.toggleClass( 'container' );
console.log( container.hasClass( 'container' ) );
console.log( $( '.container' ).css( 'marginLeft' ) );
$('.container').css( {
backgroundColor : 'red',
marginLeft : 20,
transform : 'translateY(20px)'
} );
console.log( $( '.container' ).css( 'marginLeft' ) );
Dans la mesure du possible, il vaut mieux changer les classes d'un éléments plutôt que d'utiliser la méthode css()
var container = $( '.container' );
container.fadeIn(); // Default fade in
container.fadeOut( 2000 ); // Slow fade out
container.fadeTo( 400, 0.5 ); // Fade to 0.5
Le dernier argument des méthodes de fade correspond au callback
Il s'agit de la fonction à éxecuter une fois le fade terminé
var container = $( '.container' );
container.fadeOut( 1000, function()
{
container.fadeIn( 1000 );
} );
Une fois caché, l'élément est en display:none;
var container = $( '.container' );
container.slideToggle( 1000, function()
{
container.slideToggle( 1000 );
});
La méthode animate permet d'animer la majorité des propriétés de style quantifiables
Pour animer une couleur, il faut rajouter jQuery UI
var container = $( '.container' );
container.animate( {
width : 600
}, 2000 );
Toutes ces méthodes d'animation se basent sur une queue
Si vous en appelez plusieurs à la suite sans qu'elles aient eu le temps de se terminer, elles se joueront à la suite.
Il est possible de stopper une queue avec la méthode stop
var container = $( '.container' );
container.slideDown( 2000, function()
{
container.slideUp( 2000, function()
{
container.slideDown( 2000, function()
{
container.slideUp( 2000 );
} );
} );
} );
window.setTimeout( function()
{
container.stop();
}, 2800 );
Pour arrêter toute la queue, il faut rajouter true en paramètre du stop
var container = $( '.container' );
container.slideDown( 2000, function()
{
container.slideUp( 2000, function()
{
container.slideDown( 2000, function()
{
container.slideUp( 2000 );
} );
} );
} );
window.setTimeout( function()
{
container.stop( true );
}, 2800 );
Les objets jQuery déclenchent des événements qu'il est possible d'écouter
On va pouvoir savoir quand l'utilisateur click sur un élément, écrit dans un input ou redimensionne son viewport
$( '.container' ).on( 'click', function()
{
console.log( 'click' );
} );
La fonction autorise un argument. Celui-ci donne de nombreuses informations sur l'événement
$( '.container' ).on( 'click', function( e )
{
console.log( e );
} );
Il est possible d'écouter plusieurs événements pour un même callback
$( '.container' ).on( 'click mouseenter mouseleave', function( e )
{
console.log( e.type );
} );
Il est possible d'empêcher l'événement original de se produire (exemple : click sur un lien sensé emmener sur une autre page) avec return false ou e.preventDefault()
$( 'a' ).on( 'click', function( e )
{
e.preventDefault();
} );
$( 'a' ).on( 'click', function()
{
return false;
} );
Il est possible de récupérer l'élément qui a déclenché l'action avec this
Il s'agit d'un élément JS natif, on peut le retransformer en élément jQuery avec $( this )
$( 'a' ).on( 'click', function( e )
{
console.log( $( this ) );
} );
off permet d'arrêter d'écouter un ou plusieurs événements
var container = $( '.container' );
container.on( 'mouseenter mouseleave', function( e )
{
console.log( e.type );
} );
container.off( 'mouseenter' );
trigger permet de déclencher soi-même l'événement
var container = $( '.container' );
container.on( 'mouseenter mouseleave', function( e )
{
console.log( e.type );
} );
container.trigger( 'mouseenter' );
container.trigger( 'mouseenter' );
container.trigger( 'mouseenter' );
Événements généraux (liste non exhaustive)
Événements inputs
Événements window
$.ajax( {
url : 'http://monsite.com',
success : function( res )
{
console.log( res );
},
error : function()
{
}
} );
Quelques options
Une requête ajax peut-être annulée en l'ayant d'abord sauvegardée puis en lui appliquant la méthode abort()
var ajax = $.ajax( {
/* ... */
} );
ajax.abort();