Selecciones
Selección This
En index.html
Código:
<div class="cajas"></div>
<div class="cajas"></div>
<script src="js/seleccionThis.js"></script>
En css/estilo.css
Código:
.cajas {
position: relative;
width: 100px;
height: 100px;
background-color: rgb(109, 221, 57);
cursor: pointer;
margin: 20px;
}
En js/seleccionThis.js
Código:
// Si damos click en un elemento con la clase "cajas", cambia su color de fondo a amarillo
$(".cajas").click(function() {
$(this).css("background-color", "yellow");
});
Si le damos click al segundo cuadro:
De esta manera optimizamos código para dar click en una caja en especifico.
Selección Tipo Atributo
En index.html
Código:
<!-- Selección Atributos -->
<input type="text" placeholder="Usuario">
<input type="password" placeholder="Contraseña">
<button id="boton">Enviar</button>
En js/seleccionAtributos.js
Código:
$("#boton").click(function() {
$("[type='text']").css("background-color", "yellow");
});
Si le damos click a enviar la caja de Usuario se tiene que pintar.
Documentación | TJWeb | JQuery | Selecciones