En este artículo, aprenderemos cómo seleccionar múltiples elementos usando JQuery. JQuery es la biblioteca de JavaScript más rápida y liviana que se utiliza para simplificar las interacciones entre un documento HTML/CSS, o más precisamente el Modelo de objetos de documento (DOM) y JavaScript. JQuery es ampliamente famoso por su lema «Escribe menos, haz más». Simplemente significa que puede lograr su objetivo simplemente escribiendo unas pocas líneas de código.
Enfoque: Podemos seleccionar tantas clases como queramos usando ‘$’ para seleccionar clases. Si lo desea, puede especificar cualquier número de selectores para combinar en un solo resultado. Este combinador de expresiones múltiples es una forma eficiente de seleccionar elementos diferentes y el orden de los elementos DOM en el objeto jQuery devuelto puede no ser idéntico, ya que estarán en el orden del documento.
Sintaxis:
$( "classOne, classTwo, classThree" )
.css( "property name", "value" );
Ejemplo:
HTML
<!doctype html>
<html lang="en">
<head>
<style>
div,
span,
p {
width: 126px;
height: 60px;
float: left;
padding: 3px;
margin: 2px;
background-color: #eee;
font-size: 14px;
}
body {
text-align: center;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<div>Linux</div>
<p class="myClass">Windows</p>
<p class="notMyClass">Pizza</p>
<span>MacOS</span>
<script>
$("div, span, p.myClass")
.css("border", "5px solid green");
</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