La base de jQuery est composée de 11 fonctions.
Nous allons voir comment utiliser et comprendre ces fonctions. Elles constituent la base donc sont quasiment indispensables à la suite.
Suivez bien, parce que moi-même je bafouille encore un peu.
jQuery
La fonction jQuery créé l'arbre DOM de la chaine de caractères html passée en paramètre à la volée. Elle est symbolisée par le sigle : "$"
Exemple:
$("<div>Salut</div>").appendTo("body");
Cet exemple va ajouter un DIV à l'intérieur de la balise <body>.
On peut aussi par exemple jouer avec les CSS grâce à cette fonction.
Exemple :
$(document.body).css("background-color:black");
Cela aura pour effet de rendre le fond de la page en noir.
jQuery.fn.extend
Permet d'étendre l'objet jQuery lui-même. Cette méthode est utile pour la création de plugins.Exemple :
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});Cet exemple créé la fonction check/uncheck qui pourra être appelée comme ceci :
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();jQuery.noConflict
Permet d'éviter les conflits à propos de l'appel de l'alias "$" avec une autre librairie qui utiliserait également ce nom pour une de ses fonctions. À l'appel de cette fonction, "$" ne sera plus considérée comme l'alias de jQuery, il faudra utiliser le nommage jQuery.
Exemple:
jQuery.noConflict();
(function($) {
$(function() {
// code utilisant $ comme l'alias de jQuery
});
})(jQuery);
// code utilisant $ comme l'alias d'une autre librairieEach
Fonction qui boucle sur chaque élément trouvé et exécute à chaque passage une fonction définie.La fonction exécutée dispose d'un argument qui est un entier représentant la position de l'élément en cours de traitement.
Un "return false" à l'intérieur de la fonction définie stoppera l'exécution de la boucle. En revanche "return true" forcera le passage à l'itération suivante, de la même manière que l'instruction "continue" dans une boucle normale.
Exemple :
$("img").each(function(i){
this.src = "test" i ".jpg";
});
Cet exemple aura pour effet de transformer :
<img /><img />en
<img src="http://www.jarodxxx.com/index.php?post/2009/01/08/test0.jpg"/><img src="http://www.jarodxxx.com/index.php?post/2009/01/08/test1.jpg"/>Eq
Réduit le résultat de la recherche à un élément, correspondant à une position donnée.L'intervalle des positions commence à 0 et se termine à taille de l'index-1.
Exemple :
$("p").eq(1)
Cet exemple aura pour effet de transformer :
<p>Ceci est un test.</p><p>et un autre</p>en
[ <p>et un autre</p> ]
Get
Permet d'accéder à tous les éléments recherchés.Exemple :
$("img").get();
Cet exemple aura pour effet de transformer :
<img src="http://www.jarodxxx.com/index.php?post/2009/01/08/test1.jpg"/> <img src="http://www.jarodxxx.com/index.php?post/2009/01/08/test2.jpg"/>en
[ <img src="http://www.jarodxxx.com/index.php?post/2009/01/08/test1.jpg"/> <img src="http://www.jarodxxx.com/index.php?post/2009/01/08/test2.jpg"/> ]
Gt
De même que la fonction "get", hormis le retour qui n'est plus l'élément lui-même mais l'objet jQuery associé.
Exemple:
$("p").gt(0)
Cet exemple aura pour effet de transformer :
<p>Ceci est un test.</p><p>et un autre.</p>
en[ <p>Ceci est un test.</p> ]
Index
Recherche chaque élément correspondant à l'objet passé en paramètre, et dans le cas où il trouve, retourne sa position. Sinon il retourne -1.Exemple :
$("*").index( $('#foo')[0] )
Cette exemple renverra "2" pour :
<div id="foobar"><b></b><span id="foo"></span></div>
Lenght
Retourne le nombre d'éléments trouvés.Exemple:
$("div").length;
Cette exemple renverra "2" pour :<img src="http://www.jarodxxx.com/index.php?post/2009/01/08/test1.jpg"/> <img src="http://www.jarodxxx.com/index.php?post/2009/01/08/test2.jpg"/>
Lt
Réduit les résultat à la liste des éléments situés au-dessus de la position indiquée.Exemple :
$("p").lt(2)
Cet exemple aura pour effet de transformer :
<p>Ceci est un test</p><p>Un autre</p><p>Et encore un</p>
en[ <p>Ceci est un test</p><p>Un autre</p> ]Size
De même que la fonction length(). On appelle ça un alias de fonction.Et voilà : on a fait le tour des fonctions essentielles. Il va falloir bien les réviser parce qu'on va s'en servir beaucoup par la suite ...
Jeu de briques
Snake
Pacman
Bubble