Selector de consultas jQuery
En jQuery no seleccionamos un selector mediante el método querySelector() o querySelectorAll(). Estas formas se definen en JavaScript, y jQuery todavía se encuentra en el camino primitivo de los selectores de denotación individual basados en el atributo HTML id y clase.
Aquí, en el siguiente contenido, examinaremos cómo funciona el método querySelector() en el caso de jQuery. jQuery no responderá a este método, pero veremos el proceso de forma jQuery.
Utilice el selector id y clase
Cuando consideramos id como selector, se requiere poner el signo # antes de mencionar el nombre id como selector. Este es el portador de la identificación para decir que es un id.
Además, en el caso de clase, necesitamos usar . antes de agregar el nombre de la clase como selector. También puede utilizar otros ids, clases o elementos para definir funciones explícitamente a cargo de otros selectores.
Veamos una demostración.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<div id="pink" style="height: 100px; width: 100px">
<div class="purple" style="height: 50px; width: 50px"></div>
<div id="buff" style="height:60px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("#pink").css("background-color", "pink");
$(".purple").css("background-color", "purple");
}
</script>
</div>
</body>
</html>
Producción:
En este sentido, hemos seleccionado dos elementos div, y ambos tienen su trazador de identidad. El div principal tiene un id asociado, mientras que una clase define explícitamente el segundo div.
Podríamos haber mencionado la clase y el id juntos. Veamos cómo se puede hacer.
Fragmento de código 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<div id="pink" style="height: 100px; width: 100px">
<div class="blue" style="height: 50px; width: 50px"></div>
<div class="purple" style="height: 50px; width: 50px"></div>
</div>
<div id="buff" style="height:40px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("#pink").css("background-color", "pink");
$("#pink .purple").css("background-color", "purple");
$('#pink .blue').css("background-color", "powderblue");
}
</script>
</div>
</body>
</html>
Salida 2:
Uso de :eq() y otros selectores basados en filtros
Aunque en jQuery no tenemos el método querySelectorAll(), podemos definir explícitamente nuestras selecciones específicas. Los elementos, clase e id se indexan cuando hay más de una entrada.
Solo una entrada se contaría como el elemento indexado [0]th.
Entonces, aquí demostraremos el caso de uso de la extensión :eq() de jQuery y el filtro :odd() para generar el cambio exacto que deseamos hacer en nuestro flujo de página.
Hay muchas otras convenciones disponibles para seleccionar los selectores, y es posible que visite el artículo de forma casi similar al concepto de este artículo.
Sumerjámonos en la cerca del código.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<table border=2>
<tr><td>D0</td><td>D1</td></tr>
<tr><td>D2</td><td>D3</td></tr>
</table>
<div id="buff" style="height:10px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("td:eq(2)").css("background-color", "powderblue");
$("td:odd").css("background-color", 'violet');
}
</script>
</div>
</body>
</html>
Producción:
El elemento 2nd de los datos de la tabla se configura de manera diferente. Y en este caso, usamos :eq() para tener la posición de índice.
Además, cabe señalar que la indexación comienza desde 0. En los índices odd() de los datos de la tabla, coloreamos un tono diferente para entender la diferencia entre los métodos e índices selector.
