Los selectores de jQuery se utilizan para seleccionar y manipular elementos HTML.
En jQuery, hay principalmente tres selectores.
- selector de identificación
- Selector de clase
- Selector de elementos
Antes de continuar, primero, veamos brevemente cómo se usan estos selectores.
Selector de elementos: el selector de elementos jQuery selecciona el elemento en función de su nombre.
Sintaxis:
$(''element")
Ejemplo:
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
p {
font-size: 25px;
}
</style>
</head>
<body>
<p>GeeksForGeeks</p>
<script>
// Element selector
$("p").css("color", "red");
</script>
</body>
</html>
Producción:
Selector de ID: el selector jQuery #id selecciona el elemento en función del atributo ID de la etiqueta HTML.
Este selector se usa básicamente cuando tenemos que trabajar en un solo elemento porque una ID debe ser única dentro de una página web.
Sintaxis:
$("#ID")
Ejemplo:
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
p {
font-size: 25px;
}
</style>
</head>
<body>
<p>GeeksForGeeks</p>
<p id="first">Hello Geeks</p>
<script>
// ID selector
$("#first").css("color", "red");
</script>
</body>
</html>
Producción:
selector de identificación
Selector de clase: el selector jQuery .class selecciona el elemento o el conjunto de elementos cuya clase coincide. Se permite el mismo nombre de clase para diferentes elementos HTML.
Sintaxis:
$(".class")
Ejemplo:
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script
src="https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p class="first">GeeksForGeeks</p>
<p class="first">Hello Geeks</p>
<script>
// Class selector
$(".first").css("color","blue")
</script>
</body>
</html>
Producción:
seleccionador de clase
Escribamos algo de código para ver qué tan rápidos son estos selectores.
Ejemplo: Escribiremos un programa que realizará la misma tarea usando diferentes selectores, veamos cuánto tiempo están tomando.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p id="test">Hello</p>
<p class="test">Hello</p>
<h3>Hello</h3>
<script>
// ID Selector
let id_time = Date.now();
let id_t = 0;
for (let i = 0; i < 100000; i++) {
if ($("#test").css('background-color') == 'yellow')
$("#test").css('background-color', 'red');
else
$("#test").css("background-color", "yellow");
}
id_t = Date.now() - id_time;
console.log(' ID Selector : ' + id_t + ' milliseconds');
/*-------------------------------------------------------*/
// Class Selector
let cl_time = Date.now();
let cl_t = 0;
for (i = 0; i < 100000; i++) {
if ($(".test").css('background-color') == 'yellow')
$(".test").css('background-color', 'red');
else
$(".test").css("background-color", "yellow");
}
cl_t = Date.now() - cl_time;
console.log(' Class Selector :' + cl_t + ' milliseconds');
/*----------------------------------------------------------*/
// Element Selector
let el_time = Date.now();
let el_t = 0;
for (i = 0; i < 100000; i++) {
if ($("h3").css('background-color') == 'yellow')
$("h3").css('background-color', 'red');
else
$("h3").css("background-color", "yellow");
}
el_t = Date.now() - el_time;
console.log('Element Selector : ' + el_t + ' milliseconds');
</script>
</body>
</html>
Producción:
ID Selector : 597 milliseconds Class Selector :751 milliseconds Element Selector : 741 milliseconds
Después de ver el resultado del código anterior, está muy claro que el selector de ID es el más rápido. El selector de clase y elemento está tomando casi el mismo tiempo.
¿Cuáles son los selectores más rápidos/lentos en jQuery?
Entre los tres selectores, el selector de ID es el selector más rápido porque una ID de cualquier elemento HTML será única dentro de la página web y cuando se cargue una página web, el navegador comenzará a buscar el elemento con una ID específica y una ID es única , por lo que en el momento en que el navegador encuentre el elemento con el ID especificado, dejará de buscar.
Pero en el caso de un selector de clase, varios elementos pueden tener el mismo nombre de clase y, debido a esto, el navegador tiene que atravesar todo el DOM para encontrar cada elemento que tenga un nombre de clase específico. Debido a esto, el selector de clase se considera el selector más lento.
Si tiene mucho que realizar en la página web y no es posible usar un selector de ID cada vez, entonces la mejor manera es el almacenamiento en caché. Obtenga los selectores una vez y guárdelos para usarlos más adelante.
Nota: si consideramos los navegadores modernos de hoy en día, estos selectores son igualmente rápidos porque en los navegadores modernos los nombres de las clases se codifican internamente y tenemos .getElementsByClassName() mientras que en los navegadores más antiguos no hay una función similar a .getElementsByClassName() y esa es la razón .class name se analiza internamente en jQuery y luego cada elemento de DOM se atraviesa y se verifica el nombre de la clase.