IBM - Apresentando jQuery

48

Click here to load reader

Transcript of IBM - Apresentando jQuery

Page 1: IBM - Apresentando jQuery

jQuery“write less, do more”

Page 3: IBM - Apresentando jQuery

#1

Um pouco de Javascript

Page 4: IBM - Apresentando jQuery
Page 5: IBM - Apresentando jQuery
Page 6: IBM - Apresentando jQuery

Erros encontrados

Javascript Obstrusivo

Código não é cross-browser

Page 7: IBM - Apresentando jQuery
Page 8: IBM - Apresentando jQuery
Page 9: IBM - Apresentando jQuery
Page 10: IBM - Apresentando jQuery

Seu código precisa ser Cross-browser

Page 11: IBM - Apresentando jQuery

Cross-browser

Page 12: IBM - Apresentando jQuery

Se não encontrar “id”, busca por “name”! (IE6)

Page 13: IBM - Apresentando jQuery

Cadê o “id”?

Page 14: IBM - Apresentando jQuery

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

Page 15: IBM - Apresentando jQuery

#2

jQuery

Page 16: IBM - Apresentando jQuery

O que é?

An open source JavaScript library that simplifies the interaction between HTML and JavaScript.

Page 17: IBM - Apresentando jQuery

IBM

MSNBC

AmazonAOL

Technorati

Drupal

Wordpress

DiggBBC

SourceForge Intuit

Salesforce

FeedBurner

WB Records

entre outros ...

Quem usa?

Page 18: IBM - Apresentando jQuery

Por que jQuery?

Page 19: IBM - Apresentando jQuery
Page 20: IBM - Apresentando jQuery

•Events (click, hover, change..)

•DOM Manipulation (append, remove..)

•Effects (hide, show, fadeOut..)

•Ajax(load, get, post..)

Features

Page 21: IBM - Apresentando jQuery

Como usar?

Page 22: IBM - Apresentando jQuery

1º Encontre um elemento

2º Faça algo com ele

Page 23: IBM - Apresentando jQuery

$(“#div”) $(“.class”)

$(“element”)

Seletores

Page 24: IBM - Apresentando jQuery
Page 25: IBM - Apresentando jQuery
Page 26: IBM - Apresentando jQuery

Seletores$(“# mydiv, .class, element ”)

Page 27: IBM - Apresentando jQuery

Métodos 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()..

Page 28: IBM - Apresentando jQuery

Métodos jQuery

Page 29: IBM - Apresentando jQuery

Manipulando o DOMContexto

Page 30: IBM - Apresentando jQuery

Métodos encadeados

Adiciona uma classe css ao div

Faz com que o div desapareça devagar

Page 31: IBM - Apresentando jQuery

Efeitos(hide, show, fadeO ut, fadeIn..)

Page 32: IBM - Apresentando jQuery

Ajax

Page 33: IBM - Apresentando jQuery
Page 34: IBM - Apresentando jQuery

Plugin

http://omundoemumajanela.blogspot.com/2010/09/lego.html

Page 35: IBM - Apresentando jQuery

Don`t Repeat Yourself

Page 36: IBM - Apresentando jQuery

Criando um plugin

$('p').myplugin();

Encontre todos os elementos “p” e aplique o “myplugin”.

Page 37: IBM - Apresentando jQuery
Page 38: IBM - Apresentando jQuery

jquery.myplugin.js

Page 39: IBM - Apresentando jQuery

jQueryUI

Page 40: IBM - Apresentando jQuery

Ferramentas para Testes

Teste Unitário

Page 41: IBM - Apresentando jQuery

Ferramentas para TestesBDD

https://github.com/velesin/jasmine-jquery

Page 42: IBM - Apresentando jQuery

Alguns livros…

Page 43: IBM - Apresentando jQuery

Alguns links úteis

Page 44: IBM - Apresentando jQuery
Page 45: IBM - Apresentando jQuery
Page 46: IBM - Apresentando jQuery
Page 47: IBM - Apresentando jQuery
Page 48: IBM - Apresentando jQuery

Obrigado!