03-sintaxis de jquery

Con jQuery, puedes manipular, consultar y realizar acciones en elementos HTML.

La sentencia $(document).ready(function() { ... }) se utiliza en jQuery para asegurarse de que el código dentro de la función anónima se ejecute una vez que el documento HTML se haya cargado completamente en el navegador. Esto es importante porque garantiza que el código JavaScript no intente interactuar con elementos HTML que aún no se han creado en la página.

Explicación detallada de la sentencia:

1. $(document) es una función de jQuery que selecciona el objeto del documento HTML. Representa el documento web en el que se está ejecutando el código.
2. .ready(function() { ... }) es un evento que se dispara cuando el documento HTML se ha cargado por completo en el navegador. La función anónima que se pasa como argumento se ejecutará cuando este evento ocurra.

Entonces, cuando utilizas $(document).ready(function() { ... }), estás diciendo que el código dentro de la función anónima debe ejecutarse solo después de que todo el documento HTML se haya cargado, lo que garantiza que todos los elementos HTML estén disponibles y listos para interactuar con el código JavaScript.

Aquí hay un ejemplo de cómo se usa comúnmente:

$(document).ready(function() {
    // Tu código JavaScript aquí
    // Puedes interactuar con elementos HTML de forma segura.
});
    

Esto es útil para evitar problemas de ejecución de código prematuro y garantizar que tu código JavaScript funcione correctamente una vez que la página esté completamente cargada.

---

Sintaxis básica:

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() que se realizará en los elementos.

Los selectores de jQuery comienzan con el signo de dólar y paréntesis: $().

El selector más básico es el selector de elementos, que selecciona todos los elementos en función del nombre del elemento.

$(selector): El signo $ es una función de jQuery que se utiliza para seleccionar elementos HTML en el documento. El selector es una expresión que indica qué elementos HTML deseas seleccionar. Puede ser un nombre de etiqueta, una clase, un ID, o cualquier otro tipo de selector compatible con CSS. Por ejemplo, $("p") seleccionará todos los párrafos en el documento, $("#miId") seleccionará un elemento con el ID "miId", y $(".miClase") seleccionará todos los elementos con la clase "miClase".

acción(): Después de seleccionar los elementos con el selector, puedes realizar una acción en ellos utilizando un método de jQuery. Los métodos de jQuery son funciones que realizan tareas específicas en los elementos seleccionados. Por ejemplo, hide() ocultará los elementos seleccionados, fadeIn() los mostrará gradualmente, addClass("nuevaClase") añadirá una nueva clase a los elementos, y así sucesivamente.

Ejemplo de código:

$("div") // selecciona todos los elementos <div> 
$("p").hide(); // Oculta todos los párrafos en el documento.
$("#miId").addClass("resaltado"); // Añade la clase "resaltado" al elemento con el ID "miId".
$(".miClase").fadeOut(); // Desvanece gradualmente todos los elementos con la clase "miClase".
    

Veamos algunos ejemplos más:

$(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". 
    

La combinación de $(selector) y .acción() es una parte fundamental de cómo funciona jQuery y te permite interactuar con elementos HTML de una manera sencilla y eficiente.

Si estudiaste CSS, seguramente estás familiarizado con los selectores CSS. Puedes revisar los tutoriales de CSS.

jQuery usa la sintaxis CSS para seleccionar elementos.

---

El evento de documento listo

Los elementos jQuery se utilizan dentro de un 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...
});
    

Ambos métodos están listos para utilizarse con jQuery, pero yo recomiendo utilizar el primero (documento listo).

Ir al indice