Un coup de pouce pour un service qui se veut Web, qui vous fournit les stats de votre site, classe les sites par fréquentation et tout ça sans avoir à remplir de longs formulaires ou valider des mails.

FE rank vous demande de poser un marqueur javascript sur votre site et le tour est joué. Il faudra quand même attendre un peu pour que les stats soient initialisées.

Je pense qu'avec un autre logo et une interface plus recherchée le service serait beaucoup mieux. Mais bon il parait que l'auteur vise à améliorer le service d'ici peu

Bon courage

Voilà quelques jours que je travaille là-dessus, une nouvelle documentation en français pour jQuery .

Je devais continuer les tutos concernant jQuery, mais j'ai préféré en faire un portail sur lequel vous trouverez la liste intégrale des fonctions jQuery mais pas seulement ...

J'ai l'intention d'apporter ma plus-value.

En effet, il existe déjà une doc FR de jQuery qui est d'ailleurs très bien réalisée et dont je me suis inspiré pour jQuery.jarodxxx.com, néanmoins comme toutes les docs il est très difficile d'apprendre rien qu'en lisant les retours de fonctions et les descriptions.

Ma plus-value sera donc des explications claires et simples pour chaque fonction ainsi que la possibilité d'en débattre afin que tout le monde puisse y accéder facilement. 

Et comme tout nouveau site, celui-ci va cruellement manquer de visibilité, alors si vous vous sentez l'âme généreuse, un billet sur votre blog pour relayer l'info sera la bienvenue :).

Voilà un nouveau chapitre sur jQuery : les attributs.

Cette fois on va voir comment travailler sur les attributs des balises et non sur leur contenu.

On va pouvoir ajouter, modifier ou supprimer la classe d'une DIV, cocher ou pas une checkbox ...

PS : Je tiens à rappeler que j'étudie jQuery au fur et à mesure des tutos, ce qui peut provoquer des délais plus ou moins importants entre chaque tuto. D'autre part étant moi-même en phase d'apprentissage, je vous demanderais d'être indulgent sur mes éventuelles fautes : un commentaire formulé peut être accepté comme une critique constructive alors qu'un : "pff, tu connais rien, arrête de rédiger des conneries...", passera en indésirable .

addClass

Ajoute une classe pour chaque élément sélectionné.

Exemple :
Le code suivant : 
$("a").addClass("test");
Va transformer :
<a href="http://www.jarodxxx.com/index.php?post/2009/01/13/jquery-%3A-Les-attributs#">ikule</>
en
<a href="http://www.jarodxxx.com/index.php?post/2009/01/13/jquery-%3A-Les-attributs#" class="test">ikule</a>

attr()

Cette méthode permet facilement de retrouver la valeur d'une propriété du premier élément trouvé. Si l'élément ne dispose pas de l'attribut recherché, "undefined" est renvoyé.
 Concernant l'accès aux propriétés de formulaire "checked","disabled" et "readonly", la méthode retourne "true" s'ils sont présents.

Exemple :
$("img").attr("src");
Cette fonction va transformer :
<img src="http://www.jarodxxx.com/index.php?post/2009/01/13/test.jpg"/>
en
test.jpg

html

Récupère le contenu du premier élément trouvé. Ne fonctionne pas sur les documents XML (à l'exception des documents XHTML).

Exemple :
$("div").html();
Cette fonction va transformer :
<div><input/></div>
en
<input/>

removeAttr

Supprime un attribut des éléments concernés.

Exemple :
$("input").removeAttr("disabled")
Cette fonction va transformer :
<input disabled="disabled"/>
En:
<input/>

removeClass

Permet de supprimer la ou les classes spécifiées des éléments concernés.

Exemple
$("p").removeClass("selected highlight")
Cette fonction va transformer:
<p class="highlight selected first">Hello</p>
En:
<p class="first">Hello</p>

text

Retourne le contenu texte de tous les éléments concernés par la recherche. Le résultat est une chaine de caractères contenant la concaténation de tous les contenus texte des éléments. Cette méthode marche avec les documents HTML et XML.

Exemple :
$("p").text();
Cette fonction va transformer :
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
En:
TestParagraph.Paraparagraph

toggleClass

Ajoute une classe aux éléments spécifiés, la supprime si elle est déjà présente.

Exemple :
$("p").toggleClass("selected")
Cette fonction va transformer :
<p>Hello</p><p class="selected">Hello Again</p>
En:<p class="selected">Hello</p><p>Hello Again</p>

val

Récupère le contenu de l'attribut "value" du premier élément de la sélection.
Faites attention quand vous utilisez cette fonction pour récupérer la valeur d'éléments de formulaire de type select multiple parce qu'ils peuvent recevoir un tableau de valeurs.

Exemple :
$("input").val();
Cette fonction va transformer :
<input type="text" value="some text"/>
En:
"some text"

hasClass

Retourne "vrai" si la classe spécifiée est présente pour au moins un des éléments ciblés.

Exemple :
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());

Cette fonction va transformer :

<p>Hello</p>
<p class="selected">Goodbye</p>

