JQuery Alagoinhas Dev Day - UNEB
Transferir como KEY, PDF1 gostou465 visualizações
O documento apresenta uma introdução ao framework jQuery. Ele discute a filosofia, vantagens e exemplos de uso do jQuery, incluindo seletores, funções e eventos. Além disso, o documento aborda plugins populares como jQuery UI, DataTables e Flot que podem ser usados junto com o jQuery.
![Antes do JQuery
Escondendo DIVs
divs = document.getElementByTagName('div');
for(i = 0; i < divs.length; i++){
divs[i].style.display = 'none';
}
Fonte: Marc Grabanski](https://image.slidesharecdn.com/jqueryalagoinhas-120707085552-phpapp02/85/JQuery-Alagoinhas-Dev-Day-UNEB-20-320.jpg)
![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();
}
}](https://image.slidesharecdn.com/jqueryalagoinhas-120707085552-phpapp02/85/JQuery-Alagoinhas-Dev-Day-UNEB-27-320.jpg)
![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();
}
}](https://image.slidesharecdn.com/jqueryalagoinhas-120707085552-phpapp02/85/JQuery-Alagoinhas-Dev-Day-UNEB-28-320.jpg)
![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();](https://image.slidesharecdn.com/jqueryalagoinhas-120707085552-phpapp02/85/JQuery-Alagoinhas-Dev-Day-UNEB-29-320.jpg)
![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;
}
}
}](https://image.slidesharecdn.com/jqueryalagoinhas-120707085552-phpapp02/85/JQuery-Alagoinhas-Dev-Day-UNEB-30-320.jpg)
![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;
});](https://image.slidesharecdn.com/jqueryalagoinhas-120707085552-phpapp02/85/JQuery-Alagoinhas-Dev-Day-UNEB-31-320.jpg)
![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;
});](https://image.slidesharecdn.com/jqueryalagoinhas-120707085552-phpapp02/85/JQuery-Alagoinhas-Dev-Day-UNEB-32-320.jpg)
JQuery Alagoinhas Dev Day - UNEB
- 1. JQuery Alagoinhas Dev Day UNEB
- 2. Luciano Borges [email protected] @lusabo slideshare.net/lusabo http://lusabo.blogspot.com.br http://meucaminho2012.blogspot.com.br http://www.diretodocaminho.com.br
- 3. Agenda
- 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”)
- 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!
Notas do Editor
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n