JQuery
Agenda
● Introdução
● Selectors
● Interação com DOM
● Events
● Ajax
● Performance
● Bugs mais comuns
Introdução
O que é Jquery?
Biblioteca javascript que permite a manipulação de
elementos, eventos, animações e Ajax de uma
...
Selectors
O que são?
Uma das principais funcionalidades do Jquery,
permitem a seleção de um ou mais elementos de
página pa...
Tipos de Selectors
● Tag (Boa performance)
Ex: $(‘div’) - Todas as tags div.
● Id (Boa performance)
Ex: $(‘#meuId’) - Todo...
● Class
Ex: $(‘.blue’) - Qualquer elemento que
contenha o atributo class igual a ‘blue’.
● Attribute
Ex: $(‘div[title]’) ,...
● Múltiplos
Ex: $(‘.a, #b’) - Qualquer elemento que
contenha o atributo class igual a ‘a’ OU o
atributo id igual a ‘b’.
● ...
● Hierarquia
Ex: $(‘div p’) - Todo parágrafo que está
contido em uma div qualquer.
● First ou Last
Ex: $(‘table tr:first’)...
● Checked
Ex: $(‘:checked’) - Todos os inputs do tipo
radio ou checkbox que estiverem selecionados.
● Has
Ex: $(‘li:has(a)...
Interagindo com o DOM
DOM (Document Object Model): Estrutura em
árvore que indexa e armazena todos os elementos
de página.
● Iteração
Interage com todos os parágrafos do documento. O
parâmetro index representa o índice atualmente
manipulado e $(...
● Modificando atributos
Altera um ou mais atributos do elemento.
$(‘img’).attr(‘title’, ‘Compre’);
$(‘img’).attr({
title: ...
● Adicionando ou Removendo elementos
1 - Adiciona no final da tag h1 a tag span
2 - Adiciona no começo da tag h1 a tag spa...
● Modificando estilos
Altera um ou mais estilos do elemento.
$(‘p’).css(‘color’, ‘#FFF’);
$(‘p’).css({
color: ‘#FFF’,
back...
● Trabalhando com classes
Permite adicionar uma ou mais classes no elemento
Retorna true caso o elemento contenha a classe...
Caso o elemento contenha a classe especificada, a
mesma será removida, caso contrário será
adicionada.
Remove a classe esp...
Events
Um evento notifica o software que o usuário
executou alguma ação. Ex: clique, mouse hover,
close, etc.
Como eventos...
Executa quando a página é completamente
carregada, incluindo imagens, músicas, etc.
Executa quando a árvore de elementos D...
● Configurando eventos
Atrela uma função a um evento do elemento.
$(‘button’).click(function(){
$(‘button2’).click(); //tr...
● Bind
Atrela um ou mais eventos a um selector.
$('a').bind({
mouseover: function(){
$(this).addClass('ativo');
},
mouseou...
● 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
...
Remove associação com qualquer evento.
Remove associação com um evento em específico.
Executa um evento explicitamente.
$(...
● One
Executa o evento apenas uma vez. Faz o unbind
automático.
$("div").one('click', function() {
alert('Este evento não ...
Ajax
● Interação entre página e servidor, sem reload
● Cross Browser
● Atualização de partes específicas da página
● GET e...
● Load
Permite que um conteúdo HTML seja carregado do
servidor para um elemento de página.
$(selector).load(url, data, cal...
● getJSON
Permite a obtenção de dados do servidor no
formato JSON.
$.getJSON(url, data, callback);
$.getJSON(‘/consultaPro...
● Função Ajax
Configurações:
- contentType : Tipo de dado enviado ao servidor
(xml, json,...)
- data : Objeto a ser enviad...
$.ajax({
url : ‘ProdutoService.svc/Inserir’,
data : produto,
dataType : ‘json’,
sucess : function(data, status, xhr){
},
e...
Performance
● Ser o mais específico possível em um seletor
$(‘#id’) , $(‘div’)
● Método find: limita o escopo de busca
$(‘...
● Cachear elementos, principalmente em loops
● Somente use Jquery quando necessário
var list = $(#lista);
for(x in itens)
...
● Utilizar o encadeamento de métodos
A maioria dos métodos retorna o objeto Jquery.
$(‘.highlight’).css(‘background-color’...
● Cuidado na manipulação do DOM
$.each(itens, function(count, item) {
$('#List').append(‘<li>’ + item ‘</li>’);
});
var tm...
Bugs Comuns
● Condicional de elementos:
errado: if(!$(‘pre’))
certo: if(!$(‘pre’).length)
false values: 0, null, undefined...
● Elementos em hierarquia
●
Alguns plugins (Ex:Jquery Mobile) modificam a
árvore de elementos e sua hierarquia.
<ul id=”li...
● Falso Start
Levantar a necessidade do uso de funções de
inicialização.
<script>
$(‘h1’).html(‘hello’);
$(document).ready...
● Event Delegation (boa performance):
Em alguns casos é necessário fazer o bind do
evento em um parent, assim os novos ele...
● Contexto Ajax
●
Utilizar retorno Ajax dentro do escopo do mesmo.
$.getJSON(‘/server’, function(result){
data = result;
}...
● Retorno booleano em iteração:
Retornar true em um loop chama a próxima
iteração.
$('input').each(function(index){
if($(t...
Links Relacionados:
http://james.padolsey.com/jquery - Site onde é possível conferir
o que cada função jquery realiza por ...
Contato:
Twitter: @jeanctoledo
E-mail: jeanctoledo@gmail.com
Website: www.jeantoledo.net
Introdução JQuery
Próximos SlideShares
Carregando em…5
×

Introdução JQuery

1.415 visualizações

Publicada em

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

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

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.415
No SlideShare
0
A partir de incorporações
0
Número de incorporações
928
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução JQuery

  1. 1. JQuery
  2. 2. Agenda ● Introdução ● Selectors ● Interação com DOM ● Events ● Ajax ● Performance ● Bugs mais comuns
  3. 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. 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. 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. 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. 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. 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. 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. 10. Interagindo com o DOM DOM (Document Object Model): Estrutura em árvore que indexa e armazena todos os elementos de página.
  11. 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. 12. ● Modificando atributos Altera um ou mais atributos do elemento. $(‘img’).attr(‘title’, ‘Compre’); $(‘img’).attr({ title: ‘Compre’, style: ‘border: 1px solid black’ });
  13. 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. 14. ● Modificando estilos Altera um ou mais estilos do elemento. $(‘p’).css(‘color’, ‘#FFF’); $(‘p’).css({ color: ‘#FFF’, background-color: ‘#CCC’ });
  15. 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. 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. 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. 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. 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. 20. ● Bind Atrela um ou mais eventos a um selector. $('a').bind({ mouseover: function(){ $(this).addClass('ativo'); }, mouseout: function(){ $(this).removeClass('ativo'); } });
  21. 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. 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. 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. 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. 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. 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. 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. 28. $.ajax({ url : ‘ProdutoService.svc/Inserir’, data : produto, dataType : ‘json’, sucess : function(data, status, xhr){ }, error: function(xhr, status, error){ } });
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 40. Contato: Twitter: @jeanctoledo E-mail: jeanctoledo@gmail.com Website: www.jeantoledo.net

×