Selectores de jQuery: nos permiten seleccionar y manipular elementos HTML. Se utiliza para seleccionar elementos HTML como identificadores, clases, tipos, atributos, etc. mediante selectores de jQuery y luego agregar propiedades o eventos CSS a los elementos HTML seleccionados.
Sintaxis: para seleccionar una etiqueta de botón, la sintaxis sería
$("button")
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#heading").css("border", "2px solid red");
});
});
</script>
</head>
<body>
<h2 id="heading">Using jQuery Filter</h2>
<button>Click to change color of heading</button>
</body>
</html>
Salida: al hacer clic en el botón, veremos un borde rojo en el encabezado.
Al hacer clic en el botón se crea un borde a lo largo del encabezado
Filtro jQuery: este método se utiliza para especificar criterios para un elemento HTML. El método Filter() devuelve elementos que coinciden con ciertos criterios.
Sintaxis:
$(selector).filter(criteria, function(index))
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("p").filter(".active").css("background-color", "red");
});
</script>
</head>
<body>
<h1>Jquery Filter</h1>
<p>My name is Donald.</p>
<p class="active">Geeks</p>
<p class="dead">SkeeG</p>
<p class="active">For </p>
<p class="dead">roF</p>
<p class="active">Geeks</p>
</body>
</html>
Salida: el filtro busca las etiquetas de clase activas y las colorea.
Filtra la clase activa
Principales diferencias entre selector y filter() en jQuery:
| Selector en jQuery | filtro() en jQuery |
|---|---|
| El selector de jQuery selecciona todos los elementos en función del nombre de los elementos que haya proporcionado. | jQuery filter( ) agrega más detalles a los elementos seleccionados especificando los criterios de selección. |
| Funciona independientemente de filter(), lo que significa que no es necesario usarlo junto con el método filter(). | Funciona junto con el selector. Al combinar filtros con sus selectores, podemos trabajar con un alto grado de precisión. |
|
La sintaxis para usarlo es la siguiente: $(“botón”) selecciona todos los botones de la página HTML. |
Sintaxis para usarlo de la siguiente manera: $(botón).filtro(criterios, función(índice)) selecciona botones que tienen criterios y les aplica funciones. |