Este artículo proviene de un motor de traducción automática.
Cutting Edge
Explorar enriquecido cliente de secuencias de comandos con jQuery, parte 2
Dino Esposito
Contenido
El modelo de eventos jQuery
Enlaza los controladores de eventos
Desencadenar eventos mediante programación
Métodos relacionados con el evento especiales
Evento helpers (auxiliares)
Efectos visuales
Animaciones personalizadas
Capacidades de AJAX
Almacenamiento en caché de cliente
Sumar hacia arriba
Las aplicaciones de Web eficaces requieren funciones eficaces de cliente.Los desarrolladores Web tradicionalmente han confiar en JavaScript para ofrecer esa capacidad.Sin embargo, JavaScript sin formato tiene sus limitaciones, algunos de los cuales se pueden tratar a través de las bibliotecas y orientación del objeto.
Hay muchas bibliotecas de JavaScript disponibles, pero después de un tiempo tengan todas el mismo aspecto.Si no decide dónde empezar, podría sugiero que comience aquí hacia la derecha, con jQuery.Como se analizó el mes pasado, jQuery tiene algunas capacidades útiles, incluidos selectores, filtros, establece ajustado y la característica clave, encadenado funciones.(Vea"Explorar enriquecido cliente de secuencias de comandos con jQuery, parte 1.") Este mes, examinaré algunos otros, incluidos el modelo de eventos, los efectos visuales, almacenamiento en caché y las capacidades de AJAX.
El modelo de eventos jQuery
Más a menudo de no, los exploradores tengan su propia representación de eventos.Internet Explorer tiene su propio modelo de eventos, como hacen Firefox y Safari.Por tanto, conseguir la compatibilidad de explorador entre los eventos no es ninguna tarea fácil sin la ayuda de una buena biblioteca.Posteriormente, casi cualquier biblioteca de JavaScript debe proporcionar un modelo abstracto para controlar los eventos.La biblioteca jQuery no es una excepción.
El API de control de eventos de jQuery se organizan en dos grupos de funciones.Hay algunos métodos de evento general para agregar y quitar controladores, además de una lista larga de las funciones auxiliares.Métodos generales ofrecen los cimientos para los ayudantes trabajar; y los ayudantes realice jQuery de programación sencilla y eficaz.
La figura 1Enumera los métodos que puede utilizar para enlazar y separar los controladores de eventos a los elementos coincidentes de un conjunto empaquetado.
| Figura 1 general jQuery métodos para eventos |
| (Método) | Descripción |
| enlazar | Asocia la función determinada para uno o más eventos para cada elemento contenido en el conjunto ajustado. |
| Live | Introdujo con jQuery 1.3, la función enlaza el controlador de eventos especificado a todos los elementos actuales y futuros del conjunto ajustado.Esto significa que si se agrega un nuevo elemento de DOM que cumpla las condiciones del conjunto ajustado, el elemento se automáticamente enlazará al controlador.El método de fecha de anulación al contrario y quita un controlador de eventos activos de un conjunto empaquetado. |
| uno | Funciona como enlazar, excepto que cualquier controlador de eventos se quita automáticamente después de ejecutar una vez. |
| desencadenador | Desencadena el evento especificado para cada elemento en el conjunto ajustado. |
| triggerHandler | Desencadena el evento especificado en un elemento en el conjunto ajustado y cancela las acciones de explorador predeterminado. |
| separar | Quita enlazados los eventos de cada elemento en el conjunto ajustado. |
Por cierto, es importante recordar que en argot jQuery un método es código utilizado para procesar el contenido del conjunto empaquetado de.Una función, por otro lado, es código que realiza una operación que no está dirigida específicamente a procesar el contenido de un conjunto empaquetado.
Enlaza los controladores de eventos
El método de enlace asocia un controlador para un evento determinado a todos los elementos del conjunto ajustado.La firma completa del método de enlace es esto:
bind(eventName, eventData, eventHandler)
El primer argumento es una cadena y indica para controlar el evento.El segundo argumento representa los datos de entrada entrantes con el evento.Por último, el tercer argumento es la función de JavaScript que se va a enlazar.
Ya jQuery ofrece un modelo de eventos abstractos, es importante ver la lista de eventos compatibles.La lista completa es en la figura 2 .
| Figura 2 eventos de admitidos en jQuery |
| Evento | Se desencadena cuando |
| beforeunload | Una ventana del explorador se descarga o se cierra por el usuario. |
| blur | Un elemento pierde el foco porque cualquier el usuario hace clic fuera de o con fichas inmediatamente. |
| Cambiar | El elemento pierde el foco y su valor se ha modificado desde que había obtenido enfoque. |
| Haga clic en | El usuario hace clic en el elemento. |
| DblClick | El usuario hace doble clic en el elemento. |
| Error | El objeto window indica que un error, normalmente se detectó un error de JavaScript. |
| enfoque | Un elemento recibe el foco bien a través de la exploración del mouse (ratón) o ficha. |
| KeyDown | Se presiona una tecla. |
| KeyPress | Se presiona y se libera una tecla.Un keypress se define como un sucesivos eventos keydown y keyup. |
| KeyUp | Se suelta una tecla.Este evento sigue keypress. |
| cargar | El elemento y todo su contenido ha terminado de cargar. |
| MouseDown | Se presiona un botón del mouse (ratón). |
| MouseEnter | El mouse entra en el área de un elemento. |
| MouseLeave | El mouse sale del área de un elemento. |
| MouseMove | Se mueve el mouse (ratón) mientras está sobre un elemento. |
| MouseOut | Se mueve el mouse (ratón) fuera de un elemento.A diferencia de mouseleave, este evento se desencadena también cuando se mueve el mouse (ratón) dentro o fuera de los elementos secundarios. |
| MouseOver | Se mueve el mouse (ratón) en un elemento.A diferencia de mouseenter, este evento también se activa cuando el mouse (ratón) se mueve dentro o fuera de los elementos secundarios. |
| MouseUp | Se suelta el botón del mouse (ratón).Este evento a continuación haga clic en. |
| Cambiar el tamaño | Cambie el tamaño de un elemento. |
| desplazamiento | Se desplaza un elemento. |
| Seleccione | El usuario selecciona texto en un campo de texto. |
| Enviar | Se envía un formulario. |
| descargar | Una ventana del explorador se descarga. |
Debido las diferencias de explorador y el nivel de abstracción proporcionada por la biblioteca, la lista es menos obvia que puede parecer un primer vistazo.Por ejemplo, cambiar y seleccione los eventos dirección muy distintos escenarios.El evento de cambio hace referencia a un cambio en el valor de un elemento de entrada, incluyendo las listas de cuadros de texto y la lista desplegable.El evento seleccione simplemente hace referencia al texto seleccionado en un elemento textarea de entrada o.
También existen diferencias sutiles entre los pares de eventos MouseOver/MouseEnter y MouseOut/MouseLeave.Tienen casi la misma descripción y diferenciarse sólo debido a que mouseover y mouseout también se desencadenan cuando el usuario se mueve dentro y fuera de los elementos secundarios.Para los elementos sin nodos secundarios, estos eventos son equivalentes.
Es posible que registrar el mismo controlador de JavaScript para varios eventos.Puede hacerlo, separando los nombres de eventos con un espacio en blanco.El siguiente ejemplo alterna un estilo CSS cuando el mouse (ratón) entra o deja una etiqueta DIV con un estilo determinado:
$("div.sensitiveArea").bind("mouseenter mouseleave",
function(e) {
$(this).toggleClass("hovered");
}
);
El segundo argumento del método enlace es opcional y, si se especifica, indica los datos definidos por el usuario que se pasan al controlador de. Figura 3 se ilustra cómo se puede alternar el estilo CSS de un cuadro de texto mediante un controlador de JavaScript bastante genérico.
Estilo de cuadro de texto de la figura 3 alternar
<script type="text/javascript">
$(document).ready(
function() {
$("#TextBox1").bind("focus",
{cssStyle: "focusedTextBox"},
setCSS);
$("#TextBox1").bind("blur",
{cssStyle: "focusedTextBox"},
setCSS);
}
);
function setCSS(e)
{
var name = "#" + e.target.name;
$(name).toggleClass(e.data.cssStyle);
}
</script>
Observe que el código anterior es meramente ilustrativos de la función de enlace y es posible que no funcione correctamente como forma de cambiar los estilos.Es preferible utilizar la: centrarse pseudo-class para agregar un estilo especial a un elemento mientras el elemento tiene el foco.Los exploradores más recientes será compatible con él.Controlador de JavaScript es una función que se declara y recibe una estructura de datos de evento.Este objeto tiene los miembros aparecen en la figura 4 .
| Figura 4 los miembros de la jQuery Event (objeto) |
| Miembro | Descripción |
| tipo | Devuelve el nombre del evento, como "haga clic en" |
| destino | Devuelve una referencia al elemento de DOM que emite el evento |
| pageX | Devuelve la coordenada X del mouse (ratón) relativa al documento |
| pageY | Devuelve la coordenada Y del mouse (ratón) relativa al documento |
| preventDefault | Cancela la acción predeterminada que del explorador tardaría después del evento |
| stopPropagation | Detiene la propagación, pero no impedir que de acción el explorador |
Cabe destacar que la propiedad de destino devuelve un objeto de referencia de DOM, no un jQuery ajustado conjunto.Para averiguar el IDENTIFICADOR del elemento, se debe invocar su propiedad id o nombre.El controlador de recupera los datos personalizados que se pasa a través de su propiedad expando de datos.
Dos métodos complete la definición de objeto de datos de evento.El método preventDefault detiene el explorador de realizar la acción predeterminada que normalmente necesitaría después del evento.Por ejemplo, si se llama a preventDefault en un controlador de envío, se produciría el ningún envío del formulario.El método preventDefault no detener la propagación del evento a través de pila del objeto, sin embargo.
En cambio, el método stopPropagation detiene la propagación de eventos, pero no impide la acción.Si desea detener la propagación de eventos y evitar que la acción predeterminada, no se llama a cualquiera de estos métodos; sólo devuelve false desde el controlador de eventos.
Los controladores de los adjuntos mediante el método de enlace pueden se separarán mediante el método unbind.El método toma dos parámetros opcionales, el nombre de los eventos y el controlador.Si no se especifica ninguna, todos los controladores se quitan todos los elementos del conjunto ajustado.
Desencadenar eventos mediante programación
El desencadenador de método (consulte la figura 1 ) indica jQuery para invocar los controladores registrados con el evento especificado.Para simular el usuario hace clic en un botón determinado, utilice esto:
$("#Button1").trigger("click");
El código no hacer nada si no se registra ningún controlador de JavaScript con el evento click del elemento.
El triggerHandler método difiere del desencadenador de dos maneras. En primer lugar, el triggerHandler método Asimismo impide que predeterminado acción el explorador. En segundo lugar, el método afecta a sólo un elemento de un elemento, no todo el conjunto ajustado. Si el conjunto ajustado contiene varios elementos coincidentes, sólo la primera tiene el controlador desencadena para el evento especificado.
Si utiliza el método triggerHandler para mediante programación desencadenar el evento enfoque en un campo de entrada, tal como se se observa a continuación, ejecuta algún controlador registrado, pero no ocurre la acción predeterminada de mover el foco de entrada en el campo.
$("#TextBox1").triggerHandler("focus");
La figura 5 muestra lo que aspecto.
La figura 5 Desencadenadoras el evento enfoque mediante programación
Métodos relacionados con el evento especiales
La biblioteca jQuery proporciona tres métodos de evento utilizadas: listo, coloque el puntero del mouse, activar o desactivar. El método listo toma una función y ejecuta cuando el DOM esté listo para ser recorren y manipular mediante código:
$(document).ready(
function() {
...
}
);
Las bibliotecas necesitan esta capacidad, que reemplaza el evento onload del objeto de ventana del explorador.El evento onload ocurre demasiado tarde, cuando también se han cargado todas las imágenes.El evento listo, por otro lado, se desencadena cuando la página y la biblioteca han totalmente inicializados.
En la función de desplazamiento coloque el código que desea ejecutar cuando el usuario entra y sale de un conjunto de elementos de la página.La función activable acepta dos controladores.La primera se ejecuta cuando se sitúa el mouse (ratón) sobre un elemento en el conjunto ajustado y el segunda se ejecuta cuando el mouse sale de área del elemento.
Por último, la función alternar realiza una tarea incluso más inteligente.Toma dos o más controladores y ejecuta los Asimismo como el usuario hace clic en.En otras palabras, el primer clic en un elemento coincidente ejecuta el primer controlador, el segundo clic ejecuta el controlador de segundo y así sucesivamente.Cuando se alcanza el final de la lista de controlador, todos los clics subsiguientes ejecutar volver desde la primera función en la lista.
Evento helpers (auxiliares)
Para reforzar la idea de su uso extremo, la biblioteca jQuery incluye una lista de métodos auxiliares para simplificar el enlace de controladores de eventos comunes.Los ayudantes tienen dos formas: con y sin un parámetro de la función.
Los ayudantes que aceptan un parámetro reciben una función de JavaScript a ejecutar cuando se desencadena el evento.Si no se especifica ningún parámetro, el método sólo desencadena el evento determinado en cualquier elemento en el conjunto ajustado.Figura 6 muestra la lista de los ayudantes compatibles y distingue entre métodos enlazador y los métodos de desencadenador.
| Cuaderno de la figura 6 y aplicaciones auxiliares de evento de desencadenador |
| Desencadenar (método) (desencadenadores dice eventos en el conjunto ajustado.) | Método enlazador enlaces la función especificada al evento asociado del que coinciden con los elementos. |
| blur | Blur(FN) |
| Cambiar | Change(FN) |
| Haga clic en | Click(FN) |
| DblClick | DblClick(FN) |
| Error | Error(FN) |
| enfoque | focus(FN) |
| KeyDown | KeyDown(FN) |
| KeyPress | KeyPress(FN) |
| KeyUp | KeyUp(FN) |
| Load(FN) | |
| MouseDown(FN) | |
| MouseMove(FN) | |
| MouseOut(FN) | |
| MouseOver(FN) | |
| MouseUp(FN) | |
| Resize(FN) | |
| scroll(FN) | |
| Seleccione | SELECT(FN) |
| Enviar | Submit(FN) |
| Unload(FN) |
El código siguiente registra un evento click para un botón determinado.El enlace entre el evento y el controlador se ejecuta tan pronto como el documento está totalmente cargado y listo para pueden manipular mediante programación.
$(document).ready( function() {
$("#btnProcess").click(
function(e) {
this.text("Please wait ... ");
}
);
});
Algunos eventos como el desplazamiento, tamaño y eventos del mouse (ratón) tener sentido sólo si se desencadena una acción explícita al usuario.Estos eventos no tienen un método de desencadenador, tal como se muestra en la figura 6 .
Efectos visuales
Uno de los factores más responsables de la popularidad de la biblioteca jQuery es el motor integrado de efectos visuales.En la biblioteca, encontrará un eficaz motor para crear animaciones personalizadas además unas instalaciones para implementar rápidamente efectos comunes como atenuación y deslizante.
Efectos predefinidos pueden dividirse en tres grupos según a los atributos CSS actúan en: visibilidad, deslizante y la atenuación.Figura 7 se muestran todos los efectos disponibles de forma nativa.
| La figura 7 efectos visuales |
| Efecto de visibilidad | Descripción |
| Mostrar | Activa la visibilidad de los elementos en el conjunto ajustado |
| Ocultar | Desactiva la visibilidad de los elementos en el conjunto ajustado |
| Alternar | Activa o desactiva la visibilidad de los elementos en el conjunto ajustado |
| Efecto de deslizamiento | Descripción |
| slideDown | Muestra los elementos coincidentes aumentando su alto progresivamente |
| slideUp | Oculta los elementos coincidentes por reducir su alto progresivamente |
| slideToggle | Muestra u oculta todos los elementos coincidentes inverting actual deslizante configuración |
| Efecto de atenuación | Descripción |
| fadeIn | Fundido de entrada los elementos coincidentes al reducir su opacidad progresivamente |
| fadeOut | Atenúa los elementos coincidentes al aumentar su opacidad progresivamente |
| fadeTo | Ésta se atenúa la opacidad de todos los elementos coincidentes para una opacidad especificado |
Todos los métodos en la figura 7 se aplican a cualquier elemento coincidente en un conjunto empaquetado.Los métodos de visibilidad actúan sobre el atributo CSS de la presentación y mostrar u ocultar elementos usando una animación integrada interesante.Por ejemplo, en el siguiente código unveils un panel de HTML como el usuario haga clic en el botón:
$("btnShowOrders").click(
function(e) {
$("#panelOrders").show(2000);
}
);
La animación dura dos segundos en completarse. Argumentos opcionales que puede especificar para métodos de visibilidad son la velocidad de la animación y una devolución de llamada para invocar al finalizar. El tipo de animación se codifica y progresivamente muestran el contenido de la esquina superior izquierda.
Métodos de control deslizante funcionan en el atributo de alto CSS de elementos coincidentes. El método slideDown aumenta el alto de un elemento en un bucle para que la presentación ocurre al mostrar el elemento progresivamente. El método slideUp es el proceso inverso y oculta el elemento mediante el deslizamiento que, desde el alto real en cero.
Los métodos de atenuación siguen un modelo análogo a deslizamiento de los métodos. Admite opcionales velocidad y la finalización devolución de llamada y mostrar u ocultar elementos bucle en el atributo de opacidad CSS (consulte la figura 8 ).
Figura 8 atenuación
$("#btnShowOrders").click(
function(e)
{
// Hide the current panel.
$("#panelOrders").fadeOut(1000);
populateOrderPanel();
// Show new content and when done
//apply some CSS styles
// to denote the new content.
$("#panelOrders").fadeIn(2000,
function() {
$("#panelOrders").css(...);
}
);
}
);
El ejemplo anterior muestra cómo atenuar un panel de HTML existente, actualizarlo mientras ocultos y después mostrarlos, nuevo con fade-in animación. Nota puede indicar la velocidad deseada con una duración explícita en milisegundos o recurrir a una cadena que representa uno de tres velocidades predefinidas: lenta, normal o rápida.
Animaciones personalizadas
Todos los efectos visuales que aparecen en la figura 6 se implementan en la parte superior del motor de animación jQuery. El corazón de este motor es la función animar:
function animate( prop, speed, easing, callback )
{
…
}
El primer argumento a la función es una matriz de pares de propiedad o valor donde la propiedad hace referencia a un atributo CSS. La función simplemente anima la propiedad CSS de cada elemento coincidente de su valor actual en el valor especificado.
Argumentos adicionales, opcionales que puede especificar son la velocidad de la animación y la devolución de llamada de finalización. El argumento easing indica el nombre del efecto easing que desea utilizar durante la transición. Existen dos valores integrados: lineal y swing. Otras opciones easing pueden agregarse mediante un complemento.
Ésta es una llamada de ejemplo para el método animar:
$("#Element1").animate(
{ width: "70%",
opacity: 0.4,
borderWidth: "10px"
},
3000);
Al final de la animación, el elemento coincidente tengan el ancho especificado, opacidad y ancho de borde. La animación finalizará en tres segundos y modificar atributos de la CSS de sus valores actuales hacia arriba o hacia abajo para el valor del objetivo.
Observe que las propiedades CSS deben especificarse mediante camelCase, es decir, el primer carácter es en minúsculas y el primer carácter de cada palabra siguiente es mayúsculas. Por ejemplo, para animar el borde de un elemento debe use "BorderWidth" en lugar del CSS original propiedad nombre del ancho de borde.
El método animar también admite las animaciones relativas, tales como aumentar (o reduciendo) un valor de propiedad mediante un porcentaje o un valor fijo. Por ejemplo, el fragmento de código siguiente muestra cómo aumentar el ancho de un elemento en un 20 por ciento y oscurecer su contenido por un valor de 0.4. También he especificado que se deben aplicar todos los cambios en dos segundos.
$("#Panel1").animate(
{ width: "+=20%",
opacity: "-=0.4"
},
2000);
Por último, observe que todas las animaciones en jQuery automáticamente se ponen en cola y ejecutan en orden, uno después de la siguiente. Las animaciones en cola son la condición previa necesaria para poder varias llamadas en elementos de un conjunto empaquetado de la cadena. Sin embargo, las animaciones en la cola, son sólo el comportamiento predeterminado. Como programador, tiene las herramientas necesarias para realizar algunas animaciones ejecutar en paralelo.
Para obtener algunos paralelismo, debe crear una cola de animación mediante una sobrecarga del método animar:
function animate( prop, options )
{
…
}
Como en la firma anterior, el primer argumento indica el conjunto de atributos de estilo que desea animar y los valores que desee para llegar a.
El segundo argumento indica un conjunto de opciones con la que se configura la animación. Las opciones incluyen duración, que simplifica, devolución de llamada de finalización y un valor booleano para indicar si se trata de una animación en la cola, true es el valor predeterminado.
Estableciendo el atributo de cola en Falso en las opciones de la llamada animar, ejecute la animación inmediatamente sin cola. Consideremos el siguiente fragmento de código:
$("#div1").animate({ width: "90%" }, {queue:false, duration:5000 });
$("#div1").animate({ fontSize: '10em' }, 1000);
$("#div1").animate({ borderWidth: 5 }, 1000);
La primera animación no se coloca en la cola y se ejecuta inmediatamente. La segunda no está en cola pero se considera la primera en la cola para ejecutarlo como. El resultado es que las dos primeras animaciones iniciar juntos. La tercera animación está en la cola y comienza en cuanto finaliza la segunda animación: un segundo más tarde. Dado que la primera animación toma cinco segundos, la animación de borde también se ejecuta en paralelo con la animación que cambia el ancho del elemento.
Capacidades de AJAX
¿Cuál sería una biblioteca de JavaScript moderno sin una infraestructura sólida para las llamadas asincrónicas de AJAX? En jQuery, la compatibilidad de AJAX se según la función de ajax, a través del cual se pueden controlar todos los aspectos de una solicitud Web. Ésta es una manera común de invocar la función de ajax:
$.ajax(
{
type: "POST",
url: "getOrder.aspx",
data: "id=1234&year=2007",
success: function(response) {
alert( response );
}
}
);
La función acepta una lista de parámetros que se agrupan en un único objeto. Opciones factibles son tipo, dirección url, datos, dataType, caché, asincrónica, nombre de usuario, contraseña, tiempo de espera y ifModified.
En concreto, el parámetro dataType indica el tipo de la respuesta esperado, mientras que el parámetro de caché (si establece en false) obliga a solicita recursos no para almacenarse en memoria caché por el explorador. Otros parámetros como tipo, contraseña, nombre de usuario y url son explican por sí mismas.
Las opciones de la función de ajax también incluyen una serie de devoluciones de llamada opcionales que se va a invocar antes de cualquiera de los pasos más importantes para el ciclo de vida del objeto subyacente XMLHttpRequest. La devolución de llamada correcta indica la devolución de llamada de finalización. La función de devolución de llamada recibe la respuesta como su único argumento. Otros devoluciones de llamada son error, beforeSend y complete. La devolución de llamada completa se ejecuta al final de la solicitud cuando se han llamado a devoluciones de llamada el éxito o error.
Curiosamente, la función de ajax enumera una devolución de llamada para preprocesar la respuesta Web antes de se devuelva al código de llamada. Esta devolución de llamada es dataFilter y controla la respuesta sin formato descargada mediante XMLHttpRequest. El propósito de la devolución de llamada es filtrar la respuesta de forma que sólo saneados datos compatibles con el tipo de datos esperados se devuelve al llamador. La función de devolución de llamada recibe dos argumentos: los datos sin procesar devuelven desde el servidor y el valor asignado al parámetro dataType.
Cuando se utiliza la biblioteca jQuery, es no usar la función de ajax directamente. Con más frecuencia podría acabar con algunos de los ayudantes de AJAX como getScript, carga o getJSON.
El código siguiente muestra cómo cargar un archivo de secuencia de comandos a petición. La secuencia de comandos se ejecuta automáticamente tras cargar:
$.getScript("sample.js");
Otra pieza bastante útil de código es la función de carga. La función de carga descarga HTML y automáticamente inyecta en el DOM actual El código siguiente muestra cómo rellenar un menú mediante programación:
$("#menu").load("menu.aspx");
El contenido de la dirección URL se adjunta al subárbol DOM en los elementos que coinciden con el selector. El método de carga predeterminado es una solicitud GET, pero puede cambiar, en POST simplemente agregando un argumento de datos, como puede ver aquí:
$("#links").load(
"menu.aspx",
{ topElement: "Books" },
function()
{
// completion callback code
}
);
Como se indicó anteriormente, también se puede especificar una devolución de llamada para ejecutar tras la finalización de la descarga.
También es posible especificar un selector jQuery en la dirección URL para que el marcado entrante es pre-filtered para seleccionar sólo los elementos coincidentes. La sintaxis simplemente implica que se agrega una expresión de selector a la dirección URL. Éste es un ejemplo que extrae <li> todos los elementos de un elemento de <ul> denominado menuItems:
$("#links").load("/menu.aspx ul#menuItems li");
Por último, han Obtenga, contabilizar y getJSON funciones para realizar directamente GET y publicaciones y obtener JSON contenido de una dirección URL.
Almacenamiento en caché de cliente
Una caché de cliente es esencial en código de JavaScript triviales. En este contexto, una memoria caché es una matriz donde los programadores pueden almacenar datos que hace referencia a un elemento de DOM determinado. En el código siguiente, se invoca una dirección URL para determinar si el contenido de un cuadro de texto es válido y, a continuación, la respuesta es almacenada en caché en un elemento de matriz denominado IsValid.
var url = "...";
var contentIsValid = $.get(url);
$("#TextBox1").data("IsValid", contentIsValid);
Cada elemento de DOM puede tener su propia caché local. En jQuery, utilice el método de datos de los elementos de un conjunto empaquetado.
Para leer el contenido de la tienda, se utiliza la misma función de datos con sólo un argumento, el nombre del elemento:
alert($("#grid").data("Markup"));
Se pueden quitar elementos agregados a la caché mediante el uso de la función removeData.
Sería interesante saber por qué es más conveniente utilizar la función de datos de propiedades expando. Una propiedad expando agrega información personalizada a un elemento de DOM mediante un atributo HTML no estándar. Es definitivamente un tipo de almacenamiento en caché del cliente, aunque algunos exploradores no es posible que igual los atributos personalizados. En este caso, suele recurrir a utilizando los atributos estándar, como alt o rel de una manera no estándar. Un marco de almacenamiento en caché del cliente como la función de datos almacena datos en objetos de JavaScript antiguos y mantiene un vínculo con el elemento de DOM de destino con un diccionario. No realiza esta forma, es posible entran en conflicto con los exploradores.
Sumar hacia arriba
JavaScript permaneció casi sin cambios durante unos diez años. Mientras una revisión significativa del idioma está en orden, es de alguien adivine cuando se estará totalmente definido y, lo que es más importante, si exploradores admiten. Año anterior, se ha alcanzado un consenso alrededor de una versión de idioma que se encuentra en entre el idioma actual y el idioma de ECMAScript 4 nuevo propuesto que era significativamente diferente desde JavaScript de hoy. El nuevo proyecto que debe generar JavaScript 2.0 se denomina Harmony.
Cualquier aspecto en, las bibliotecas de entre exploradores parecen ser la manera confiable sólo para planear el desarrollo de cliente eficaces y efectivo, al menos para los próximos años. En este contexto, jQuery es una excelente biblioteca que se se integra en herramientas de desarrollo de próximas Microsoft Web. Eche un vistazo Cerrar a él; va ser congratula que hizo! ¡ Feliz jQuery codificación!
Envíe sus preguntas y comentarios para Dino a dirección cutting@microsoft.com.
Dino Esposito es un arquitecto en IDesign y el coautor de Microsoft .NET: Architecting Applications for the Enterprise (Microsoft Press, 2008). Basándonos en Italia, Dino es un orador frecuente en eventos del sector en todo el mundo. Puede combinar su blog en weblogs.asp. NET/despos.