Como adicionar eventos a objetos jQuery para programação HTML5 e CSS3 - manequins

A biblioteca jQuery adiciona outra capacidade extremamente poderosa para JavaScript. Ele permite aos programadores HTML5 e CSS3 anexar facilmente um evento a qualquer objeto jQuery. Dê uma olhada em hover. html.

Quando você move o cursor sobre qualquer item da lista, uma borda aparece ao redor do item. Este não é um efeito difícil de conseguir no CSS comum, mas é ainda mais fácil no jQuery.

Como adicionar um evento hover

Veja o código para ver como ele funciona:

pairar. html $ (init); init da função () {$ ("li"). hover (border, noBorder);} // end init function border () {$ (this). css ("fronteira", "1px sólido preto");} função noBorder () {$ (this). css ("border", "0px none black");}

Hover Demo

alpha
beta
gamma
delta

O HTML não pode ser mais simples. É simplesmente uma lista desordenada. O JavaScript não é muito mais complexo. Consiste em três funções de uma linha:

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

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

  • O segundo é uma função a ser chamada quando o cursor sai do objeto.

• border () desenha uma borda em torno do elemento atual. O identificador $ (this) é usado para especificar o objeto atual.

• noborder () é uma função que é muito semelhante à função border () , mas remove uma borda do objeto atual.

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

$ ("li"). hover (function () {$ (this). css ("border", "1px solid black");}, function () {$ (this). css ("border", "0px none black");});

Observe que isso ainda é tecnicamente uma única linha de código. Em vez de referenciar duas funções que já foram criadas, você pode criar as funções imediatamente onde elas são necessárias. Cada definição de função é um parâmetro para o método hover ().

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 as funções lambda) estão se aproximando da programação AJAX, e esse é um desenvolvimento emocionante.

Alterando aulas ao vivo

jQuery suporta outro recurso maravilhoso.Você pode definir um estilo CSS e, em seguida, adicionar ou remover esse estilo de um elemento dinamicamente.

O código mostra quão fácil esse tipo de recurso é adicionar:

classe. html. bordered {border: 1px solid black;} $ (init); init da função () {$ ("li"). clique (toggleBorder);} // fim da função init toggleBorder () {$ (this). toggleClass ("bordered");}

Class Demo

alpha
beta
gamma
delta

Veja como fazer este programa:

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

   Todas as coisas interessantes acontecem em CSS e JavaScript, então o conteúdo real da página não é tão crítico.

2. Crie uma classe que deseja adicionar e remover.

   Você pode criar uma classe CSS chamada simplesmente desenhando uma borda ao redor do elemento. Claro, você pode fazer uma classe CSS muito mais sofisticada com todos os tipos de formatação, se preferir.

3. Link um método init ().

   Como você está começando a ver, a maioria dos aplicativos jQuery requer algum tipo de inicialização. Você pode chamar a primeira função. init ()

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

   O método init () simplesmente configura um manipulador de eventos. Sempre que um item de lista recebe o evento de clique (isto é, é clicado) a função toggleBorder () deve ser ativada. A função toggleBorder (), bem, alterna a borda.

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

   • addClass () atribui uma classe ao elemento.

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

   • toggleClass () alterna a classe (adiciona-a se não for anexada ou remova-a de outra forma).