Dada una página web que contiene elementos de párrafo y la tarea es encontrar cada elemento de párrafo usando el módulo jQuery. Tenemos que encontrar los elementos <p> de la página HTML, y puede lograr esta tarea usando los selectores de elementos. El selector de elementos seleccionará el elemento en función del nombre del elemento.
Sintaxis:
$("element name")
Acercarse:
- Primero cree una página HTML y escriba algo de contenido en los elementos <p>.
- Con la ayuda de jQuery, seleccione todos los elementos del párrafo.
- Aplique alguna propiedad CSS al elemento <p> para ver el cambio. Puede usar el método .css() para aplicar la propiedad CSS.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<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: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css("background-color", "green");
});
});
</script>
</head>
<body>
<h2 style="color:green">
GeeksForGeeks
</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>
Click here to find all
paragraph elements.
</button>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Explicación: en el ejemplo anterior, puede notar que después de hacer clic en el botón, el color de fondo de cada elemento de párrafo cambió. Usando el selector, hemos seleccionado todos los elementos del párrafo y luego usamos el método .css() para establecer los estilos para todos los elementos del párrafo.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
body {
text-align: center;
font-size: 20px;
}
button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css("background-color", "lightgreen");
});
});
</script>
</head>
<body>
<h2 style="color:green">
GeeksForGeeks
</h2>
<h3>Database</h3>
<p>
Database is a collection of inter-related
data which helps in efficient retrieval,
insertion and deletion of data from
database and organizes the data in the
form of tables, views
</p>
<h3>Operating System</h3>
<p>
An operating system acts as an intermediary
between the user of a computer and computer
hardware.
</p>
<button>
Click here to find all
paragraph elements.
</button>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA