Como adicionar eventos para jQuery objetos para HTML5 e CSS3 Programação

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.

image0.jpg

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 no jQuery.

Como adicionar um evento em foco

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

hover.html 
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.

  • fronteira() desenha uma borda em torno do elemento atual. o $ (This) identificador é utilizado para especificar o objecto corrente.

  • Noborder () é uma função que é muito semelhante à que se fronteira() função, mas ele remove uma borda do objeto atual.

    • 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 em uma longa linha:

     $ ( "LI") pairar (function () {$ (this) CSS ( "border", "preto 1px solid") -}., Function () {$ (this) CSS ( "border", "0px nenhum negro ") -}) -

    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 integrar a programação AJAX, e isso é um desenvolvimento interessante.

    Alterando as classes na mosca

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

    image1.jpg

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

    class.html 
    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. link an 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 click (ou seja, ele é clicado) a toggleBorder ()função deve ser ativada. o toggleBorder ()função, bem, alterna a fronteira.

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

    5. addClass () atribui uma classe ao elemento.

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

    7. toggleClass() muda a classe (adiciona-lo se ele não está anexado ou remove-lo de outra forma).

    Semelhante

    menu