Luiz Carlos Chaves
Por que usar o jQuery?
Quem usa?
http://trends.builtwith.com/javascript/jQuery
http://www.google.com/trends/explore#q=dojo+javascript,jquery+javascript,yui+javascript,prototype+javascript,mootools+javascript
O que o pessoal está procurando?
O que é jQuery?
Definição
Jquey é um framework JavaScript:
• Selector engine • Manipulação do DOM • Eventos JS • Animação • Ajax
Características
• Testado em 50 browser e 11 plataformas; • Simplifica e acelera o desenvolvimento
Web; • Leve! 33 KB na versão simplificada; • Suporte a Plug-in com inúmeras
implementações; • Comunidade grande e ativa; • Open source
É mais fácil desenvolver com jQuery!
Ocultar divs apenas com JS divs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; }
Ocultar divs com jQuery jQuery(‘div’).hide();
jQuery(‘div’).hide();
Função jQuery
Argumento
Método de jQuery
var tables = document.getElementsByTagName('table'); for (var t = 0; t < tables.length; t++) {
! var rows = tables[t].getElementsByTagName('tr'); ! for (var i = 1; i < rows.length; i += 2) {
if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += ' odd'; }
} } jQuery('table tr:nth-child(odd)').addClass('odd');
Isso é realmente
write less, do more
$ == jQuery $ é um alias para jQuery
Adicionar classe odd na tabela jQuery('table tr:nth-child(odd)').addClass('odd');
Ocultar divs com jQuery jQuery(‘div’).hide();
Adicionar classe odd na tabela $('table tr:nth-child(odd)').addClass('odd');
Ocultar divs com jQuery $(‘div’).hide();
Find something, do something
Find something
$( ) recebe um Seletor $("*") $("#primeiro") $(".odd") $("tr") $("tr,td,table") $("ul>li")
$("input[value=‘hot’]") $("p a") $("p:first") $("div:contains(‘John’) ") $("p:visible") $("input:checked")
Find something
Seleciona todos os parágrafos
$( ‘p’)
Do something
$( ‘p’).hide() Seleciona todos os parágrafos e
os ocultam
Create something, do something
$( ‘<li>home</li>’) .appendTo(“ul#nav”)
Cria um elemento <li> com texto “home” e Insere na lista com id “nav”
Encadeamento & coloção
Encadeamento
$('p') .hide(); $('p') .fadeIn(3000);
Encadeamento
$('p') .hide() .fadeIn(3000);
Coleção
$('p') .each( function(index){ $(this).html( index+' - '+$(this).text() ); } );
Tipos de parâmetros do jQuery
• CSS Selector normais e personalizadas
jQuery(‘div’) e jQuery(‘:first’) • HTML
jQuery(‘<li><a href=”#”>link</a></li>’) • Elemento DOM
jQuery(document) ou jQuery(document.createElement(‘a’))
• Função
jQuery(function(){})
Um método, vários usos
Variações do método .html() • .html() $(‘p’).html(); • .html(stringHTML) $(‘p’).html(‘Lorem Ipsum’); • .html(function(index, oldhtml))
$(‘p’).html(function(i){ return “<p>hello “ + i + “</p>”; });
O jQuery no <head> não está funcionando!
<script> $(document).ready(function(){ $('p').hide().fadeIn(3000); }); </script>
<script> $(function(){ $('p').hide().fadeIn(3000); }); </script>
jQuery API
Eventos
$('input').focus() $('input').change() $('input').blur() $('input').keyup() $('.button').click() $('.content').hover() $('div').delegate() $('div').bind()
Eventos
.click()
$(function(){ $("div#teste").click(function(){ $(this) .hide(); }); });
Atributo/CSS
$attr(“href") $val() $html() $css("border") $width()
$attr(“href", “link") $val(“novo valor") $html("<p>Novo</p>") $css("border", "none") $width("30")
Obter Alterar
Atributo/CSS
Manipulação de Atributo $('a.nav').attr('href', 'http://flickr.com/'); $('a.nav').attr({ 'href': 'http://flickr.com/', 'id': 'flickr' }); $('#intro').removeAttr('id');
Atributo/CSS
Manipulação de CSS $('p').css('font-size', '20px'); $('p').css( {'font-size': '20px', color: 'red'} ); $('#intro').addClass('highlighted'); $('#intro').removeClass('highlighted'); $('#intro').toggleClass('highlighted');
Manipulação DOM
$('div.section').append($('h1')) $('div.section').appendTo($('body')) $('div.section').html($('h1')) $('div.section').prepend($('h1')) $('div.section').text('<p>teste</p>') $('div.section').after($('h1')) $('div.section').remove()
Manipulação DOM
$('#foo') <html>
<body> <div>jQuery</div> <div id=”foo”>example</div>
</body> </html>
Manipulação DOM
$('#foo').append('<p>test</p>') <html>
<body> <div>jQuery</div> <div id=”foo”>example</div>
</body> </html>
Manipulação DOM
$('#foo').append('<p>test</p>') <html>
<body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div>
</body> </html>
Manipulação DOM
$('p') <html>
<body> <div>jQuery
<p>moving</p> <p>paragraphs</p>
</div> <div id=”foo”>example</div>
</body> </html>
Manipulação DOM
$('p').appendTo('#foo') <html>
<body> <div>jQuery
<p>moving</p> <p>paragraphs</p>
</div> <div id=”foo”>example</div>
</body> </html>
Manipulação DOM
$('p').appendTo('#foo') <html>
<body> <div>jQuery</div> <div id=”foo”>example
<p>moving</p> <p>paragraphs</p>
</div> </body>
</html>
Navegação DOM
$('div.section').parent() $('div.section').next() $('div.section').prev() $('div.section').nextAll('div') $('div.section').siblings() $('h1:first').parents() $('div').children() $('div').children().eq(2) $('div').find('a')
Navegação no DOM
$('table') <html>
<body> <table></table> <div>
<p>foo</p> <span>bar</span>
</div> </body>
</html>
Navegação no DOM
$('table').next() <html>
<body> <table></table> <div>
<p>foo</p> <span>bar</span>
</div> </body>
</html>
Navegação no DOM
$('table').next() <html>
<body> <table></table> <div>
<p>foo</p> <span>bar</span>
</div> </body>
</html>
Navegação no DOM
$('table').next().find('p'); <html>
<body> <table></table> <div>
<p>foo</p> <span>bar</span>
</div> </body>
</html>
Navegação no DOM
$('table').next().find('p'); <html>
<body> <table></table> <div>
<p>foo</p> <span>bar</span>
</div> </body>
</html>
Efeitos
$('div.section').show() $('div.section').hide() $('div.section').toggle() $('div.section').fadeIn() $('div.section').fadeOut() $('div.section').slideUp() $('div.section').slideDown()
Efeitos
.fadeOut()
.fadeIn()
$(function(){ $("div#teste").click(function(){ $(this) .fadeOut() .fadeIn(); }); });
Efeitos
.slideUp()
.slideDown()
$(function(){ $("div#teste").click(function(){ $(this) .slideUp() .slideDown(); }); });
Ajax
$.getJSON() $.get() $.post() $.getScript('div') $('div.section').load('page.html') $.ajax() $.ajaxSetup()
Ajax
.load(‘url’)
$(‘div’) .load(‘pagina.html div’)
Ajax
$.getJSON(url, sucess) $.getJSON( "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){ $("<img/>") .attr("src", item.media.m) .appendTo("#images"); });
} );
Plug-in: Quando o do something
não existe
WooThemes FlexSlider
http://www.woothemes.com/flexslider/ http://flexslider.woothemes.com/index.html
WooThemes FlexSlider
Arquivos necessários <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.js"></script> <script src="jquery.flexslider.js"></script>
WooThemes FlexSlider
Estrutura no HTML <div class="flexslider"> <ul class="slides"> <li><img src="slide1.jpg" /></li> <li><img src="slide2.jpg" /></li> <li><img src="slide3.jpg" /></li> </ul> </div>
WooThemes FlexSlider
Estrutura JavaScript <script type="text/javascript" charset="utf-8"> $(function() { $('.flexslider').flexslider(); }); </script>
WooThemes FlexSlider
Configurando o FlexSlider <script type="text/javascript" charset="utf-8"> $(function() { $('.flexslider').flexslider( {animation: "slide",
animationLoop: true, itemWidth: 400}
); }); </script>
jQuery Masked Input
http://digitalbush.com/projects/masked-input-plugin/
jQuery Masked Input
Arquivos necessários <script src="jquery.js"></script> <script src="jquery.maskedinput.js"></script>
jQuery Masked Input
Estrutura no HTML <input type="text" name="cpf" id="cpf"><br> <input type="text" name="cep" id="cep"><br> <input type="text" name="date" id="date"><br> <input type="text" name="telefone" id="telefone">
jQuery Masked Input
Estrutura JavaScript <script type="text/javascript" charset="utf-8"> $(function() { $("#cpf").mask("999.999.999-99"); $("#cep").mask("99.999-999"); $("#date").mask("99/99/9999"); $("#telefone").mask("(99)9999-9999"); }); </script>
jQuery UI
Arquivos necessários <link rel="stylesheet" href="jquery-ui.css" /> <script src="jquery.js"></script> <script src="jquery-ui.js"></script>
jQuery UI
Estrutura no HTML <div id="accordion"> <h3>Section 1</h3> <div> <p>...</p> </div> ... <h3>Section 4</h3> <div> <p>...</p> </div> </div>
jQuery UI
Estrutura JavaScript <script type="text/javascript" charset="utf-8"> $(function() { $( "#accordion" ).accordion(); }); </script>
Outros
jQuery Lightbox http://leandrovieira.com/projects/jquery/lightbox/
Validation http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery File Upload http://blueimp.github.com/jQuery-File-Upload/
...
$(‘DÚVIDAS’).tirar()
Referências
http://jquery.com/ http://oscarotero.com/jquery/ http://www.slideshare.net/1Marc/jquery-essentials http://www.slideshare.net/remy.sharp/write-less-do-more http://medleyweb.com/web-dev/40-best-jquery-plugins-every-web-developer/ http://designshack.net/articles/javascript/40-awesome-jquery-plugins-you-need-to-check-out/ http://webdesignledger.com/resources/best-jquery-plugins-of-2012
Top Related