ASP.NET: Sintaxis jQuery

Para entender y poder utilizar jQuery, necesitas conocer algunos conceptos básicos importantes. En primer lugar, necesitas conocer la funcionalidad básica de jQuery, como la función “$” y el método “ready”, que permiten ejecutar código cuando la página ya se ha cargado en el navegador.

A continuación, necesitas aprender la sintaxis de los “selectores” y “filtros” de jQuery, que permiten encontrar elementos en una página por los criterios de búsqueda que especifiques. Una vez que tengas una referencia a uno o más elementos en una página, puedes aplicar varios métodos a dichos elementos, como por ejemplo el método “css”. También necesitas saber un poco acerca de los eventos de jQuery que permiten adjuntar comportamiento a los eventos que tú código HTML podría lanzar, como un clic de ratón, mouseover, etc. En los próximos posts, se verán con más detalle y ejemplos todos estos temas de jQuery.

jQuery Core

La mayoría del código jQuery que escribas se ejecutará cuando el navegador haya terminado de realizar la carga de la página web. Es importante esperar a ejecutar el código hasta que la página haya cargado completamente el DOM. El DOM - Document Object Model - es una representación jerárquica de tu página web y contiene una estructura en forma de árbol de todos los elementos HTML, ficheros de script, CSS, imágenes, etc. El DOM siempre está sincronizado con la página que aparece en el navegador, por lo que si haces un cambio mediante programación del DOM (por ejemplo, con el código de jQuery), el cambio se verá reflejado en la página del navegador.

Si ejecutas tu código jQuery demasiado temprano (por ejemplo, en la parte superior de la página web), el DOM puede que no haya cargado los elementos que vas a utilizar en tu script, y es muy posible que se produzcan errores. Afortunadamente, es fácil posponer la ejecución del código hasta que el DOM esté listo con la función “ready” de jQuery:

$(document).ready(function() {
  // Code added here is executed when the DOM is ready.
});

Todo el código que agregues entre la apertura y cierre de llaves se ejecuta cuando la página esté lista para la manipulación del DOM. jQuery también viene con un acceso directo a la función “ready” para hacer más fácil escribir el código que se ejecutará cuando el DOM esté listo. Se trata de la función "$" y se puede ver en el siguiente ejemplo, cuyo  código es equivalente al ejemplo anterior:

$(function() {
  // Code added here is executed when the DOM is ready.
});

Dado que el código jQuery es a menudo específico de una página, tiene sentido añadir el código al final solamente de las páginas que lo requieren. Para hacer esto un poco más fácil, se puede añadir un "ContentPlaceHolder" en la página maestra especialmente para este propósito. Al hacer esto, las páginas que utilicen dicha página maestra tendrán una ubicación de fácil acceso para escribir el código jQuery. Podrás ver cómo se hace esto en el post de selectores.

Fuente: Beginning ASP.NET 4: in C# and VB