Par Christophe Laffont / @touffies
jQuery est une librairie JavaScript qui permet de manipuler le DOM, d'utiliser AJAX, de créer des animations...
Utilisation d'un CDN avec fallback
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
Télécharger : http://jquery.com/download/
jQuery repose sur une seule fonction : jQuery() ou $(). Comme toutes les fonctions JavaScript elle accepte des paramètres, et retourne un objet, que nous appellons "objet jQuery".
Pour s'assurer que la fonction jQuery s'exécute une fois la page chargée et pouvoir manipuler le DOM sans erreur, on en-capsule l’ensemble du code jQuery dans le code ci-dessous. (Contrairement à l’évènement window.onload, le chargement complet des images de la page n’est pas nécessaire.)
$(function(){
// Traitement à effectuer lorsque le DOM est prêt
});
var objs = document.getElementByTagName("div");
for ( i = 0; i < objs.length; i++ ){
obj[i].style.display = 'none';
}
jQuery
$("div").hide();
jQuery propose deux approches pour sélectionner des éléments. La première utilise une combinaison de sélecteurs CSS et XPath passés comme chaîne de caractères au constructeur jQuery (comme par exemple $("div > ul a")). La seconde se sert de différentes méthodes de l’objet jQuery. Les deux approches peuvent être combinées.
Les sélecteurs de base correspondent aux fonctions getElementById et getElementsByTagName.
$(document) // Extension de l'objet document à la classe jQuery.
$('*') // Sélectionne tous les éléments.
$(this) // Sélectionne l'élement en cours.
$('#box') // Sélectionne l'élément ayant l'ID "box".
$('div') // Sélectionne tous les éléments de type <div>.
$('p.first') // Sélectionne les éléments <p> ayant la classe "first".
Les sélections peuvent être cumulées $('#box, div, p.first').
Séléction hiérarchiques
$('#box p') // Sélectionne tous les descendants <p> de l'élément identifié par box
$('#box > p') // Sélectionne tous les <p> immédiats contenus dans l'élément identifié par box
$('#box ~ p') // Sélectionne tous les <p> frères de l'élément identifié par box
$('#box + p') // Sélectionne tous les <p> dont l'élément précédent (dans le DOM) est l'élément identifié par box
$('li:first') // Sélectionne le premier élément de la liste <li>.
$('li:last') // Sélectionne le dernier élément de la liste <li>.
$('li:[even|odd]') // Sélectionne les éléments <li> de rang [pair|impair] (le premier rang est 0).
$('li:[eq|lt|gt](n)')// Sélectionne le ou les éléments <li> de rang [égal|inférieur|supérieur] à n.
$(':header') // Sélectionne toutes les balises <h>.
$(':animated') // Sélectionne les éléments actuellement animés.
$('div:not(.ok)') // Sélectionne les <div> n'ayant pas la classe "ok".
* La notation [a|b] signifie que l'on applique le filtre a ou le filtre b.
$('ul:[first-child|last-child]') // Sélectionne les [premiers|derniers] éléments fils <li>de tout les <ul>.
$('ul:nth-child([n|even|odd|equation])') // Séléctionne les enfants de <ul> [de rang n|pairs|impairs|résultat de].
$('div:only-child') // Sélectionne les éléments qui sont les seuls enfants d'un élément <div>.
$("div:contains('toto')") // Sélectionne les éléments <div> contenant le texte "toto" (sensible à la casse !)
$('div:empty') // Sélectionne les éléments <div> vides.
$('div:parent') // Sélectionne les éléments <div> ayant des enfants (y compris les noeuds texte).
$('div:has(p)') // Sélectionne les éléments <div> ayant un descendant <p>.
$("div:[visible|hidden]") // Sélectionne les <div> qui sont [visibles|cachés].
$('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".
$(':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é.
attr() possède plusieurs signature permettant :
$(this).attr('name'); // Connaître la valeur d'un attibut
$(this).attr('name', 'toto'); // Changer la valeur d'un attribut
$(this).attr({name: 'toto', value: 'tutu'); // Changer la valeur de plusieurs attributs (Format JSON)
$(this).attr('value', function(index,value){ // Changer l'attribut à l'aide de fonction
if(index > 1)
return "item" + index;
});
Il existe également removeAttr() pour supprimer et val() qui retourne la valeur de l'attribut "value".
La méthode text() permet de lire et modifier le contenu d'un élément sous forme textuelle.
Les balises seront transformés en entité & lt; et & gt;La méthode html() permet de lire et modifier le contenu HTML d'un élément. (Cette méthode utilise innerHTML)
bind() permet de lier un (ou plusieurs) événement, des données et un gestionnaire d'événement à une sélection d'élément
L'utilisation de .on() est recommendé.La plupart des fonctions sur les effets utilise des parmètres optionnels :
animate() permet de créer une animation.
$(this).animate(
{ left:300, width:"200px", opacity:0.5 },
1000,
function(){ alert("Animation terminée !"); }
);
L'ensemble des méthodes jQuery de parcours du DOM renvoie un objet jQuery, ce qui permet de chaîner les appels
children() // renvoie les enfants immédiats de chaque élément sélectionné
parent() // renvoie le parent immédiat de chaque élément sélectionné
parents() // renvoie une collection d'éléments ancêtres de chaque élément sélectionné
parentUntil() // renvoie une collection d'éléments ancêtres de chaque élément sélectionné, jusqu'à un élément ou sélecteur
siblings() // renvoie les frères de chaque élément de la sélection
prev(), prevAll() // renvoie le frère immédiatement précédent / les frères précédents de chaque élément de la sélection
next(), nextAll() // renvoie le frère immédiatement suivrant / les frères suivants de chaque élément de la sélection
content() // renvoie tous les noeuds enfants de chaque élément de la sélection
closest() // renvoie le parent le plus proche de chaque élément sélectionné
find() // renvoie les descendants de chaque élément sélectionné
text() et html() // modification du contenu
append() // ajout à l'intérieur de l'élément sélectionné
after() // ajout après l'élément sélectionné
before() // ajout avant l'élément sélectionné
wrap() // ajout autour de l'élément sélectionné
wrapAll() // ajout autour de tous les éléments de la sélection
wrapInner() // ajout autour des enfants de l'élément sélectionné
unwrap() // annule l'action de wrap()
replaceWith() // remplace l'élément sélectionné par le contenu spécifié
remove() // supprime du DOM tous les éléments répondant aux critères de sélection
detach() // comme remove(), mais en conservant les données associées
clone() // copie les éléments
filter(expression) // réduit l'ensemble des éléments sélectionnés à ceux qui passe le filtre
eq(index) // reduit l'ensemble des éléments sélectionnés à celui correspondant à la position
is(expression) // indique si la sélection répond à un critère (retourne true ou false)
first() et last() // reduit l'ensemble des éléments sélectionnés au premier ou dernier item
has(selecteur) // reduit l'ensemble des éléments sélectionnés à ceux qui ont un descendant correspondant au sélecteur
jQuery facilite l'écriture du code AJAX et il est possible de définir un certain nombre de paramèters (Voir la méthode $.ajax).
load(url [, datas] [,function]) // retourne un objet jQuery
$.get(url [, datas] [,function] [,type]) // Requète HTTP de type GET et renvoie un objet XMLHttpRequest
$.post(url [, datas] [,function] [,type]) // Requète HTTP de type POST et renvoie un objet XMLHttpRequest
$.getScript(url [,function]) // Charge un script via la méthode HTTP GET et l'exécute
$('div').hide();
$('div').addClass('newclass');
$('div').html();
// Méthode de chainage
$('div').hide().addClass('newclass').html();
jQuery : http://jquery.com/ jQuery UI : http://jqueryui.com/ jQuery Mobile : http://jquerymobile.com/ jQUery Form validation : http://jqueryvalidation.org/