.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.
Leer másContenido.
Contenido.
Menú
El método
.children()
de jQuery se utiliza para obtener todos los elementos hijos directos de los elementos seleccionados. Este método es útil para acceder y manipular los elementos hijos dentro de un contenedor específico.Definición:
El método
.children()
devuelve todos los elementos hijos directos de los elementos seleccionados.Sintaxis:
index.js
JavaScript
$(selector).children([selector])
selector
: Un selector opcional que se utiliza para filtrar los hijos seleccionados.
Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .children() en jQuery</title>
<style>
.hijo {
color: blue;
}
.destacado {
font-weight: bold;
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#botonResaltar").click(function(){
$("#contenedor").children(".hijo").addClass("destacado");
});
});
</script>
</head>
<body>
<button id="botonResaltar">Resaltar Hijos</button>
<div id="contenedor">
<p class="hijo">Hijo 1</p>
<p class="hijo">Hijo 2</p>
<p class="otro">No es un hijo seleccionado</p>
</div>
</body>
</html>
index.js
JavaScript
$("#botonResaltar").click(function(){
$("#contenedor").children(".hijo").addClass("destacado");
});
Explicación del Ejemplo:
En este ejemplo, cuando el usuario hace clic en el botón con el id “botonResaltar”, el método .children()
selecciona todos los elementos hijos directos del div
con el id “contenedor” que tienen la clase “hijo”. Luego, se agrega la clase “destacado” a estos elementos, lo que cambia su estilo para que tengan texto en negrita y de color rojo.
Resultado.
Hijo 1
Hijo 2
No es un hijo seleccionado
jQuery.com
Contenido Relacionado.
0
0
votos
Valoración del Artículo
Suscribirse
0 Comentarios
Más antiguo
Más reciente
Más votado
Comentarios en línea
Ver todos los comentarios