ibm - apresentando jquery
TRANSCRIPT
![Page 1: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/1.jpg)
jQuery“write less, do more”
![Page 2: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/2.jpg)
http://www.estatuaslimitededition.com/dc-direct-f8/lancamento-dc-direct-two-face-busto-12-t1739.htm
Duas partes
![Page 3: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/3.jpg)
#1
Um pouco de Javascript
![Page 4: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/4.jpg)
![Page 5: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/5.jpg)
![Page 6: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/6.jpg)
Erros encontrados
Javascript Obstrusivo
Código não é cross-browser
![Page 7: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/7.jpg)
![Page 8: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/8.jpg)
![Page 9: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/9.jpg)
![Page 10: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/10.jpg)
Seu código precisa ser Cross-browser
![Page 11: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/11.jpg)
Cross-browser
![Page 12: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/12.jpg)
Se não encontrar “id”, busca por “name”! (IE6)
![Page 13: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/13.jpg)
Cadê o “id”?
![Page 15: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/15.jpg)
#2
jQuery
![Page 16: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/16.jpg)
O que é?
An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
![Page 17: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/17.jpg)
IBM
MSNBC
AmazonAOL
Technorati
Drupal
Wordpress
DiggBBC
SourceForge Intuit
Salesforce
FeedBurner
WB Records
entre outros ...
Quem usa?
![Page 18: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/18.jpg)
Por que jQuery?
![Page 19: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/19.jpg)
![Page 20: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/20.jpg)
•Events (click, hover, change..)
•DOM Manipulation (append, remove..)
•Effects (hide, show, fadeOut..)
•Ajax(load, get, post..)
Features
![Page 21: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/21.jpg)
Como usar?
![Page 22: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/22.jpg)
1º Encontre um elemento
2º Faça algo com ele
![Page 23: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/23.jpg)
$(“#div”) $(“.class”)
$(“element”)
Seletores
![Page 24: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/24.jpg)
![Page 25: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/25.jpg)
![Page 26: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/26.jpg)
Seletores$(“# mydiv, .class, element ”)
![Page 27: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/27.jpg)
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](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/28.jpg)
Métodos jQuery
![Page 29: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/29.jpg)
Manipulando o DOMContexto
![Page 30: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/30.jpg)
Métodos encadeados
Adiciona uma classe css ao div
Faz com que o div desapareça devagar
![Page 31: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/31.jpg)
Efeitos(hide, show, fadeO ut, fadeIn..)
![Page 32: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/32.jpg)
Ajax
![Page 33: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/33.jpg)
![Page 34: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/34.jpg)
Plugin
http://omundoemumajanela.blogspot.com/2010/09/lego.html
![Page 35: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/35.jpg)
Don`t Repeat Yourself
![Page 36: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/36.jpg)
Criando um plugin
$('p').myplugin();
Encontre todos os elementos “p” e aplique o “myplugin”.
![Page 37: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/37.jpg)
![Page 38: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/38.jpg)
jquery.myplugin.js
![Page 39: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/39.jpg)
jQueryUI
![Page 40: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/40.jpg)
Ferramentas para Testes
Teste Unitário
![Page 41: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/41.jpg)
Ferramentas para TestesBDD
https://github.com/velesin/jasmine-jquery
![Page 42: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/42.jpg)
Alguns livros…
![Page 43: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/43.jpg)
Alguns links úteis
![Page 44: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/44.jpg)
![Page 45: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/45.jpg)
![Page 46: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/46.jpg)
![Page 47: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/47.jpg)
![Page 48: IBM - Apresentando jQuery](https://reader037.vdocuments.pub/reader037/viewer/2022100219/55a2d6751a28ab66688b45be/html5/thumbnails/48.jpg)
Obrigado!