Hay muchas bibliotecas de JavaScript como: anime.js, screenfull.js, moment.js, etc. JQuery también forma parte de las bibliotecas de JavaScript. Se utiliza para simplificar el código. Es una biblioteca ligera y rica en funciones.
En este artículo, aprenderemos cómo encontrar todos los niños con una clase específica de cada división.
.children(selector) – En jquery puedes lograr esta tarea usando el método llamado .children() . Toma el selector como parámetro y cambia el elemento hijo con el nombre especificado.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js">
</script>
<style>
body {
font-size: 20px;
font-style: italic;
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1 class="child">
GeeksForGeeks
</h1>
<span>
This is a span in div element.
(children but not specified)
</span>
<p class="child">
This is a paragraph with specified
class in a div element.
</p>
<div class="child">
This is inner div with specified
class in a div element.
</div>
<p>
This is another paragraph in div
element.(children but not specified)
</p>
</div>
<script>
$("div").children(".child").css({
"background-color": "lightgreen",
"border-style": "inset"
});
</script>
</body>
</html>
Producción:
Explicación: El elemento div tiene 5 elementos secundarios (1 encabezado, 1 espacio, 1 div interno y 3 párrafos). En el código, hemos especificado tres elementos con class=”child”, es decir, dos párrafos y un div. Puede notar que solo los elementos especificados se ven afectados y cambian su propiedad de estilo.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
body {
font-size: 20px;
font-style: italic;
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>GeeksForGeeks</h1>
<p>
class with prime will only
get different style property
</p>
<p>'1' is not a prime number.</p>
<p class="prime">'2' is a prime number.</p>
<div class="prime">'3' is a prime number.</div>
<p>'4' is not a prime number.</p>
<p class="prime">'5' is a prime number</p>
</div>
<script>
$("div").children(".prime").css({
"background-color": "lightgreen",
"border-style": "inset"
});
</script>
</body>
</html>
Producción –
Publicación traducida automáticamente
Artículo escrito por volumezero9786 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA