.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.
Leer másMétodos.
Métodos.
El método .get() en jQuery se utiliza para recuperar un elemento específico del conjunto de elementos coincidentes. A diferencia de otros métodos que devuelven un objeto jQuery, .get() devuelve un elemento DOM nativo, lo que permite trabajar directamente con el elemento utilizando las propiedades y métodos del DOM.
Definición del método .get()
El método .get() puede devolver un solo elemento cuando se proporciona un índice, o todos los elementos del conjunto de coincidencias como una matriz si no se proporciona ningún índice.
Sintaxis:
index.js
JavaScript
$(selector).get(index);selector: Un selector que define el conjunto de elementos a los que se aplicará el método.index: Un número entero que indica la posición del elemento que se desea recuperar (comienza en 0). Si no se proporciona, se devuelve una matriz con todos los elementos coincidentes.
Ejemplos completos en HTML.
Ejemplo 1: Recuperar un elemento específico por índice.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de get() por índice.</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#mostrarParrafo").click(function() {
// Recupera el segundo párrafo (índice 1) dentro del div con id 'contenedor'
var segundoParrafo = $("#contenedor p").get(1);
// Cambia el color del segundo párrafo a rojo utilizando jQuery
$(segundoParrafo).css("color", "red");
});
});
</script>
</head>
<body>
<div id="contenedor">
<p>Párrafo 1.</p>
<p>Párrafo 2.</p>
<p>Párrafo 3.</p>
</div>
<button id="mostrarParrafo">Cambiar Segundo Párrafo</button>
</body>
</html>
index.js
JavaScript
// Recupera el segundo párrafo (índice 1) dentro del div con id 'contenedor'
var segundoParrafo = $("#contenedor p").get(1);Explicación del Ejemplo 1:
Al hacer clic en el botón “Mostrar Segundo Párrafo”, se recupera el segundo párrafo (índice 1) dentro del div con el id contenedor y se cambia su color a rojo utilizando jQuery.
Resultado.
Párrafo 1.
Párrafo 2.
Párrafo 3.
Ejemplo 2: Recuperar todos los elementos coincidentes como una matriz.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de get() sin índice.</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#mostrarParrafos").click(function() {
// Recupera todos los párrafos dentro del div con id 'contenedor' como una matriz
var parrafos = $("#contenedor p").get();
// Cambia el color de todos los párrafos a azul utilizando jQuery
$(parrafos).css("color", "blue");
});
});
</script>
</head>
<body>
<div id="contenedor">
<p>Párrafo A.</p>
<p>Párrafo B.</p>
<p>Párrafo C.</p>
</div>
<button id="mostrarParrafos">Cambiar Todos los Párrafos</button>
</body>
</html>
index.js
JavaScript
// Recupera todos los párrafos dentro del div con id 'contenedor' como una matriz
var parrafos = $("#contenedor p").get();Explicación del Ejemplo 2:
Al hacer clic en el botón “Mostrar Todos los Párrafos”, se recuperan todos los párrafos dentro del div con el id contenedor como una matriz y se cambia su color a azul utilizando jQuery.
Resultado.
Párrafo A.
Párrafo B.
Párrafo C.
