Download pdf - Jquery Framework

Transcript
Page 1: Jquery Framework
Page 2: Jquery Framework

Luiz Carlos Chaves

[email protected]

Page 3: Jquery Framework

Por que usar o jQuery?

Page 4: Jquery Framework

Quem usa?

http://trends.builtwith.com/javascript/jQuery

Page 5: Jquery Framework

http://trends.builtwith.com/javascript

Qual é a dominância?

Page 6: Jquery Framework

http://www.google.com/trends/explore#q=dojo+javascript,jquery+javascript,yui+javascript,prototype+javascript,mootools+javascript

O que o pessoal está procurando?

Page 7: Jquery Framework

O que é jQuery?

Page 8: Jquery Framework

Definição

Jquey é um framework JavaScript:

• Selector engine • Manipulação do DOM • Eventos JS • Animação • Ajax

Page 9: Jquery Framework

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

Page 10: Jquery Framework

É mais fácil desenvolver com jQuery!

Page 11: Jquery Framework

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();

Page 12: Jquery Framework

jQuery(‘div’).hide();

Função jQuery

Argumento

Método de jQuery

Page 13: Jquery Framework

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');

Page 14: Jquery Framework

Isso é realmente

write less, do more

Page 15: Jquery Framework

$ == jQuery $ é um alias para jQuery

Page 16: Jquery Framework

Adicionar classe odd na tabela jQuery('table tr:nth-child(odd)').addClass('odd');

Ocultar divs com jQuery jQuery(‘div’).hide();

Page 17: Jquery Framework

Adicionar classe odd na tabela $('table tr:nth-child(odd)').addClass('odd');

Ocultar divs com jQuery $(‘div’).hide();

Page 18: Jquery Framework

Find something, do something

Page 19: Jquery Framework

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")

Page 20: Jquery Framework

Find something

Seleciona todos os parágrafos

$( ‘p’)

Page 21: Jquery Framework

Do something

$( ‘p’).hide() Seleciona todos os parágrafos e

os ocultam

Page 22: Jquery Framework

Create something, do something

Page 23: Jquery Framework

$( ‘<li>home</li>’) .appendTo(“ul#nav”)

Cria um elemento <li> com texto “home” e Insere na lista com id “nav”

Page 24: Jquery Framework

Encadeamento & coloção

Page 25: Jquery Framework

Encadeamento

$('p') .hide(); $('p') .fadeIn(3000);

Page 26: Jquery Framework

Encadeamento

$('p') .hide() .fadeIn(3000);

Page 27: Jquery Framework

Coleção

$('p') .each( function(index){ $(this).html( index+' - '+$(this).text() ); } );

Page 28: Jquery Framework

Tipos de parâmetros do jQuery

Page 29: Jquery Framework

• 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(){})

Page 30: Jquery Framework

Um método, vários usos

Page 31: Jquery Framework

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>”; });

Page 32: Jquery Framework

O jQuery no <head> não está funcionando!

Page 33: Jquery Framework

<script> $(document).ready(function(){ $('p').hide().fadeIn(3000); }); </script>

Page 34: Jquery Framework

<script> $(function(){ $('p').hide().fadeIn(3000); }); </script>

Page 35: Jquery Framework

jQuery API

Page 36: Jquery Framework

Eventos

$('input').focus() $('input').change() $('input').blur() $('input').keyup() $('.button').click() $('.content').hover() $('div').delegate() $('div').bind()

Page 37: Jquery Framework

Eventos

.click()

$(function(){ $("div#teste").click(function(){ $(this) .hide(); }); });

Page 38: Jquery Framework

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

Page 39: Jquery Framework

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');

Page 40: Jquery Framework

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');

Page 41: Jquery Framework

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()

Page 42: Jquery Framework

Manipulação DOM

$('#foo') <html>

<body> <div>jQuery</div> <div id=”foo”>example</div>

</body> </html>

Page 43: Jquery Framework

Manipulação DOM

$('#foo').append('<p>test</p>') <html>

<body> <div>jQuery</div> <div id=”foo”>example</div>

</body> </html>

Page 44: Jquery Framework

Manipulação DOM

$('#foo').append('<p>test</p>') <html>

<body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div>

</body> </html>

Page 45: Jquery Framework

