Sintaxis de jQuery

A través de jQuery, puede seleccionar (consultar, query) elementos HTML y realizarles "operaciones" (acciones).

Ejemplo de gramática jQuery

$(this).hide()
Demostración de la función hide() de jQuery, oculta el elemento HTML actual
$("#test").hide()
Demostración de la función hide() de jQuery, oculta el elemento con id="test"
$("p").hide()
Demostración de la función hide() de jQuery, oculta todos los elementos <p>
$(".test").hide()
Demostración de la función hide() de jQuery, oculta todos los elementos con class="test"

Sintaxis de jQuery

La gramática de jQuery está diseñada para seleccionar elementos HTML y realizar ciertas operaciones en ellos.

La gramática básica es:$(selector).action()

  • El símbolo dólar define jQuery
  • El selector (selector) "consulta" y "busca" elementos HTML
  • La función action() de jQuery realiza operaciones en los elementos

Ejemplo

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

$("p").hide() - Oculta todos los párrafos

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

$("#test").hide() - Oculta todos los elementos con id="test"

Consejo:La sintaxis utilizada por jQuery es una combinación de XPath y selector de CSS. En los próximos capítulos de este tutorial, aprenderá más sobre la sintaxis de los selectores.

Función de documento listo

Quizás ya haya notado que en todos nuestros ejemplos, todas las funciones jQuery se encuentran dentro de una función de ready de documento:

$(document).ready(function(){
  // Aquí van las funciones jQuery
});

Esto es para evitar que el código jQuery se ejecute antes de que el documento se cargue completamente (estado listo).

Si se ejecuta la función antes de que el documento se cargue completamente, la operación puede fallar. A continuación se presentan dos ejemplos específicos:

  • Intentar ocultar un elemento inexistente
  • Obtener el tamaño de la imagen no completamente cargada