La librería jQuery añade otra muy potente capacidad de javascript. Permite HTML5 y CSS3 programadores para fijar fácilmente un evento para cualquier objeto jQuery. Echa un vistazo a hover.html.

Al mover el cursor sobre cualquier elemento de la lista, aparece un borde alrededor del elemento. Esto no es un efecto difícil de lograr en CSS ordinaria pero es aún más fácil en jQuery.

Cómo agregar un evento de la libración

Mira el código para ver cómo funciona:

Hover demo
alfa
beta
gama
delta

El HTML no podría ser más simple. Se trata simplemente de una lista desordenada. El javascript no es mucho más complejo. Se compone de tres funciones de una sola línea:

• en eso() se llama cuando el documento está listo. Hace que los objetos jQuery de todos los elementos de la lista y se une al evento para ellos. los flotar () función acepta dos parámetros:

• La primera es una función que se llamará cuando el cursor pasa sobre el objeto.

• El segundo es una función que se llamará cuando el cursor sale del objeto.

En este ejemplo, se utilizaron tres funciones diferentes. Muchos programadores jQuery prefieren utilizar funciones anónimas (a veces llamadas lambda funciones) para encerrar toda la funcionalidad en una línea larga:

 $ ("li") flotar (function () {$ (this) .css ("frontera", "negro sólido 1px") -}., function () {$ (this) .css ("frontera", "0px ninguno negro ") -}) -

Tenga en cuenta que esto es todavía técnicamente una sola línea de código. En lugar de hacer referencia a dos funciones que ya se han creado, se puede construir inmediatamente las funciones donde se necesitan. Cada definición de función es un parámetro a la flotar () método.

Si usted es un científico de la computación, es posible argumentar que esto no es un ejemplo perfecto de una función lambda, y que sería correcto. Lo importante es darse cuenta de que algunas ideas de programación funcional (como funciones lambda) se están arrastrando en la corriente principal de programación AJAX, y eso es un desarrollo emocionante.

Cambio de clases sobre la marcha

jQuery es compatible con otra característica maravillosa. Se puede definir un estilo CSS y luego agregar o quitar ese estilo de un elemento de forma dinámica.

El código de muestra lo fácil este tipo de función es agregar:

Clase de demostración
alfa
beta
gama
delta

Aquí está cómo hacer este programa:

1. Comience con una página HTML básico.

   Todo el material interesante sucede en CSS y javascript, por lo que el contenido real de la página no son tan críticos.

2. Crear una clase que desee agregar y quitar.

   Usted puede construir una clase CSS que se llama simplemente dibuja un borde alrededor del elemento. Por supuesto, usted puede hacer una clase CSS mucho más sofisticado con todo tipo de formato, si lo prefiere.

3. Vincular un en eso() método.

   Como usted está comenzando a ver, la mayoría de las aplicaciones de jQuery requieren algún tipo de inicialización. Usted puede llamar a la primera función. en eso()

4. Llama a toggleBorder () la función cada vez que el usuario hace clic en un elemento de la lista.

   los en eso() método simplemente establece un controlador de eventos. Cada vez que un elemento de la lista recibe el evento click (es decir, se hace clic) el toggleBorder ()función debe ser activado. los toggleBorder ()función, así, cambia la frontera.

   jQuery tiene varios métodos para la manipulación de la clase de un elemento:

5. addClass () asigna una clase de elemento.

6. removeClass () elimina una definición de clase de un elemento.

7. toggleClass() interruptores de la clase (añade si no está unido actualmente o lo elimina de otro modo).