Selettore classe JQuery vs selettore id

Question

Ho 7 pulsanti diversi che eseguono tutti la stessa funzione javascript al clic. dovrei usare il selettore di classe o il selettore di id.

$("input.printing").on("click", function(event) { 
    printPdf(event); 
}); 

o

$("#package1Pdf").click(function(event) { 
     printPdf(event); 
    }); 
$("#package2Pdf").click(function(event) { 
     printPdf(event); 
    }); 
$("#package3Pdf").click(function(event) { 
     printPdf(event); 
    }); 
$("#package4Pdf").click(function(event) { 
     printPdf(event); 
    }); 

Quali sono i vantaggi e svantaggi di ciascuno? Che è più preferito

Answer 1

È possibile utilizzare un filtro ID senza più selettori:

$('[id^="package"]').click(printPdf);

Quanto sopra selezionare tutti id che iniziano con "pacchetto". Ciò significa che la differenza è principalmente semantica. Dovresti scegliere ciò che è più significativo per la tua applicazione e il modo in cui è stato sviluppato.

Vedere jQuery attribute selectors page per informazioni sulla flessibilità della selezione di jQuery. Mantenere un segnalibro su questa pagina ti impedirà di dover scrivere nuovamente codice come il tuo secondo esempio.

Quale è meglio?

Se la struttura è stata impostata in modo da disporre di una classe che definisce logicamente e correttamente l'insieme appropriato di elementi, è quello che è necessario utilizzare per selezionare.

Allo stesso modo, se si sono invece forniti elementi con ID appositamente denominati e non è stato associato un nome di classe descrittivo che rappresenta ciò che si desidera selezionare, utilizzare la selezione dell'ID. La differenza di prestazioni non riguarderà praticamente nessuna applicazione, inclusa.

Answer 2

Ovviamente il tuo primo codice utilizzando la classe è molto più pulito, ordinato e migliore.

I selettori di ID sono i più veloci, il che è vero .. ma in questo momento ed età, non importa.

Quindi non preoccuparti troppo delle prestazioni (a meno che non sia un problema) e utilizzare solo quello che è pulito e manutenibile.

oh btw, non hai nemmeno bisogno di quella funzione anonima. Vedi sotto,

$("input.printing").on("click", printPdf); 

Answer 3

Come la maggior parte hanno dichiarato, il selettore si utilizza può avere un effetto sulle prestazioni, ma è spesso trascurabile, e più una questione di stile e leggibilità. In conclusione, jQuery creerà un gestore univoco per ogni elemento selezionato, individualmente per id o utilizzando un metodo di selezione multipla come un selettore di classe o attributo. Personalmente, mi piace il tuo primo esempio, poiché riguarderà le future aggiunte alla tua vista senza bisogno di ricordare di aggiungere un altro gestore.

Answer 4

Selezionare solo con Id è più veloce che selezionare per classe in generale poiché jQuery sotto la cappa utilizza getElementById che è più veloce nella maggior parte dei browser. Per ulteriori informazioni, consultare l'articolo this in quanto mostra molti altri modi per migliorare le prestazioni relative a Jquery. Tuttavia, ricorda che la performance del selettore non è l'unica cosa di cui devi preoccuparti. Il collegamento a molti eventi non necessari potrebbe anche creare problemi di prestazioni. Per ovviare a questo problema è possibile utilizzare delegato si prega di consultare questo jQuery documentation per ulteriori informazioni su delegato.

Answer 5

come tutti sappiamo selettore id è più veloce e migliore .. ma in voi caso .. dal momento che si sta selezionando ogni id 8 volte .. che confronta con la seletor classe è più lento come si può vedere here

classe selettore nel tuo caso è migliore, più veloce e più leggibile ...

nota: cosa succede se devi aggiungere altri 20 pulsanti nel prossimo futuro (100 sarebbe troppo) ..... e tu scegli di andare con il selettore di id ... phewwww !!! è come, 20 gestore di eventi in più ......;);)