En este artículo, discutiremos cómo usar las variables de JavaScript en los selectores de jQuery. En los siguientes ejemplos, se puede ver que hemos utilizado los valores almacenados en las variables de JavaScript que se utilizan dentro de los selectores de jQuery.
Ejemplo 1: se puede aplicar la técnica de concatenación para utilizar los valores almacenados en las variables de JavaScript. En el siguiente ejemplo, cada vez que se hace clic en el botón, el contenido presente dentro del elemento <span> se agrega al elemento <p> . Luego usaremos el método ready() que ayuda a cargar toda la página y luego ejecutar el resto del código.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript variables in jQuery slectors</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity=
"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<div>
<button id="button"
style="color: green;">
Click Me
</button>
<p id="firstpara">
<span id="span"
style="color: green;">
A Computer Science Portal fo Geeks<br>
</span>
</p>
</div>
<script>
$(document).ready(function() {
$("#button").click(function() {
var paraId = "firstpara";
var spanId = "span";
$("#" + paraId).append($("#" + spanId).html());
});
})
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo cambia el color del texto cuando se presiona el enlace. En este ejemplo, javascript:void(0); se usa dentro del elemento <a> . Luego usaremos el método ready() para ayudar a cargar toda la página y luego ejecutar el resto del código.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript variables in jQuery slectors</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity=
"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<form>
<p>
Text:
<input type="text">
</p>
<br>
<a href="javascript:void(0);">
Change the color of Text
</a>
</form>
<script>
$(document).ready(function() {
$("a").click(function() {
var type = $("input").attr("type");
var attribute = "color";
var color = "green";
$("input[type=" + type + "]")
.css(attribute, color);
});
})
</script>
</body>
</html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por AnasShamoon y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA