jQuery es una biblioteca de JavaScript pequeña y rápida con un lema: «Escribe menos y haz más «. Para usar JQuery, puede descargar la biblioteca jquery en su máquina local o incluir la biblioteca jquery en su código HTML.
Tenga en cuenta que antes de aprender JavaScript tiene conocimientos básicos de HTML, CSS y JavaScript.
Nota: En jQuery, el botón es una extensión y no forma parte de la especificación CSS. No puede aprovechar el aumento de rendimiento proporcionado por el método nativo DOM querySelectorAll() utilizando el botón jquery.
Para un mejor rendimiento: primero seleccione los elementos usando un selector de CSS puro y luego use .filter(“:button”) .
Enfoque: en este artículo, aprenderemos cómo encontrar todas las entradas de botones y marcarlas usando javascript. Para completar esta tarea usando : selector de botón en su código.
-
:button selector : Se utiliza para seleccionar todos los elementos de botón y elementos del tipo botón.
Sintaxis:
$(":button")
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
textarea {
height: 35px;
}
div {
color: red;
}
fieldset {
margin: 0;
padding: 0;
border-width: 0;
}
.marked {
background-color: yellow;
border: 3px red solid;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>How to find all button inputs
and mark them using jQuery?
</h3>
<form>
<fieldset>
<input type="button"
value="Input Button" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select>
<option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
</fieldset>
</form>
<div></div>
<script>
var input = $(":button").addClass("marked");
$("div").text("Number of button found - " + input.length + ".");
// Prevent the form from submitting
$("form").submit(function (event) {
event.preventDefault();
});
</script>
</body>
</html>
Salida: Puede notar que todas las entradas del botón están marcadas.
Publicación traducida automáticamente
Artículo escrito por krishnanand3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA