En este artículo, veremos cómo escribir código para seleccionar todos los enlaces dentro del párrafo usando jQuery. Para seleccionar todos los enlaces dentro del elemento de párrafo, usamos el selector padre descendiente . Este selector se utiliza para seleccionar todos los elementos que son descendientes de un elemento específico (principal).
Sintaxis:
$("parent descendant")
Enfoque: aquí, hemos creado enlaces y contenido dentro del elemento de párrafo. Después de eso, usamos el selector $(“pa”) para seleccionar todos los enlaces dentro del elemento de párrafo y cambia su estilo usando el método css() .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
jQuery code to select all
links inside the paragraph
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
body {
text-align: center;
font-size: 30px;
}
button {
background-color: green;
color: white;
border: none;
font-size: 24px;
border-radius: 5px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a {
text-decoration: none;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p a").css({
color: "white",
background: "green"
});
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
jQuery code to select all
links inside the paragraph
</h3>
<p>
<a href="#">GeeksforGeeks</a> is a
computer science <br>portal where
you can learn <a href="#">HTML</a>,
<a href="#">CSS</a>, <br><a href="#">
JavaScript</a>, etc.
</p>
<button>
Click Here
</button>
</body>
</html>
Producción:
