Magazine Internet

jQuery : les fonctions essentielles

Publié le 09 janvier 2009 par Avi Teboul

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 librairie

Each

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 ...

jQuery : les fonctions essentielles


Les dernieres videos de buzz

Voir les dernieres videos

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Avi Teboul 600 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte