En este artículo vamos a ver cómo seleccionar el elemento por su id usando jQuery. Para aprender sobre este tema es necesario tener conocimientos previos sobre HTML, CSS, JavaScript y jQuery.
Uso de JavaScript: esta pregunta también se resuelve mediante un popular método de JavaScript llamado d ocument.getElementById() que se usa para seleccionar el elemento por su atributo id. El método getElementById() devuelve los elementos que han dado un ID que se pasa a la función. Esta función se usa ampliamente en el diseño web para cambiar el valor de cualquier elemento en particular u obtener un elemento en particular. Si el ID pasado a la función no sale, devuelve nulo.
Sintaxis:
document.getElementById('idname')
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How do you select element by ID in javascript?
</title>
</head>
<body style="border: 2px solid green;
min-height: 240px; text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="element" style="margin-top:20px;"></p>
<script>
setTimeout(function() {
document.getElementById('element').innerText
= 'Hello Geeks !! Welcome to GeeksforGeeks';
}, 2000);
</script>
</body>
</html>
Producción:
Uso de jQuery: el código anterior también se realiza mediante el método jQuery, que es muy simple y se realiza con menos código. El selector #id especifica una identificación para un elemento a seleccionar. No debe comenzar con un número y el atributo id debe ser único dentro de un documento, lo que significa que solo se puede usar una vez.
sintaxis:
$("#idname");
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How do you select element
by ID in javascript?
</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body style="border: 2px solid green;
min-height: 240px; text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="element" style="margin-top:20px;"></p>
<script>
setTimeout(function () {
$('#element').text(
'Hello Geeks !! Welcome to GeeksforGeeks');
}, 2000);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA