jquery
DESCRIPTION
Palestra ministrada por Vinicius Rocha na Unipê. 14/01/2012TRANSCRIPT
![Page 1: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/1.jpg)
jQueryVinicius de Melo [email protected]
![Page 2: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/2.jpg)
ASSUNTOS
JAVASCRIPT
JQUERY
PLUGINS
CONCLUSÃO
![Page 3: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/3.jpg)
Brendan Eich
Moch
a1995 LiveScriptJavaScri
pt1996 Internet Explorer 3.0
ECMAScript
ECMA-
262
JScript
![Page 4: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/4.jpg)
+ 15 ANOS
![Page 5: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/5.jpg)
![Page 6: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/6.jpg)
• 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://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/7.jpg)
https://developer.mozilla.org/pt/JavaScript
![Page 8: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/8.jpg)
ASSUNTOS
JAVASCRIPT
JQUERY
PLUGINS
CONCLUSÃO
![Page 9: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/9.jpg)
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](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/11.jpg)
http://jquery.com/
![Page 12: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/15.jpg)
![Page 16: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/16.jpg)
DEMONSTRAÇÃO
![Page 17: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/17.jpg)
ASSUNTOS
JAVSCRIPT
JQUERY
PLUGINS
CONCLUSÃO
![Page 18: JQuery](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.com.br/reader035/viewer/2022062616/54b43fad4a7959185d8b459d/html5/thumbnails/19.jpg)
ASSUNTOS
JAVSCRIPT
JQUERY
PLUGINS
CONCLUSÃO