El filtrado transversal en jQuery se usa para encontrar elementos HTML en función de su relación con los otros elementos. El filtrado es el proceso en jQuery que se utiliza para permitir encontrar un elemento en particular con alguna condición o sin condición. Hay cinco tipos básicos de métodos de filtrado que se pueden utilizar para seleccionar un elemento que se enumeran a continuación:
- Primero() método
- Método último()
- Método eq()
- método filter()
- Método no()
- Método first(): El método first() en jQuery se usa para seleccionar el primer elemento del grupo de elementos.
Sintaxis:
$(selector).first()
Parámetro: No acepta ningún parámetro.
Valor devuelto: Devuelve el primer elemento de los elementos seleccionados.
Ejemplo:
<!DOCTYPE html><html><head><title>jQuery first() method</title><scriptsrc=</script><!-- Script to use first() method --><script>$(document).ready(function() {$("div").first().css("background-color", "lightgreen");});</script></head><body><h1>Welcome to GeeksforGeeks !!!</h1><divstyle="border: 1px solid green;"><p>This is the first statement.</p></div><br><divstyle="border: 1px solid green;"><p>This is the second statement.</p></div><br><divstyle="border: 1px solid green;"><p>This is the third statement.</p></div><br></body></html>Producción:
- Método last(): El método last() en jQuery se usa para encontrar el último elemento en un grupo de elementos.
Sintaxis:
$(selector).last()
Parámetro: No acepta ningún parámetro.
Valor devuelto: Devuelve el último elemento fuera de los elementos seleccionados.
Ejemplo:
<!DOCTYPE html><html><head><scriptsrc=</script><!-- Script to use last() method --><script>$(document).ready(function() {$("div").last().css("background-color", "lightgreen");});</script></head><body><h1>Welcome to GeeksforGeeks !!!</h1><divstyle="border: 1px solid green;"><p>This is the first statement.</p></div><br><divstyle="border: 1px solid green;"><p>This is the second statement.</p></div><br><divstyle="border: 1px solid green;"><p>This is the third statement.</p></div><br></body></html>Producción:
- Método eq(): este método se utiliza para seleccionar elementos con el número de índice específico.
Sintaxis:$(selector).eq(index_number)
Parámetro: Toma un número de índice para el elemento especificado.
Valor de retorno: Devuelve el elemento con número de índice específico de los elementos seleccionados.
Ejemplo:
<!DOCTYPE html><html><head><scriptsrc=</script><!-- Script to use eq() method --><script>$(document).ready(function() {$("div").eq(1).css("background-color", "lightgreen");});</script></head><body><h1>Welcome to GeeksforGeeks !!!</h1><divstyle="border: 1px solid green;"><p>This is the first statement.</p></div><br><divstyle="border: 1px solid green;"><p>This is the second statement.</p></div><br><divstyle="border: 1px solid green;"><p>This is the third statement.</p></div><br></body></html>Producción:
- método filter(): Este método se utiliza para seleccionar elementos con algunos criterios específicos.
Sintaxis:$(selector).filter(parameter)
Parámetro: se necesita un nombre de clase o un nombre de identificación para filtrar un elemento específico del otro con el mismo nombre de elemento.
Valor devuelto: Devuelve todos los elementos con los criterios de cumplimiento.
Ejemplo:
<!DOCTYPE html><html><head><scriptsrc=</script><!-- Script to use filter() method --><script>$(document).ready(function() {$("div").filter(".demo").css("background-color", "lightgreen");});</script></head><body><h1>Welcome to GeeksforGeeks !!!</h1><divclass="demo"style="border: 1px solid green;"><p>This is the first statement.</p></div><br><divclass="demo"style="border: 1px solid green;"><p>This is the second statement.</p></div><br><divstyle="border: 1px solid green;"><p>This is the third statement.</p></div><br></body></html>Producción:
- Método not(): este método se utiliza para seleccionar todos los elementos que no cumplen con algunos criterios.
Sintaxis:$(selector).not(parameter)
Parámetro: se necesita un nombre de clase o un nombre de identificación para anular la selección de los elementos del otro con el mismo nombre de elemento.
Valor devuelto: Devuelve todos los elementos que no cumplen los criterios.
Ejemplo:
<!DOCTYPE html><html><head><scriptsrc=</script><!-- Script to use not() method --><script>$(document).ready(function() {$("div").not(".demo").css("background-color", "lightgreen");});</script></head><body><h1>Welcome to GeeksforGeeks !!!</h1><divclass="demo"style="border: 1px solid green;"><p>This is the first statement.</p></div><br><divclass="demo"style="border: 1px solid green;"><p>This is the second statement.</p></div><br><divstyle="border: 1px solid green;"><p>This is the third statement.</p></div><br></body></html>Producción:
