Introdução JQuery
-
Upload
jean-toledo -
Category
Technology
-
view
989 -
download
0
description
Transcript of Introdução JQuery
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 forma simples e rápida.
É versátil e extensível, com suporte a múltiplos browsers.
SelectorsO 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.
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’.
● 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.
● 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’.
● 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.
● 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.
Interagindo com o DOMDOM (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 $(this) é uma referência ao objeto p.
$(‘p’).each(function(index){ alert(index + ‘:’ + $(this).text()); });
● Modificando atributos
Altera um ou mais atributos do elemento.
$(‘img’).attr(‘title’, ‘Compre’);
$(‘img’).attr({ title: ‘Compre’, style: ‘border: 1px solid black’});
● Adicionando ou Removendo elementos
1 - Adiciona no final da tag h1 a tag span2 - Adiciona no começo da tag h1 a tag span3 - Remove da página a tag h1
1 - $('h1').append('<span>Hello</span>');
2 - $('h1').prepend('<span>Hello</span>');
3 - $('h1').remove();
● Modificando estilos
Altera um ou mais estilos do elemento.
$(‘p’).css(‘color’, ‘#FFF’);
$(‘p’).css({ color: ‘#FFF’, background-color: ‘#CCC’});
● 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’);
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’);
EventsUm 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(){});
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 });
● 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});
● Bind
Atrela um ou mais eventos a um selector.
$('a').bind({ mouseover: function(){ $(this).addClass('ativo'); }, mouseout: function(){ $(this).removeClass('ativo'); }});
● 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’);});
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’);
● One
Executa o evento apenas uma vez. Faz o unbind automático.
$("div").one('click', function() {alert('Este evento não será mais executado.');
});
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
● 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’);
● 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);});
● 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
$.ajax({url : ‘ProdutoService.svc/Inserir’,data : produto,
dataType : ‘json’, sucess : function(data, status, xhr){ },
error: function(xhr, status, error){}
});
Performance● Ser o mais específico possível em um seletor
$(‘#id’) , $(‘div’)
● Método find: limita o escopo de busca$(‘#id’).find(‘p’)
● 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); });
● 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’);
● 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);
Bugs Comuns● Condicional de elementos:
errado: if(!$(‘pre’))certo: if(!$(‘pre’).length)
false values: 0, null, undefined, “”, NaNtrue values: {}, [], 5
Cuidado com valores usados em condicional.
● 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’); });
● Falso Start
Levantar a necessidade do uso de funções de inicialização.
<script> $(‘h1’).html(‘hello’); $(document).ready(function(){
$(‘h1’).html(‘hello’);});
</script>
● 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(){ });
● 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);});
● 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;
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.
Contato:
Twitter: @jeanctoledoE-mail: [email protected]: www.jeantoledo.net