jQuery Selectores

Usando los selectores jQuery se puede seleccionar y manipular cualquier elemento HTML de DOM (Document Object Model). Cuando se carga una página web, el navegador crea un Modelo de Objeto de Documento (DOM) de la página, un DOM no es más que una jerarquía de elementos html. Antes de ver cómo utilizar los selectores jQuery para seleccionar y manipular los elementos DOM, tomemos un ejemplo para entender cómo se traduce una página web a un DOM.

Página web vs DOM

Aquí hemos tomado un ejemplo de una página web, hemos traducido esta página web en un modelo de objeto Document para que pueda entender los elementos de una página html.
Página web:

<!DOCTYPE html><html><cabeza>>título>Bienvenido a BeginnersBook</title></head><body><h2>Esto es sólo un ejemplo</h2><p>Esto es sólo un párrafo.</p></body></html>

DOM de la página web anterior:
jQuery Selectores DOM

¿Qué podemos hacer usando los selectores jQuery

Puedes seleccionar elementos html basados en su nombre, clase, id, atributo, valor, etc. y luego puedes aplicarles un comportamiento.

Por ejemplo, digamos que tienes una página html con un párrafo y un botón, puedes aplicar un comportamiento al botón usando el selector jQuery para ocultar el párrafo cuando se hace clic en el botón, o puedes cambiar el color de fondo del párrafo cuando se hace clic en el botón, puedes hacer lo que quieras, básicamente los selectores jQuery te dan un control total sobre los elementos html.

Tipos de selectores jQuery

Hay varios selectores de jQuery que puedes usar para manipular los elementos html. Tomemos algunos ejemplos para entender los diferentes tipos de selectores.

El selector de jQuery comienza con el signo $ seguido de un paréntesis. Por ejemplo $(p) selecciona todos los párrafos de la página html.

jQuery Selector de nombre de elemento

La sintaxis del selector de nombre de elemento jQuery es $(nombre_de_elemento). Selecciona el elemento html basado en el nombre del elemento. Proporcionamos el nombre del elemento entre paréntesis para seleccionarlo.

En el siguiente ejemplo tenemos una página html que contiene pocos elementos como head, body, h2, p, button etc. En la sección de scripts de la página web hemos añadido la función jQuery que selecciona el elemento h2 y lo oculta cuando se hace clic en el botón.

Hemos utilizado el selector sobre el elemento h2 y estamos llamando a la función hide de la siguiente manera: $(«h2»).hide(); esto seleccionará todos los elementos h2 de la página html y los esconderá cuando se haga clic en el botón.

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("h2").hide(); });});</script></head><body><h2>jQuery Selectors Example on BeginnersBook.com</h2><p>Este es un párrafo. Contiene algo de texto.</p><botón>Click Me!</botón></body></html>

Salida:
Antes de hacer clic en el botón:
Esto es cuando la página html anterior se carga en el navegador, aún no hemos hecho clic en el botón.
jQuery element name selector example
Después de que se haga clic en el botón:
Una vez que se hace clic en el botón, se seleccionan todos los elementos h2 de la página html y se ocultan.
jSeleccionador de nombres de elementos de consulta Salida

jQuery Element #id Selector

En el ejemplo anterior hemos visto cómo seleccionar un elemento html en base al nombre, sin embargo la desventaja de usar el selector de nombre es que selecciona todos los elementos de la página html, por ejemplo $(p) selecciona todos los párrafos de la página html.

¿Qué pasa si queremos seleccionar sólo un párrafo en particular y no todos los párrafos de una página html, podemos hacerlo asignando un id a ese párrafo en particular y luego seleccionar el párrafo basado en el id.

La sintaxis del elemento selector #id es:

$("#mi_id")

Esto seleccionará el elemento que tiene el id my_id.

Tomemos un ejemplo.

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#myid").hide(); });});</script></head><body><h2 id="myid">jQuery element id selector example</h2><p>Este ejemplo está publicado en el libro de principiantes.com</p><p>Este es otro párrafo.</p><botón>Click Me!</botón></body></html>

Salida:
Antes de pulsar el botón:
jQuery Selectors - Selector de identificación de elementos
Después de hacer clic en el botón:
jQuery Selectors ejemplo de salida

jQuery Element .class Selector

En el ejemplo anterior, hemos visto el selector de identificación del elemento. La limitación del selector de id es que un id es único y dos elementos html no pueden tener el mismo id.

¿Qué pasa si queremos ocultar un elemento h2 particular y un para elemento particular en un evento de click de botón. Podemos lograrlo con la ayuda de los selectores de clase

de elemento, podemos asignar la misma clase a ese elemento h2 y a ese elemento p y llamar a la función de ocultar en el selector de clase de elemento. La sintaxis del selector de clase de elemento es:

$(".myclass")

Esto seleccionará todos los elementos html que tengan la clase myclass.

Tomemos un ejemplo:
En el siguiente ejemplo hemos asignado una clase myclass a tres elementos html, h2, p y elemento button. Hemos llamado a la función de ocultar en el elemento selector de clase donde pasamos el nombre de la clase como myclass. Esto debería ocultar estos tres elementos en el evento de click de botón.

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $(".myclass").hide(); });});</script></head><body><h2 class="myclass">jQuery element class selector example</h2><p>Este ejemplo está publicado en el libro de principiantes.com</p><p class="myclass">Este es otro párrafo.</p><botón class="myclass">Click Me!</button></body></html>

Salida:
Antes de hacer clic en el botón:
jQuery Selectors ejemplo de clase de elemento
Después de hacer clic en el botón:
jQuery selectors element class selector example

Más Tutorial de Selectores jQuery

Siguiente ❯

Rate this post

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio