Tutoriales de Informática y Dispositivos Móviles
Tutoriales de Informática y Dispositivos Móviles
Seleccionar elementos jQuery

Seleccionar elementos con jQuery

Seleccionar elementos con jQuery

En el siguiente tutorial aprenderemos cómo seleccionar los distintos elementos del DOM utilizando jQuery Seleccionar elementos con jQuery

¿Para qué sirve un selector?

Son cadenas de texto para seleccionar y acceder a elementos de la página (etiquetas, ids, clases, atributos….) por su tipo, nombre o valor.

Son similares a los que se utilizan en css.

Ejemplo

<div class="titulo">
  <p>Este es el título</p>
</div>
<script>
  // Selección de la etiqueta p
  $("p");
  // Selección de una clase
  $(".titulo");
</script>

Selector de etiqueta

Identificamos la etiqueta que queremos seleccionar. Escribimos el nombre de la etiqueta entre comillas.

Ejemplo

<div class="titulo">
  <h1>Este es el título</h1>
  <input type="text"/>
</div>
<script>
  // Selección de la etiqueta h1
  $("h1");
  // Selección de la etiqueta input
  $("input");
</script>

Selector de clase

Para identificar un elemento por su clase escribiremos el nombre de la clase precedido del caracter .

Ejemplo

<div class="titulo">
  <h1>Este es el título</h1>
  <input class="nombre" type="text"/>
</div>
<script>
  // Selección la clase titulo
  $(".titulo");
  // Selección de la clase nombre
  $(".nombre");
</script>

Selector de id

Para seleccionar un id debemos escribir el nombre del id precedido del caracter #

Ejemplo

<div id="titulo">
  <h1>Este es el título</h1>
  <input id="nombre" type="text"/>
</div>
<script>
  // Selección del id titulo
  $("#titulo");
  // Selección del id nombre
  $("#nombre");
</script>

Selector por atributo

Podemos seleccionar el elemento según sus atributos y valor de la siguiente forma

Ejemplo

<div id="titulo-id" class="titulo titulo1">
  <input longitud="20" class="nombre" type="text"/>
  <input longitud="40" class="apellido" type="text"/>
  <button title="Cerrar" type="submit">Cerrar</button>
</div>
<script>
  // Selecciona los elemento con atributo longitud = 20
  $("[longitud='20']");
  // Selecciona el botón con el atributo title = cerrar
  $("[title='Cerrar']");
</script>

Selector de varias clases

Para seleccionar elementos que tienen más de una clase lo haremos de la siguiente forma

Ejemplo

<div class="titulo titulo1">
  <h1>Este es el título</h1>
  <input class="nombre" type="text"/>
</div>
<div class="titulo titulo2">
  <h1>Este es el título</h1>
  <input class="nombre" type="text"/>
</div>
<script>
  // Selección el elemento que tiene la clase titulo y titulo1
  $(".titulo.titulo1");
</script>

Selectores concatenados

Para seleccionar más de un tipo de elemento lo haremos separándolos por comas. Se seleccionarán los elementos que tengan al menos una de ellas.

Ejemplo

<div id="titulo-id" class="titulo titulo1">
  <h1>Este es el título</h1>
  <input class="nombre" type="text"/>
  <input class="apellido" type="text"/>
  <select class="profesion"></select>
</div>
<div class="titulo titulo2">
  <h1>Este es el título</h1>
  <select class="nacionalidad"></select>
  <input type="date" class="fecha-cabecera"/>
</div>
<script>
  // Selecciona los elemento que tengan el id o la clase indicada
  $("#titulo-id,.titulo2");
  // Selecciona todos los elementos input y el select de clase nacionalidad
  $("input,.nacionalidad");
</script>

Selector de todos los elementos

Para seleccionar todos los elementos de la página usaremos el caracter asterisco

Ejemplo

// Selecciona todos los elementos de la página
$("*");

Más tutoriales de jQuery

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
A %d blogueros les gusta esto: