Los selectores propios de JQuery. Seleccionando un conjunto de elementos del DOM: El uso del alias $ cuando trabajamos con JQuery.

Para finalizar la línea de post que habla de la (gran) potencia de selección de la que goza JQuery, solo nos queda ver, los selectores propios de JQuery. Como ya hemos visto en anteriores post, una de las principales características de JQuery es que podemos seleccionar un conjunto de elementos de una forma muy simple, potente y elegante. Esta funcionalidad nos la proporciona la función $ (alias de objeto JQuery), pero no solo puede hacer esto, sino que también nos permite:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
  • Selección básica con selectores CSS.
  • Selecciones por medio de atributos, hijos y contenedores.
  • Selecciones por medio de la posición.
  • Selecciones gracias a los selectores que nos proporciona JQuery.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Los selectores propios de JQuery.

JQuery, para completar la capacidad de selección de la que goza nos proporciona una serie de selectores propios. Estos selectores nos van a permitir realizar acciones que por su naturaleza o finalidad no las podemos realizar con selectores CSS. Supón que quieres seleccionar todos los checkboxes chequeados. Este tipo de acciones son las que nos permiten realizar los selectores propios de JQuery. Veamos cuales son:

Anuncio publicitario

Selectores basados en la posición. Seleccionando un conjunto de elementos del DOM.

Volvemos a hablar de JQuery y seguimos con los selectores (aunque ya queda poco). Hoy vamos a ver los selectores que se basan en la posición de un objeto dentro del árbol del DOM de la página. Recordar que para poder seleccionar un conjunto de elementos, lo hacemos mediante la función $ (alias del objeto JQuery). Esta función tiene 4 usos principales:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
  • Selección básica con selectores CSS.
  • Selecciones por medio de atributos, hijos y contenedores.
  • Selecciones por medio de la posición.
  • Selecciones gracias a los selectores que nos proporciona JQuery.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Seleccionando un conjunto de objetos del DOM en función de la posición.

Algunas veces, nos vamos a encontrar con la tesitura de querer seleccionar un conjunto de objetos del DOM, en función de la posición que tienen en la página o en función de la relación que tienen con otros objetos.

Los selectores basicos de JQuery basados en CSS. Seleccionando un conjunto de elementos del DOM.

Como ya hemos visto anteriormente, el «$» de JQuery, es un alias que nos permite acceder al objeto jQuery.

Este objeto, realiza varias funciones:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Hoy vamos a ver qué posibilidades tenemos para seleccionar conjuntos de elementos del DOM.

Seleccionando un conjunto de elementos del DOM con JQuery.

La capacidad de selección de elementos del DOM, seguramente es la mayor fortaleza de JQuery frente a otras librerías, ya que de una forma muy sencilla y elegante (y potente) podemos ir seleccionando elementos a los cuales, después, les podemos suscribir eventos, podemos operar con ellos etc..

Para seleccionar elementos, JQuery se basa en la sintaxis de las hojas de estilo CSS y además la extiende para realizar selecciones comunes y potentes.

JQuery nos proporciona distintos mecanismos para seleccionar objetos del DOM, y los podemos resumir en:

• Selección básica con selectores CSS.
• Selecciones por medio de atributos, hijos y contenedores.
• Selecciones por medio de la posición.
• Selecciones gracias a los selectores que nos proporciona JQuery.

Selección básica con selectores CSS.

Estableciendo el ciclo de vida de la funcionalidad cliente por medio del evento ready: El uso del alias $ cuando trabajamos con JQuery.

El día 29, Scott Guthrie (y muchos otros bloggers) anuncio la relación de colaboración entre JQuery y Microsoft, siendo esta distribuida con Visual Studio y el ide dotado de intellisense para que el desarrollo sea más sencillo.

Pues bien, hoy vamos a ver algún aspecto básico de esta (fabulosa) librería que seguro que de ahora en adelante nos va a ser tremendamente útil y nos va a facilitar la vida.

La función $.

El “$” de JQuery no viene a ser nada más que un alias para usar el objeto jQuery().

Esta función generalmente vamos a ver que se usa para seleccionar elementos del DOM, pero reamente las funciones que realiza son:

Llamando a Web Services por medio del objeto XMLHttpRequest de Javascript.

De un tiempo a esta parte, estamos viendo como Ajax cada vez tiene más protagonismo en nuestras aplicaciones. Las razones son varias pero las que más peso tienen seguramente son:

• La ganancia en usabilidad que proporciona.
• Lo fácil que es trabajar de esta manera.

Actualmente, existen infinidad de Frameworks que nos facilitan la vida a la hora de trabajar con Ajax o mejor dicho con Javascript como Prototype, JQuery, Microsoft Ajax Library o Microsoft Ajax etc… Por lo tanto, es normal que proliferen este tipo de aplicaciones.

La mayoría del trabajo con Ajax pasa por el uso de llamadas asíncronas a un servidor, y esto, aunque los distintos Frameworks lo gestionen de una forma u otra, lo conseguimos gracias al objeto XMLHttpRequest.

Un poco de historia.

La interfaz XMLHttpRequest fue desarrollada por Microsoft y la lanzo con Internet Explorer 5. Esta versión se publicó utilizando un objeto ActiveX, por lo tanto podía ser utilizada en cualquier entorno de desarrollo con soporte de esta tecnología (prácticamente la totalidad de plataformas de desarrollo de Microsoft).

Posteriormente la interfaz se ha ofrecido de manera integrada tanto en Internet Explorer como en otros navegadores (Firefox desde la versión 1.0, Safari desde la 1.2, Opera desde la 8.0 etc.…) de manera que el acceso a ella se realiza por medio de objetos (Javascript, VBScript etc.…) proporcionados por los navegadores.

El 27 de septiembre de 2006, el World Wide Web Consortium presento el primer borrador de una especificación estándar.

El objeto XMLHttpRequest de Javascript.

Javascript, goza de un objeto que nos permite usar la interfaz XMLHttpRequest, así que los Frameworks anteriormente nombrados (y muchos otros), se basan en este objeto para hacer llamadas síncronas o asíncronas al servidor.

Ahora vamos a ir viendo como realizar peticiones con este objeto.

Linq: Los Operadores OrderBy y OrderByDescending.

Anteriormente ya hablamos de varios operadores de linq y ahora volvemos al tema para ver dos nuevos operadores que seguramente son de los más usados.

Para los que no sepan que es linq, les recomiendo leer ¿Qué es linq?, para los demás sigamos adelante.

En este post, vamos a ver dos operadores y como he dicho seguramente van a ser de los más usados, estos son:

• OrderBy
• OrderByDescending

Como su nombre indica, estos operadores, lo que nos van a permitir es ordenar el conjunto de datos de forma ascendente (OrderBy) o descendente (OrderByDescending).

Antes de meternos en faena, decir que vamos a usar como fuente de datos un xml con información sobre países, el mismo que usamos en el post “Operadores de Linq: Como usar los operadores Take, StartsWith, EndsWith y Contains”.  El xml tiene este aspecto:

Trabajando con Ajax y las Microsoft Ajax Library (ScriptManager, UpdatePanel etc…) e IFrames: Como resolver el error «Access Denied».

No es extraño, encontrarse con escenarios de integración de aplicaciones (hablamos de aplicaciones Web) donde tenemos que integrar nuestras apps con aplicaciones de terceros.

Una solución muy extendida, es hacerlo con la ayuda de IFrames, donde en el cargamos nuestra aplicación en un sitio de terceros, de manera que la aplicación de terceros (donde integramos la nuestra) está en un servidor y nuestra aplicación esta en otro servidor.

Si nuestra aplicación, está trabajando con Ajax (y con ScriptManager, UpdatePanel etc…), seguramente cuando la ejecutemos en Internet Explorer (solo lo he probado con IE7 aunque tengo sospechas de que ocurrirá también con IE6) vamos a recibir un error cuya descripción es “Access Denied”.

¿Qué es el ScriptManager?

El ScriptManager, es un control de servidor que nos proporciona el Framework que nos va a gestionar  la descarga de los archivos necesarios de JavaScript  para poder trabajar con Ajax de forma sencilla.

Además, el ScriptManager, también inicializa valores del JavaScript etc… Así que tendremos que estar pendientes del uso que estamos haciendo de este para poder replicar su comportamiento.

¿Qué produce el error?

El error, lo produce la función getLocation del archivo MicrosoftAjax.js. El archivo MicrosoftAjax.js es uno de los que nos descarga el ScriptManager.

La función getLocation determina las coordenadas relativas de un pixel de un elemento del DOM respecto a la esquina superior izquierda del navegador. Como los distintos navegadores, esto lo calculan de distinta forma, esta función hace distinción del browser (algunos tienen en cuenta el scroll otros no etc…) que está ejecutando la página (he aquí la razón por la que únicamente falla en Internet Explorer) así que nos encontramos con que la parte de código que calcula las coordenadas para Internet Explorer, no lo hace demasiado bien.

¿Cómo solucionar el error?

Pues bien, dado que tenemos localizada la razón por la que se produce el error, la solución es sencilla, tenemos hacer un wrapper del código que produce el susodicho error.

Como eliminar el ScriptManager de nuestra página y que el desarrollo Ajax siga funcionando igual.

En este post, vamos a ver cómo eliminar el ScriptManager de nuestra página (y porque eliminarlo) y que todo nos siga funcionando ok, sin que esto sea una experiencia traumática. También veremos que es el ScriptManager y cuáles son sus funciones.

¿Qué es el ScriptManager y para qué Sirve?

El ScriptManager, es un control que nos proporciona el Framework y que nos permite trabajar de forma sencilla con Ajax (Asynchronous JavaScript And XML). Este se encarga de descargar los archivos javascript necesarios para trabajar con Ajax, renderizar el javascript necesario en función de un contexto, crear las llamadas XmlHttpRequest, llamadas a Web Services etc.

Al final lo que intenta, es que trabajar con Ajax sea sencillo y rápido, de manera que con un pequeño esfuerzo podamos obtener unos muy buenos resultados, haciendo él el “trabajo sucio”.

¿Qué ganamos si eliminamos el ScriptManager de una página?

Y ¿si el ScriptManager se dedica a facilitarnos la vida, porque vamos a querer eliminarlo? pues he aquí las razones: