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
$("*");