Dado un conjunto de áreas de texto , la tarea es aplicar un borde en cada una de ellas y luego agregar algunos párrafos y luego definir un borde en cada párrafo usando la biblioteca jQuery.
Enfoque 1: usar los métodos click() , css() y add() en jQuery.
Hay dos áreas de texto, dos párrafos y un botón definidos en el siguiente ejemplo. El botón tiene una clase de borde de aplicación y tiene un detector de eventos de clic adjunto mediante el método click() . Al hacer clic en el botón, se aplica un borde en cada uno de los elementos del área de texto mediante el método css() . El primer parámetro es la propiedad a establecer, que es un borde en este caso, y el segundo parámetro es el valor de esta propiedad de borde.
Además, enstringmos el método add() con el método css() para agregar todos los párrafos a este objeto jQuery. Una vez más, usamos el método css() para establecer un borde para los elementos del párrafo, usando el mismo procedimiento que se discutió con los elementos del área de texto.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.5rem;
font-weight: bold;
width: fit-content;
margin: 2rem auto 0 auto;
padding: 0.5rem;
}
textarea {
font-size: 1.25rem;
}
button {
margin-top: 2rem;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<textarea>GeeksforGeeks</textarea>
<textarea>GFG</textarea>
<p>Geeks</p>
<p>jQuery</p>
<button class="apply-border">
Click me to add borders
</button>
<script type="text/javascript">
$(".apply-border").click(function () {
$("textarea")
.css("border", "3px solid green")
.add("p")
.css("border", "3px solid green");
});
</script>
</body>
</html>
Producción:
Enfoque 2: Usar los métodos bind() , css() y add() en jQuery.
Este enfoque es bastante similar al enfoque anterior, pero la distinción clave es que el método utilizado para adjuntar el detector de eventos al botón es el método bind() con dos parámetros, el primer parámetro es el evento » clic « y el segundo parámetro es la función anónima con la misma lógica que el enfoque anterior, en lugar de utilizar el método click() .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
p {
font-size: 1.5rem;
font-weight: bold;
width: fit-content;
margin: 2rem auto 0 auto;
padding: 0.5rem;
}
textarea {
font-size: 1.25rem;
}
button {
margin-top: 2rem;
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<textarea>GeeksforGeeks</textarea>
<textarea>GFG</textarea>
<p>Geeks</p>
<p>jQuery</p>
<button class="apply-border">
Click me to add borders
</button>
<script type="text/javascript">
$(".apply-border").bind("click", function () {
$("textarea")
.css("border", "3px solid green")
.add("p")
.css("border", "3px solid green");
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA