A biblioteca jQuery adiciona outro recurso extremamente poderoso para javascript. Ele permite que os programadores HTML5 e CSS3 para anexar facilmente um evento para qualquer objeto jQuery. Dê uma olhada em hover.html.

Quando você move o cursor sobre qualquer item da lista, uma borda aparece em torno do item. Este não é um efeito difícil de alcançar em CSS comum, mas é ainda mais fácil em jQuery.

Como adicionar um evento em foco

Olhe para o código para ver como ele funciona:

Hover Demonstração
alfa
beta
gama
delta

O HTML não poderia ser mais simples. É simplesmente uma lista desordenada. O javascript não é muito mais complexa. É composto de três funções de uma linha:

• nisso() é chamado quando o documento está pronto. Faz objetos jQuery de todos os itens da lista e atribui o evento para eles. o flutuar() função aceita dois parâmetros:

• A primeira é uma função a ser chamada quando o cursor passa sobre o objeto.

• A segunda é uma função a ser chamada quando o cursor deixa o objeto.

Video: Image Slider (1/3) HTML 5 CSS 3 and JavaScritp

Neste exemplo, foram usadas três funções diferentes. Muitos programadores jQuery preferem usar funções anônimas (às vezes chamado lambda funções) para incluir toda a funcionalidade de uma linha longa:

 $ ("li") .hover (function () {$ (this) .css ("fronteira", "1 px sólido preto") -}, function () {$ (this) .css ("fronteira", "0px none preto") -}) -

Note-se que este ainda é tecnicamente uma única linha de código. Em vez de fazer referência a duas funções que já foram criados, você pode construir imediatamente as funções onde eles são necessários. Cada definição de função é um parâmetro para o flutuar() método.

Se você é um cientista da computação, você pode argumentar que este não é um exemplo perfeito de uma função lambda, e você estaria correto. O importante é notar que algumas idéias de programação funcional (como funções lambda) estão rastejando em programação geral relativa ao AJAX, e isso é um desenvolvimento interessante.

Alterar aulas on the fly

jQuery suporta outra característica maravilhosa. Você pode definir um estilo CSS e, em seguida, adicionar ou remover esse estilo de um elemento dinamicamente.

Video: Shake Effect Login Form using HTML 5, CSS 3 & jQuery

O código mostra como é fácil este tipo de recurso é adicionar:

classe de demonstração
alfa
beta
gama
delta

Aqui está como fazer este programa:

1. Comece com uma página HTML básico.

   Todo o material interessante acontece em CSS e javascript, para que o conteúdo real da página não são tão crítica.

2. Crie uma classe que você deseja adicionar e remover.

   Você pode construir uma classe CSS chamada que simplesmente desenha uma borda em torno do elemento. Claro, você pode fazer uma classe CSS muito mais sofisticado, com todos os tipos de formatação, se preferir.

3. Vincular uma nisso() método.

   Como você está começando a ver, a maioria das aplicações jQuery exigir algum tipo de inicialização. Você pode chamar a primeira função. nisso()

4. Ligar para toggleBorder () função sempre que o usuário clica em um item da lista.

   o nisso()método simplesmente configura um manipulador de eventos. Sempre que um item da lista recebe o evento clique (ou seja, ele é clicado) a toggleBorder ()função deve ser activado. o toggleBorder ()função, bem como, alterna a fronteira.

   jQuery tem vários métodos para manipular a classe de um elemento:

5. addClass () atribui uma classe para o elemento.

6. removeClass () remove uma definição de classe de um elemento.

7. toggleClass() comuta a classe (adiciona-se que não é actualmente ligado ou remove-lo de outra forma).