IBM - Apresentando jQuery

Click here to load reader

  • date post

    13-Jul-2015
  • Category

    Documents

  • view

    2.863
  • download

    0

Embed Size (px)

Transcript of IBM - Apresentando jQuery

  • jQuerywrite less, do more

  • http://www.estatuaslimitededition.com/dc-direct-f8/lancamento-dc-direct-two-face-busto-12-t1739.htmDuas partes

  • #1Um pouco de Javascript

  • Erros encontradosJavascript ObstrusivoCdigo no cross-browser

  • Seu cdigo precisa ser Cross-browser

  • Cross-browser

  • Se no encontrar id, busca por name! (IE6)

  • Cad o id?

  • http://techgamesblog.com/happy-computer-shopping/

  • #2jQuery

  • O que ?An open source JavaScript library that simplifies the interaction between HTML and JavaScript.

  • IBMMSNBCAmazonAOLTechnoratiDrupalWordpressDiggBBCSourceForgeIntuitSalesforceFeedBurnerWB Recordsentre outros ...Quem usa?

  • Por que jQuery?

  • Events (click, hover, change..)DOM Manipulation (append, remove..)Effects (hide, show, fadeOut..)Ajax(load, get, post..)Features

  • Como usar?

  • 1 Encontre um elemento

    2 Faa algo com ele

  • Seletores

  • Seletores$(#mydiv, .class, element )

  • Mtodos jQuery

    Adicionando elementos:append(), before(), after()..

    Atributos:css(), attr(), html(), val(), addClass()..

    Eventos:bind(), trigger(), unbind(), click()..Efeitos:show(), fadeOut(), toggle()..

    DOM:find(), is(), prevAll(), next(), hasClass()..

    Ajax:get(), post(), getJson(), load(), ajax()..

  • Mtodos jQuery

  • Manipulando o DOMContexto

  • Mtodos encadeadosAdiciona uma classe css ao divFaz com que o div desaparea devagar

  • Efeitos(hide, show, fadeOut, fadeIn..)

  • Ajax

  • Pluginhttp://omundoemumajanela.blogspot.com/2010/09/lego.html

  • Don`t Repeat Yourself

  • Criando um plugin$('p').myplugin();Encontre todos os elementos p e aplique o myplugin.

  • jquery.myplugin.js

  • jQueryUI

  • Ferramentas para TestesTeste Unitrio

  • Ferramentas para Testeshttps://github.com/velesin/jasmine-jquery

  • Alguns livros

  • Alguns links teis

  • Obrigado!

    **