Manipulação DOM

$('p') <html>

<body> <div>jQuery

<p>moving</p> <p>paragraphs</p>

</div> <div id=”foo”>example</div>

</body> </html>

Page 46: Jquery Framework

Manipulação DOM

$('p').appendTo('#foo') <html>

<body> <div>jQuery

<p>moving</p> <p>paragraphs</p>

</div> <div id=”foo”>example</div>

</body> </html>

Page 47: Jquery Framework

Manipulação DOM

$('p').appendTo('#foo') <html>

<body> <div>jQuery</div> <div id=”foo”>example

<p>moving</p> <p>paragraphs</p>

</div> </body>

</html>

Page 48: Jquery Framework

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')

Page 49: Jquery Framework

Navegação no DOM

$('table') <html>

<body> <table></table> <div>

<p>foo</p> <span>bar</span>

</div> </body>

</html>

Page 50: Jquery Framework

Navegação no DOM

$('table').next() <html>

<body> <table></table> <div>

<p>foo</p> <span>bar</span>

</div> </body>

</html>

Page 51: Jquery Framework

Navegação no DOM

$('table').next() <html>

<body> <table></table> <div>

<p>foo</p> <span>bar</span>

</div> </body>

</html>

Page 52: Jquery Framework

Navegação no DOM

$('table').next().find('p'); <html>

<body> <table></table> <div>

<p>foo</p> <span>bar</span>

</div> </body>

</html>

Page 53: Jquery Framework

Navegação no DOM

$('table').next().find('p'); <html>

<body> <table></table> <div>

<p>foo</p> <span>bar</span>

</div> </body>

</html>

Page 54: Jquery Framework

Efeitos

$('div.section').show() $('div.section').hide() $('div.section').toggle() $('div.section').fadeIn() $('div.section').fadeOut() $('div.section').slideUp() $('div.section').slideDown()

Page 55: Jquery Framework

Efeitos

.fadeOut()

.fadeIn()

$(function(){ $("div#teste").click(function(){ $(this) .fadeOut() .fadeIn(); }); });

Page 56: Jquery Framework

Efeitos

.slideUp()

.slideDown()

$(function(){ $("div#teste").click(function(){ $(this) .slideUp() .slideDown(); }); });

Page 57: Jquery Framework

Ajax

$.getJSON() $.get() $.post() $.getScript('div') $('div.section').load('page.html') $.ajax() $.ajaxSetup()

Page 58: Jquery Framework

Ajax

.load(‘url’)

$(‘div’) .load(‘pagina.html div’)

Page 59: Jquery Framework

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"); });

} );

Page 60: Jquery Framework

Plug-in: Quando o do something

não existe

Page 61: Jquery Framework

WooThemes FlexSlider

http://www.woothemes.com/flexslider/ http://flexslider.woothemes.com/index.html

Page 62: Jquery Framework

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>

Page 63: Jquery Framework

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>

Page 64: Jquery Framework

WooThemes FlexSlider

Estrutura JavaScript <script type="text/javascript" charset="utf-8"> $(function() { $('.flexslider').flexslider(); }); </script>

Page 65: Jquery Framework

WooThemes FlexSlider

Configurando o FlexSlider <script type="text/javascript" charset="utf-8"> $(function() { $('.flexslider').flexslider( {animation: "slide",

animationLoop: true, itemWidth: 400}

); }); </script>

Page 67: Jquery Framework

jQuery Masked Input

Arquivos necessários <script src="jquery.js"></script> <script src="jquery.maskedinput.js"></script>

Page 68: Jquery Framework

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">

Page 69: Jquery Framework

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>

Page 70: Jquery Framework

jQuery UI

http://jqueryui.com/

Page 71: Jquery Framework

jQuery UI

Arquivos necessários <link rel="stylesheet" href="jquery-ui.css" /> <script src="jquery.js"></script> <script src="jquery-ui.js"></script>

Page 72: Jquery Framework

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>

Page 73: Jquery Framework

jQuery UI

Estrutura JavaScript <script type="text/javascript" charset="utf-8"> $(function() { $( "#accordion" ).accordion(); }); </script>

Page 75: Jquery Framework

$(‘DÚVIDAS’).tirar()

Page 76: Jquery Framework

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


Recommended