Discussion :

[Invité]

Bonjour,

Une table des équivalences pour JQUERY est-elle disponible ?
Il existe une page qui recense Some jQuery Functions And Their JavaScript Equivalents , mais pas tous.
Par exemple, il serait utile de pouvoir trouver un équivalent à

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
var foo = document.getElementById('page').getElementsByTagName('article')[2];
foo.innerHTML='Bonjour';
// À noter qu'il est possible d'écrire :
var almostFoo = $("#page article");
//Mais dans cas, la syntaxe ci-dessous est incorrecte :
 almostFoo[2].innerHTML='Bonjour';

Merci

[danielhagnoul]

$( "#page" ).find( "article" ).eq( 2 ).html( "Bonjour" );.

Pour apprendre les bases du jQuery, il faut absolument lire la documentation et tester les exemples de l'API http://api.jquery.com/

Ensuite, voir le lien vers la FAQ dans ma signature.

[Watilin]

Bonsoir,

je ne sais pas si j'ai compris exactement ta question. Pour moi il n'y a pas de problème avec cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

almostFoo[2].innerHTML='Bonjour';

En choisissant « à la main » le troisième élément encapsulé dans le set, tu le « décapsules » et tu obtiens l'objet DOM qui était caché dedans, donc tu as accès à sa propriété innerHTML. Pour information, l'équivalent jQuery est la méthode .html.

Quoiqu'il en soit, $("x y") est à peu près équivalent à document.querySelectorAll("x y"). Par « à peu près » je veux dire plusieurs choses.
Premièrement : jQuery renvoie des « sets » alors que les méthodes du DOM querySelector[All] renvoie des nœuds Node ou des collections NodeList.
Deuxièmement – c'est indiqué dans la page que tu as donnée – jQuery renvoie des collections « vivantes » (qui se mettent à jour quand le DOM change) alors que querySelectorAll renvoie des collections gelées. Mais c'est quelque chose qu'on peut ignorer la plupart du temps.
Troisièmement, jQuery assure la compatibilité du sélecteur quel que soit le navigateur.
Enfin, jQuery est parfois capable de faire quelques petites optimisations de performance que je vais expliquer plus en détails, alors que les méthodes DOM font le minimum syndical.

Pour la petite histoire, le moteur de sélection de jQuery est bâti autour de Sizzle. Il reprend la syntaxe des sélecteurs CSS mais ajoute quelques petites améliorations (notamment au niveau des contrôles de formulaire). Les méthodes DOM, elles, utilisent le moteur de sélection CSS du navigateur, donc ce que ces méthodes sont capables de faire dépend du navigateur.

Du fait que querySelector[All] utilise le moteur CSS du navigateur, il hérite des mêmes avantages et inconvénients en matière de performance. Je t'invite à lire cet article à propos de la performance des sélecteurs CSS.
Un point particulier à retenir de cet article est que la partie la plus importante d'un sélecteur est celle qui se trouve le plus à droite, par exemple le article dans #page article. Avec ce sélecteur, le moteur commence par cherche tous les éléments article dans la page avant de vérifier lesquels sont descendants de #page. C'est potentiellement moins performant que de commencer par sélectionner #page (la sélection par id est de loin la plus rapide) puis de chercher les article parmi ses descendants.

jQuery détecte ce genre de situations et fait l'optimisation. Il va donc remplacer $("#page article") par $("#page").find("article"). Jette un œil à la signature jQuery( selector [, context ] ) de la fonction jQuery.

Pour conclure, je ne connais pas de table d'équivalence des fonctions jQuery, mais peut-être que quelqu'un qui passe par là aura une bonne référence. En attendant tu peux essayer de regarder le code source, il est distribué en version non minifiée pour cette raison.

[Invité]

@danielhagnoul
Merci pour cette information. Pour apprendre, je pensais justement fonctionner par analogie. Concernant la FAQ, j'ai notamment consulté la partie concernant la différence entre $(..) et$(…)/eq(0). Avec vos réponses, je la comprends bien mieux.

@Watilin
Merci pour ces précisions et tous ces liens, je vais y jeter un œil, ainsi que sur le code source non minifié. Je vais commencer à la rédiger comme mémo, je procéderai en ajoutant les différents paramètres à prendre en compte, comme tu l'as fait avec par exemple l'origine et l'impact sur les performances.

Merci à vous