Your SlideShare is downloading. ×
0
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Introdução JQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introdução JQuery

962

Published on

Introdução JQuery - De conceitos básicos a conceitos mais avançados. …

Introdução JQuery - De conceitos básicos a conceitos mais avançados.

Acesse mais em: http://www.jeantoledo.net

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
962
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JQuery
  • 2. Agenda ● Introdução ● Selectors ● Interação com DOM ● Events ● Ajax ● Performance ● Bugs mais comuns
  • 3. Introdução O que é Jquery? Biblioteca javascript que permite a manipulação de elementos, eventos, animações e Ajax de uma forma simples e rápida. É versátil e extensível, com suporte a múltiplos browsers.
  • 4. Selectors O que são? Uma das principais funcionalidades do Jquery, permitem a seleção de um ou mais elementos de página para manipulação posterior. Oferece suporte a seletores CSS.
  • 5. Tipos de Selectors ● Tag (Boa performance) Ex: $(‘div’) - Todas as tags div. ● Id (Boa performance) Ex: $(‘#meuId’) - Todo elemento que contenha o atributo id igual a ‘meuId’.
  • 6. ● Class Ex: $(‘.blue’) - Qualquer elemento que contenha o atributo class igual a ‘blue’. ● Attribute Ex: $(‘div[title]’) , $(‘div[title=”value”]’) - Qualquer div que contenha o atributo ‘title’ equivalente.
  • 7. ● Múltiplos Ex: $(‘.a, #b’) - Qualquer elemento que contenha o atributo class igual a ‘a’ OU o atributo id igual a ‘b’. ● Específico Ex: $(‘div.content’) - Qualquer div que contenha o atributo class igual a ‘content’.
  • 8. ● Hierarquia Ex: $(‘div p’) - Todo parágrafo que está contido em uma div qualquer. ● First ou Last Ex: $(‘table tr:first’) ou $(‘table tr:last) - Primeira ou última linha de cada tabela no documento.
  • 9. ● Checked Ex: $(‘:checked’) - Todos os inputs do tipo radio ou checkbox que estiverem selecionados. ● Has Ex: $(‘li:has(a)’) - Todo item de lista que contenha um link.
  • 10. Interagindo com o DOM DOM (Document Object Model): Estrutura em árvore que indexa e armazena todos os elementos de página.
  • 11. ● Iteração Interage com todos os parágrafos do documento. O parâmetro index representa o índice atualmente manipulado e $(this) é uma referência ao objeto p. $(‘p’).each(function(index){ alert(index + ‘:’ + $(this).text()); });
  • 12. ● Modificando atributos Altera um ou mais atributos do elemento. $(‘img’).attr(‘title’, ‘Compre’); $(‘img’).attr({ title: ‘Compre’, style: ‘border: 1px solid black’ });
  • 13. ● Adicionando ou Removendo elementos 1 - Adiciona no final da tag h1 a tag span 2 - Adiciona no começo da tag h1 a tag span 3 - Remove da página a tag h1 1 - $('h1').append('<span>Hello</span>'); 2 - $('h1').prepend('<span>Hello</span>'); 3 - $('h1').remove();
  • 14. ● Modificando estilos Altera um ou mais estilos do elemento. $(‘p’).css(‘color’, ‘#FFF’); $(‘p’).css({ color: ‘#FFF’, background-color: ‘#CCC’ });
  • 15. ● Trabalhando com classes Permite adicionar uma ou mais classes no elemento Retorna true caso o elemento contenha a classe especificada, caso contrário retorna false. $(‘div:first’).addClass(‘classe1, classe2’); $(‘div:first’).hasClass(‘classe1’);
  • 16. Caso o elemento contenha a classe especificada, a mesma será removida, caso contrário será adicionada. Remove a classe especificada do elemento. $(‘div:first’).toggleClass(‘classe1’); $(‘div:first’).removeClass(‘classe1’);
  • 17. Events Um evento notifica o software que o usuário executou alguma ação. Ex: clique, mouse hover, close, etc. Como eventos são lançados com javascript? Depende do browser! .addEventListener(‘click’, function(){}, false); .attachEvent(‘onclick’, function(){});
  • 18. Executa quando a página é completamente carregada, incluindo imagens, músicas, etc. Executa quando a árvore de elementos DOM é completamente criada. $(window).load(function(){ //action }); $(document).ready(function(){ //action });
  • 19. ● Configurando eventos Atrela uma função a um evento do elemento. $(‘button’).click(function(){ $(‘button2’).click(); //trigger button2 click }); $(‘select’).change(function(){ alert($(this).val()); //valor selecionado });
  • 20. ● Bind Atrela um ou mais eventos a um selector. $('a').bind({ mouseover: function(){ $(this).addClass('ativo'); }, mouseout: function(){ $(this).removeClass('ativo'); } });
  • 21. ● On e Off (jquery 1.7 ou superior) Faz o bind de um ou mais eventos em um elemento. É possível obter dados detalhados do evento. $("div").on(‘mouseenter click’, function(e){ $(this).toggleClass(‘highlight’); if(e.type == ‘click’) alert(‘evento click’); });
  • 22. Remove associação com qualquer evento. Remove associação com um evento em específico. Executa um evento explicitamente. $("div").off(); $("div").off(‘click’); $("button").trigger(‘click’);
  • 23. ● One Executa o evento apenas uma vez. Faz o unbind automático. $("div").one('click', function() { alert('Este evento não será mais executado.'); });
  • 24. Ajax ● Interação entre página e servidor, sem reload ● Cross Browser ● Atualização de partes específicas da página ● GET e POST ● Pode carregar JSON, XML, HTML ou Scripts
  • 25. ● Load Permite que um conteúdo HTML seja carregado do servidor para um elemento de página. $(selector).load(url, data, callback); $(‘div’).load(‘content.html’); ou $(‘div’).load(‘content.html #divId’);
  • 26. ● getJSON Permite a obtenção de dados do servidor no formato JSON. $.getJSON(url, data, callback); $.getJSON(‘/consultaProduto’, { id:1 }, function(data){ alert(data.Nome); });
  • 27. ● Função Ajax Configurações: - contentType : Tipo de dado enviado ao servidor (xml, json,...) - data : Objeto a ser enviado - dataType : Tipo de dado retornado do servidor - error : Função callback para erro - sucess : Função callback para sucesso - type : GET ou POST
  • 28. $.ajax({ url : ‘ProdutoService.svc/Inserir’, data : produto, dataType : ‘json’, sucess : function(data, status, xhr){ }, error: function(xhr, status, error){ } });
  • 29. Performance ● Ser o mais específico possível em um seletor $(‘#id’) , $(‘div’) ● Método find: limita o escopo de busca $(‘#id’).find(‘p’)
  • 30. ● Cachear elementos, principalmente em loops ● Somente use Jquery quando necessário var list = $(#lista); for(x in itens) list.append(itens[x]); $(‘a’).on(‘click’, function(){ alert($(this).attr(‘id’)); alert(this.id); });
  • 31. ● Utilizar o encadeamento de métodos A maioria dos métodos retorna o objeto Jquery. $(‘.highlight’).css(‘background-color’, ‘yellow’); $(‘.highlight’).fadeIn(‘slow’); $(‘.highlight’).addClass(‘hActive’); $(‘.highlight’).css(‘background-color’, ‘yellow’) .fadeIn(‘slow’) .addClass(‘hActive’);
  • 32. ● Cuidado na manipulação do DOM $.each(itens, function(count, item) { $('#List').append(‘<li>’ + item ‘</li>’); }); var tmp = ‘’; $.each(itens, function(count, item) { tmp += ‘<li>’+ item ‘</li>’; }); $('#List').append(tmp);
  • 33. Bugs Comuns ● Condicional de elementos: errado: if(!$(‘pre’)) certo: if(!$(‘pre’).length) false values: 0, null, undefined, “”, NaN true values: {}, [], 5 Cuidado com valores usados em condicional.
  • 34. ● Elementos em hierarquia ● Alguns plugins (Ex:Jquery Mobile) modificam a árvore de elementos e sua hierarquia. <ul id=”lista”> <li><a href=”#”></li> </li> $(document).on('click', '#lista a', function(){ var $listItem = $(this).parent(); var $listItem = $(this).closest(‘li’); });
  • 35. ● Falso Start Levantar a necessidade do uso de funções de inicialização. <script> $(‘h1’).html(‘hello’); $(document).ready(function(){ $(‘h1’).html(‘hello’); }); </script>
  • 36. ● Event Delegation (boa performance): Em alguns casos é necessário fazer o bind do evento em um parent, assim os novos elementos adicionados terão o comportamento desejado. $('#lista li').on('click', function(){ }); $('#lista').on('click', 'li', function(){ });
  • 37. ● Contexto Ajax ● Utilizar retorno Ajax dentro do escopo do mesmo. $.getJSON(‘/server’, function(result){ data = result; }); $(‘element’).html(data); $.getJSON(‘/server’, function(result){ $(‘element’).html(result); });
  • 38. ● Retorno booleano em iteração: Retornar true em um loop chama a próxima iteração. $('input').each(function(index){ if($(this).val() == 5) { return true; } }); var result; $('input').each(function(index){ if($(this).val() == 5) result = true; }); return result;
  • 39. Links Relacionados: http://james.padolsey.com/jquery - Site onde é possível conferir o que cada função jquery realiza por traz de sua chamada. http://api.jquery.com/ - Documentação Jquery http://jsperf.com/ - Ferramenta online para criação de casos de testes que comparam um ou mais code snippets.
  • 40. Contato: Twitter: @jeanctoledo E-mail: jeanctoledo@gmail.com Website: www.jeantoledo.net

×