2010-08-18 4 views
6

En jQuery, le sélecteur $ ('[id = foo]') est-il moins efficace que $ ('# foo')?

Répondre

16
  • courte et facile: OUI!

  • longue histoire (toujours pas fait)

    $('[id=foo]') 
    

    utilise Sizzle (css moteur de recherche) pour sélectionner l'élément alors que

    $('#foo') 
    

    appelle directement getElementById.

Pour avoir une histoire très longue, on y va: $('[id=foo]') est synonyme de $('*:[id=foo]') qui utilise le sélecteur universel. Cela signifie qu'il interroge TOUS les nœuds dans votre balisage, puis regarde lequel de ceux-ci a le id === foo (qui, espérons-le, ne correspondra qu'à un seul élément, IDs = unique). Cela, bien sûr, est coûteux, assez coûteux. Et c'est pourquoi vous ne devriez jamais écrire un tel sélecteur! Toujours pleinement qualifier ceci si possible, comme $('span:[id=foo]')

+0

Ahh Heres une sous-question pour vous, alors Jandy - est '$ ('span: [id = foo]') 'juste longhand pour' $ (span # foo) 'ou un autre sélecteur? – HurnsMobile

+0

@HurnsMobile: Pas du tout. '$ ('span: [id = foo]')'. Je recommanderais de jeter un coup d'oeil sur le code init de jQuery ici. jQuery analyse certaines expressions de sélecteur pour un appel direct de 'getElementById' ou' getElementsByTagName', je pense '$ (span # foo)' en fait partie. Donc c'est définitivement plus rapide que $ ('span: [id = foo]') '. Cette expression ira dans Sizzle et cela prend évidemment plus de temps que l'une des méthodes mentionnées ci-dessus. – jAndy

+0

Très instructif, merci beaucoup. La raison pour laquelle je pensais utiliser quelque chose en plus de $ ("# foo") pour cibler un identifiant est que l'identifiant que je ciblais avait un point, ce qui est évidemment problématique car jQuery l'interpréterait comme un identifiant et une classe. Donc, en utilisant $ ("[id = Address.State]"), par exemple, je pourrais contourner le problème. Une autre façon de contourner le problème est de doubler la période comme dans $ ("# Address \\. State"), mais je pensais que le double échappement pourrait être moins lisible. Cependant, compte tenu de la perte d'efficacité que vous avez signalée, je l'utiliserais probablement de toute façon. – jbyrd

1

ouais ,.

Le sélecteur le plus rapide jQuery est le sélecteur d'ID $ ('# foo') car elle correspond directement à une méthode JavaScript natif, getElementById()

Questions connexes