jQuery“write less, do more”

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

Duas partes

#1

Um pouco de Javascript

Erros encontrados

Javascript Obstrusivo

Código não é cross-browser

Seu código precisa ser Cross-browser

Cross-browser

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

Cadê o “id”?

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

#2

jQuery

O que é?

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

IBM

MSNBC

AmazonAOL

Technorati

Drupal

Wordpress

DiggBBC

SourceForge Intuit

Salesforce

FeedBurner

WB Records

entre 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º Faça algo com ele

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

$(“element”)

Seletores

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

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()..

Métodos jQuery

Manipulando o DOMContexto

Métodos encadeados

Adiciona uma classe css ao div

Faz com que o div desapareça devagar

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

Ajax

Plugin

http://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 Testes

Teste Unitário

Ferramentas para TestesBDD

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

Alguns livros…

Alguns links úteis

Obrigado!