jquery

20
jQuery Vinicius de Melo Rocha [email protected]

Upload: titao-yamamoto

Post on 13-Jan-2015

885 views

Category:

Technology


3 download

DESCRIPTION

Palestra ministrada por Vinicius Rocha na Unipê. 14/01/2012

TRANSCRIPT

Page 1: JQuery

jQueryVinicius de Melo [email protected]

Page 2: JQuery

ASSUNTOS

JAVASCRIPT

JQUERY

PLUGINS

CONCLUSÃO

Page 3: JQuery

Brendan Eich

Moch

a1995 LiveScriptJavaScri

pt1996 Internet Explorer 3.0

ECMAScript

ECMA-

262

JScript

Page 4: JQuery

+ 15 ANOS

Page 5: JQuery
Page 6: JQuery

• Existe um padrão Standard ECMA-262

• Precisa de um ambiente de execução

• O ambiente não tem padrão

• JavaScript é incomum e flexível

• JavaScript é Script

Page 7: JQuery

https://developer.mozilla.org/pt/JavaScript

Page 8: JQuery

ASSUNTOS

JAVASCRIPT

JQUERY

PLUGINS

CONCLUSÃO

Page 9: JQuery

Considerações sobre jQuery

• jQuery é uma biblioteca– JavaScript ainda é necessário– Pode usar com outras bibliotecas e frameworks

• jQuery é fácil• Funciona bem em browsers antigos• Existem milhares de extensões / plugins• jQuery é pesado e lento?

Importante?

Page 10: JQuery

document Object Model (DOM)<html><head> <title>Title</title></head><body> <div id="header"> <h1 class="title">Title</h1> </div> <div id="content"> <p>Hello, World!</p> </div></body></html>

html

head

body

title

h1.title

div#header

div#content

Page 11: JQuery

http://jquery.com/

Page 12: JQuery

ADICIONANDO AO SITE

CDN Hosted jQuery

<script src="jquery-1.5.1.min.js“ type="text/javascript“ />

$ function (a,b){return new d.fn.init(a,b,g)}

jQuery

Page 13: JQuery

SELECTORS$(‘button’) <button />

$(‘div.header’) <div class=“header” />

$(‘div#header’) <div id=“header” />

$(‘#header > h1’) <div id=“header”><h1></h1>

</div>

if ($(‘button’)) { } Não funciona! Por quê?

Page 14: JQuery

MÉTODOS E MAIS MÉTODOS

• css• hasClass• addClass• removeClass• toggleClass

• hide• show• toggle• animate• delay• stop

http://docs.jquery.com http://www.google.com

Page 15: JQuery
Page 16: JQuery

DEMONSTRAÇÃO

Page 17: JQuery

ASSUNTOS

JAVSCRIPT

JQUERY

PLUGINS

CONCLUSÃO

Page 18: JQuery

PLUGINS• jQuery UI• ColorBox• File Upload

http://jqueryui.com/http://jacklmoore.com/colorbox/http://digitalbush.com/projects/masked-input-plugin/http://blueimp.github.com/jQuery-File-Upload/http://harvesthq.github.com/chosen/http://www.kendoui.com/

• Chosen• Masked Input• KendoUI

Page 19: JQuery

ASSUNTOS

JAVSCRIPT

JQUERY

PLUGINS

CONCLUSÃO

Page 20: JQuery

Contato

Vinicius Rocha

@[email protected]

vmelorocha.wordpress.comfacebook.com/vmrocha

msn: [email protected]