<div id="result1">First paragraph has selected class: false</div>
<div id="result2">Last paragraph has selected class: true</div>
<div id="result3">Some paragraph has selected class: true</div>
En :
First paragraph has selected class: false
Last paragraph has selected class: true
Some paragraph has selected class: tr>ue

C'est pour moi une des fonctionnalités les plus puissantes de jQuery : les sélecteurs.

Un sélecteur permet de pointer et d'interagir avec n'importe quel élément de votre code source pour peu qu'il soit existant...

On va pouvoir ainsi modifier autant le contenu d'un <div>, que sa propriété CSS ou encore le masquer ou l'afficher en le combinant avec d'autres fonctions...

Les sélecteurs

Il nous suffit donc de citer un élément en paramètre de jQuery. Je rappelle que la fonction jQuery se note tout simplement "$", et que les paramètres se passent entre parenthèses.

Exemple :

$("body")

va sélectionner la balise <body> de votre page, mais il ne se passera rien puisqu'on ne lui associe aucune fonction !

En revanche avec :

$("body").hide();

On va pouvoir tout simplement masquer toute la page (inutile donc mais c'est un exemple

La force des sélecteurs, c'est sans aucun doute la possibilité de spécifier en paramètres le chemin vers l'élément.

En effet s'il n'y a qu'un seul élément <body> sur votre page, en revanche il peut y avoir plusieurs balises <a href...>

Imaginons l'exemple suivant :

...

<body>
   <div id="global">
   <a href="http://www.jarodxxx.com/index.php?post/2009/01/10/jQuery-%3A-Les-selecteurs#">clic</a>
      <p class="test">
         <a href="http://www.jarodxxx.com/index.php?post/2009/01/10/jQuery-%3A-Les-selecteurs#">clic</a>
         <a href="http://www.jarodxxx.com/index.php?post/2009/01/10/jQuery-%3A-Les-selecteurs#" class="ikule">clic</a>
      </p>
   </div>
</body>
...

On a donc 2 liens <a href...>. L'un peut être identifié par sa classe, l'autre par son absence de classe, mais les deux liens peuvent être identifiés par leurs positions dans la balise <p> !

Exemple de sélection par chemin :

$("body #global .test a.ikule").click();

va déclencher le clic automatique sur le lien (c'est mal, ne le faites pas ).

Pour ce même lien on peut aussi utiliser tout simplement

$(".ikule").click();

Puisque c'est le seul lien qui porte cette classe.

si on fait :

$("a").hide();

On va donc cacher TOUS les liens de la page... pas cool !

Comment faire, donc, pour ne cacher QUE le PREMIER lien qui se trouve dans la balise <p> mais pas au-dessus ?

Rappelez-vous du tuto sur les fonctions essentielles de jQuery. On va donc utiliser la fonction Eq pour pointer sur ce lien.

Deux possibilités :

$("a").eq(1);
// la fonction eq commence à compter les éléments à partir de 0. Comme nous voulons la 2e position, on utilise le eq(1); 

On peut faire aussi :
$("p a").eq(0);
Ici on va sélectionner le 1e élément <a> se trouvant à l'intérieur de <p>.

Voilà, normalement si vous avez compris tout ça, vous devez pouvoir interagir sur tous les éléments de votre page. Cependant il faut connaitre les possibilités offertes par jQuery...
 

Documentations des sélecteurs jQuery

Considérons que notre élément s'appelle "E" (ce qui n'existe pas !) : E sera donc remplacé par <a> ==> donc $("a");

 *: n'importe quel élément
E: élément de type E
E:nth-child(n): élément E, le n-ième fils de son père
E:first-child: élément E, le premier fils de son père
E:last-child: élément E, le dernier fils de son père
E:only-child: élément E, seul fils de son père
E:empty: élément E qui n'a pas de fils (en incluant les nœuds textes)
E:enabled: élément de type interface (élément de formulaire) E qui n'est pas désactivé
E:disabled: élément de type interface E qui est désactivé
E:checked: élément de type interface E qui est coché (case à cocher, bouton radio...)
E:selected: élément de type interface E qui est sélectionné (options d'un select). Ce sélecteur n'est pas dans la spécification CSS, mais est supporté par jQuery.
E.warning: élément E dont la classe est "warning"
E#myID: élément E dont l'id est "myID". Ne retourne qu'un élément maximum.
E:not(s): élément E qui ne répond pas à la condition du sélecteur. Exemple : E:not(enabled) = E:disabled
E F: élément F descendant d'un élément E.
E > F: élément F fils d'un élément E.
E + F: élément F immédiatement précédé d'un élément E.
E ~ F: élément F précédé d'un élément E.
E,F,G: sélectionne tous les éléments E, F et G.

Les possibilités des sélecteurs

jQuery ne supporte que les sélecteurs qui sélectionnent des éléments DOM, les autres sont ignorés :

E:link
E:visited
E:active
E:hover
E:focus
E:target
E::first-line
E::first-letter
E::selection
E::before
E::after

jQuery ne supporte pas non plus les sélecteurs suivants en raison de leur utilité très limitée :

E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:lang(fr)
E[foo~="test"]
E[hreflang|="en"]

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