Contenido principal
Programación de computadoras
Curso: Programación de computadoras > Unidad 7
Lección 2: Acceso al DOM con jQuery- Encontrar elementos con jQuery
- Desafío: unicornifica una página con jQuery
- Depurar páginas web con la consola del navegador
- Obtener información sobre elementos con jQuery
- Desafío: descubrimientos famosos
- Revisión: acceso al DOM con jQuery
- Proyecto: detective del DOM
- Descanso de historia: ¿cómo John construyó jQuery?
© 2023 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
Revisión: acceso al DOM con jQuery
Para encontrar elementos del DOM con jQuery, pásale un selector de CSS válido a la función de jQuery:
$("h1"); // selecciona todos los h1s
$("#heading"); // selecciona el elemento con el id "heading"
$(".warning"); // seleccciona todos los elementos con nombre de clase "warning"
Observa que la función jQuery puede llamarse
$
o jQuery
, así que esos son lo mismo que: jQuery("h1");
jQuery("#heading");
jQuery(".warning");
Muchas personas prefieren
$
porque es muy corto. La función jQuery siempre regresa una colección de elementos coincidentes de jQuery, incluso si solo hay un elemento que coincide, ¡o ninguno! Puedes leer más sobre la función jQuery en su documentación.
Una vez que hayas encontrado elementos del DOM con jQuery, puedes hacer cosas como asignar su contenido interior con
text()
:
$("#temperature").text("89° Fahrenheit");
(Ver ejemplo completo)Puedes usar el mismo método
text()
para obtener el contenido interior, pasándole 0 parámetros:var heading = $("#heading").text();
En la siguiente lección, aprenderás muchos más métodos para obtener y asignar propiedades de elementos del DOM.
Detrás de las cámaras, todas estas funciones de jQuery usan la API del DOM que te enseñamos en el curso de HTML/JS. Por ejemplo, la función
$
usa métodos como getElementById()
y querySelectorAll()
, y attr()
usa el método getAttribute()
. Cuando usas la función $
, puedes usar esas funciones en menos líneas de código y también sabes que tu código funcionará en todos los navegadores que soportan jQuery, lo cual es especialmente importante cuando estás usando las funciones más recientes de la API del DOM.¿Quieres unirte a la conversación?
- Esta buena la metodología de estudio, seria bueno que enseñaran ajax.(3 votos)
- por q debo seleccionar todos los h1 y no uno por uno(0 votos)
- No se puede a menos que selecciones cada id que tenes(3 votos)