La biblioteca jQuery añade otra capacidad muy poderosa para javascript. Permite HTML5 y CSS3 programadores se conectan fácilmente a un evento para cualquier objeto jQuery. Echar 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 vuelo estacionario

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

demostración de la libración
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 compleja. Se compone de tres funciones de una sola línea:

• en eso() se llama cuando el documento está listo. Esto 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:

  Video: 16. Tutorial jQuery: Crear, copiar y remover elementos

• La primera es una función a ser llamada cuando el cursor pasa sobre el objeto.

• La segunda es una función a ser llamada cuando el cursor sale del objeto.

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

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

Tenga en cuenta que esto sigue siendo 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 más 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, se podría 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 las funciones lambda) está en aumento en la corriente principal de programación AJAX, y eso es un desarrollo emocionante.

Modificación de las 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 muestra lo fácil este tipo de función es añadir:

clase de demostración
alfa
beta
gama
delta
Video: Curso de jQuery en español, Cómo Implementar el Evento click

Aquí está cómo hacer que este programa:

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

   Todo el material interesante que 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 desea agregar y quitar.

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

3. enlace una en eso() método.

   Como usted está comenzando a ver, la mayoría de las aplicaciones jQuery requieren algún tipo de inicialización. 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 configura 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 activada. los toggleBorder ()función, así, cambia la frontera.

   jQuery dispone de 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() cambia la clase (lo agrega si no está conectado actualmente o lo elimina de otro modo).