Apresentação sobre JQuery no Alagoinhas Dev Day - UNEB

1. JQuery
Alagoinhas Dev Day
UNEB

2. Luciano Borges
lucianosantosborges@gmail.com
@lusabo
slideshare.net/lusabo
http://lusabo.blogspot.com.br
http://meucaminho2012.blogspot.com.br
http://www.diretodocaminho.com.br

3. Agenda

7. http://w3techs.com/technologies/cross/javascript_library/ranking

8. Compatibilidade

9. simplicidade

10. Filosofia jQuery
Ache Algo
Faça Algo
Fonte: Richard Worth

11. Filosofia jQuery
$(Ache Algo)
.Faça Algo();
Fonte: Richard Worth

12. Vantagens

13. Vantagens
Acesso direto aos componentes DOM

14. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações

15. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário

16. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário
Grande variedade de efeitos de animação

17. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário
Grande variedade de efeitos de animação
Uso simplificado e sem restrições com AJAX

18. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário
Grande variedade de efeitos de animação
Uso simplificado e sem restrições com AJAX
Simplificação na criação de scripts

19. Vantagens
Acesso direto aos componentes DOM
Manipulação de conteúdos sem limitações
Suporte aos eventos de interação com o usuário
Grande variedade de efeitos de animação
Uso simplificado e sem restrições com AJAX
Simplificação na criação de scripts
Emprego cross-browser

20. Antes do JQuery
Escondendo DIVs
divs = document.getElementByTagName('div');
for(i = 0; i < divs.length; i++){
divs[i].style.display = 'none';
}
Fonte: Marc Grabanski

21. Depois do JQuery
Escondendo DIVs
$(“div”).hide();
Fonte: Marc Grabanski

22. Seletores

23. Seletores
$(“elemento”)
$(“.classe”)
$(“#id”)

24. Funções &
Eventos

25. Exemplos
$(“div”).hide();
$(“button”).remove();
$(“form”).submit();
$(“p”).addClass(“special”);
$(“span”).show(“fast”);

26. Exemplos
$("p").addClass("special")
.css("color", "red")
.append("hello")
.show("slow");

27. Exemplos Reais
function validacaoRespostas(){
var selecionado = null;
var i;
for(i = 0; i < document.frm.elements.length; i++){
if(document.frm.elements[i].name.substr(0,4) == “resp”){
if(document.frm.elements[i].checked){
selecionado = document.frm.elements[i].value;
break;
}
}
}
if(selecionado == null){
alert(“É necessário escolher pelo menos um quesito.”);
} else {
document.frm.submit();
}
}

28. Exemplos Reais
function validacaoRespostas(){
var selecionado = null;
var i;
for(i = 0; i < document.frm.elements.length; i++){
if(document.frm.elements[i].name.substr(0,4) == “resp”){
if(document.frm.elements[i].checked){
selecionado = document.frm.elements[i].value;
break;
}
}
}
if(selecionado == null){
alert(“É necessário escolher pelo menos um quesito.”);
} else {
document.frm.submit();
}
}

29. Exemplos Reais
function validacaoRespostas(){
var selecionado = null;
var i;
for(i = 0; i < document.frm.elements.length; i++){
if(document.frm.elements[i].name.substr(0,4) == “resp”){
if(document.frm.elements[i].checked){
selecionado = document.frm.elements[i].value;
break;
}
}
}
if(selecionado == null){
alert(“É necessário escolher pelo menos um quesito.”);
} else {
document.frm.submit();
}
}
($(“input:checked”).length == 0) ? alert (“msg”) :
$(“form:first”).submit();

30. Exemplos Reais
function Limpar(){
var v_input = document.getElementsByTagName(‘input’);
for(var i = 0; i<v_input.length; i++){
switch(v_input[i].type){
case ‘radio’:
v_input[i].checked = ‘’;
break;
case ‘checkbox’:
v_input[i].checked = ‘’;
break;
}
}
}

31. Exemplos Reais
function Limpar(){
var v_input = document.getElementsByTagName(‘input’);
for(var i = 0; i<v_input.length; i++){
switch(v_input[i].type){
case ‘radio’:
v_input[i].checked = ‘’;
break;
case ‘checkbox’:
v_input[i].checked = ‘’;
break;
}
}
}
$(“input:checked”).each(function(){
this.checked = false;
});

32. Exemplos Reais
function Limpar(){
var v_input = document.getElementsByTagName(‘input’);
for(var i = 0; i<v_input.length; i++){
switch(v_input[i].type){
case ‘radio’:
v_input[i].checked = ‘’;
break;
case ‘checkbox’:
v_input[i].checked = ‘’;
break;
}
}
}
$(“input:checked”).each(function(){
this.checked = false;
});

33. $.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});

36. Formato de troca de dados leve em relação ao XML
Uma coleção de pares nome/valor
Um objeto JSON inicia com { e termina com }
Cada nome é seguido por : (dois pontos)
Os pares nome/valor são separados por , (vírgula)
É um subconjunto dos objetos literais do JavaScript

39. Um conjunto completo de componentes cross-
browser de interface de usuário.
Drag, Drop, Sort, Select, Resize.
Accordion, Autocomplete, Button, Datepicker,
Dialog, Progressbar, Slider, Tabs.

40. j Q u e r y U I C S S F ra m e wo rk

41. Accordion
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>

42. Autocomplete

43. Datepicker
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker"></p>

44. Tabs
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu ...</p>
</div>
</div>

45. Quer mais?

46. PLUGINS

47. DataTable
PLUGINS

48. Flot
PLUGINS

49. jsTree
PLUGINS

51. JQuery Corner

54. r y
u e
a JQ
U s

55. E pra celular?

58. Template Básico
<html>
<head>
...
<meta name="viewport"
content="width=device-width,initial-scale=1">
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>

59. Lista Básica
<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

60. Forms
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>

61. Obrigado!