5 conseils pour les sélecteurs JQuery plus efficaces

Le noyau de jQuery réside dans la requête. Il utilise la syntaxe du sélecteur CSS pour trouver des éléments DOM et exécuter des méthodes sur ces collections d'éléments. JQuery utilise des méthodes d'API du navigateur natif pour récupérer les collections DOM. Les nouveaux navigateurs prennent en charge getElementsByClassName, querySelector et querySelectorAll, ce qui peut analyser la syntaxe CSS. Cependant, les navigateurs plus anciens n'offrent que getElementById et getElementByTagName. Dans le pire des cas, le moteur grésilleur de JQuery doit analyser la chaîne de sélecteur et rechercher des éléments assortis. Voici cinq conseils pour vous aider à optimiser votre sélecteur jQuery:

1. préféré utiliser le sélecteur d'ID

Les attributs d'ID HTML sont uniques dans chaque page, et même les navigateurs plus anciens peuvent localiser les éléments individuels très rapidement:

$("#myelement");

2. Évitez d'utiliser uniquement les sélecteurs de classe

Les sélecteurs de classe suivants fonctionnent très rapidement dans les navigateurs modernes:

$(".myclass");

mais dans les navigateurs plus anciens comme IE6 / 7 et Firefox 2, jQuery doit vérifier chaque élément de la page pour déterminer si "MyClass" est appliqué. Si nous le qualifions avec un nom de balise, le sélecteur sera plus efficace, par exemple:

$("div.myclass");

jQuery peut désormais limiter les recherches aux éléments de div.

3. Gardez le sélecteur simple

Évitez les sélecteurs CSS trop complexes. À moins que votre document HTML ne soit extrêmement complexe, il est rare de nécessiter plus de deux ou trois qualifications. Considérez les sélecteurs complexes suivants:

$("body #page:first-child article.main p#intro em");

p#intro doit être unique, donc le sélecteur peut être simplifié à:

$("p#intro em");

4. Améliorer la spécificité du sélecteur de gauche à droite

Il est utile de comprendre comment fonctionne le moteur sélecteur de JQuery. Il fonctionne à partir du dernier sélecteur, donc dans les navigateurs plus âgés, une question comme celle-ci:

$("p#intro em");

Chargera tous les éléments em dans un tableau. Il itère ensuite vers le haut à travers le nœud parent de chaque nœud et rejette les nœuds qui ne peuvent pas être trouvés. S'il y a des centaines de balises p#intro sur la page, la requête sera particulièrement inefficace. Selon votre documentation, vous pouvez optimiser la requête en récupérant d'abord le sélecteur le plus qualifié. Il peut ensuite être utilisé comme point de départ pour le sous-sélection, par exemple: em

$("em", $("p#intro")); // 或
$("p#intro").find("em");

5. Évitez la duplication du sélecteur

Il est rare d'utiliser deux fois le même sélecteur. Le code suivant sélectionne chaque balise P trois fois:

$("p").css("color", "blue");
$("p").css("font-size", "1.2em");
$("p").text("Text changed!");

N'oubliez pas que JQuery prend en charge les opérations de la chaîne; Par conséquent, le même code peut être réécrit pour s'appliquer uniquement à un seul sélecteur:

$("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!");

Si vous avez besoin d'utiliser le même ensemble d'éléments plusieurs fois, vous devez mettre en cache l'objet jQuery dans une variable, par exemple:

$("#myelement");

Contrairement aux collections DOM standard, les collections jQuery ne sont pas dynamiques et les objets ne sont pas mis à jour lorsque des balises de paragraphe sont ajoutées ou supprimées du document. Vous pouvez résoudre cette limitation en créant une collection DOM et en la transmettant à la fonction jQuery en cas de besoin, par exemple:

$(".myclass");

Avez-vous d'autres conseils d'optimisation de sélecteur jQuery?

Des questions fréquemment posées sur les sélecteurs JQuery efficaces (FAQ)

(La partie FAQ est omise ici car elle est fortement dupliquée avec le contenu FAQ d'origine, la pseudo-originalité est difficile et trop longue. Certains problèmes de FAQ peuvent être éventuellement conservés ou réécrits au besoin.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!