Sintaxis de jQuery


Con jQuery, selecciona (consulta) elementos HTML y realiza "acciones" en ellos.


Sintaxis de jQuery

La sintaxis de jQuery está hecha a medida para seleccionar elementos HTML y realizar alguna acción en los elementos.

La sintaxis básica es: $( selector ). acción ()

  • Un signo $ para definir/acceder a jQuery
  • Un ( selector ) para "consultar (o encontrar)" elementos HTML
  • Una acción jQuery () que se realizará en los elementos

Ejemplos:

$(this).hide() - oculta el elemento actual.

$("p").hide() - oculta todos los elementos <p>.

$(".test").hide() - oculta todos los elementos con class="test".

$("#test").hide() - oculta el elemento con id="test".

¿Estás familiarizado con los selectores de CSS?

jQuery usa la sintaxis CSS para seleccionar elementos. Aprenderá más sobre la sintaxis del selector en el próximo capítulo de este tutorial.

Consejo: si no sabes CSS, puedes leer nuestro Tutorial de CSS .


El evento de documento listo

Es posible que haya notado que todos los métodos de jQuery en nuestros ejemplos están dentro de un evento de documento listo:

$(document).ready(function(){

  // jQuery methods go here...

});

Esto es para evitar que se ejecute cualquier código jQuery antes de que el documento termine de cargarse (esté listo).

Es una buena práctica esperar a que el documento esté completamente cargado y listo antes de trabajar con él. Esto también le permite tener su código JavaScript antes del cuerpo de su documento, en la sección de encabezado.

Estos son algunos ejemplos de acciones que pueden fallar si los métodos se ejecutan antes de que el documento esté completamente cargado:

  • Intentando ocultar un elemento que aún no se ha creado
  • Intentando obtener el tamaño de una imagen que aún no está cargada

Sugerencia: el equipo de jQuery también ha creado un método aún más corto para el evento de documento listo:

$(function(){

  // jQuery methods go here...

});

Utilice la sintaxis que prefiera. Creemos que el evento de documento listo es más fácil de entender al leer el código.