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