Introdução JQuery

41
JQuery

description

Introdução JQuery - De conceitos básicos a conceitos mais avançados. Acesse mais em: http://www.jeantoledo.net

Transcript of Introdução JQuery

Page 1: Introdução JQuery

JQuery

Page 2: Introdução JQuery

Agenda● Introdução● Selectors● Interação com DOM● Events● Ajax● Performance● Bugs mais comuns

Page 3: Introdução JQuery

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.

Page 4: Introdução JQuery

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.

Page 5: Introdução JQuery

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’.

Page 6: Introdução JQuery

● 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.

Page 7: Introdução JQuery

● 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’.

Page 8: Introdução JQuery

● 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.

Page 9: Introdução JQuery

● 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.

Page 10: Introdução JQuery

Interagindo com o DOMDOM (Document Object Model): Estrutura em árvore que indexa e armazena todos os elementos de página.

Page 11: Introdução JQuery

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

Page 12: Introdução JQuery

● Modificando atributos

Altera um ou mais atributos do elemento.

$(‘img’).attr(‘title’, ‘Compre’);

$(‘img’).attr({ title: ‘Compre’, style: ‘border: 1px solid black’});

Page 13: Introdução JQuery

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

Page 14: Introdução JQuery

● Modificando estilos

Altera um ou mais estilos do elemento.

$(‘p’).css(‘color’, ‘#FFF’);

$(‘p’).css({ color: ‘#FFF’, background-color: ‘#CCC’});

Page 15: Introdução JQuery

● 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’);

Page 16: Introdução JQuery

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

Page 17: Introdução JQuery

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

Page 18: Introdução JQuery

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

Page 19: Introdução JQuery

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

Page 20: Introdução JQuery

● Bind

Atrela um ou mais eventos a um selector.

$('a').bind({ mouseover: function(){ $(this).addClass('ativo'); }, mouseout: function(){ $(this).removeClass('ativo'); }});

Page 21: Introdução JQuery

● 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’);});

Page 22: Introdução JQuery

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

Page 23: Introdução JQuery

● One

Executa o evento apenas uma vez. Faz o unbind automático.

$("div").one('click', function() {alert('Este evento não será mais executado.');

});

Page 24: Introdução JQuery

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

Page 25: Introdução JQuery

● 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’);

Page 26: Introdução JQuery

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

Page 27: Introdução JQuery

● 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

Page 28: Introdução JQuery

$.ajax({url : ‘ProdutoService.svc/Inserir’,data : produto,

dataType : ‘json’, sucess : function(data, status, xhr){ },

error: function(xhr, status, error){}

});

Page 29: Introdução JQuery

Performance● Ser o mais específico possível em um seletor

$(‘#id’) , $(‘div’)

● Método find: limita o escopo de busca$(‘#id’).find(‘p’)

Page 30: Introdução JQuery

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

Page 31: Introdução JQuery

● 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’);

Page 32: Introdução JQuery

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

Page 33: Introdução JQuery

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.

Page 34: Introdução JQuery

● 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’); });

Page 35: Introdução JQuery

● Falso Start

Levantar a necessidade do uso de funções de inicialização.

<script> $(‘h1’).html(‘hello’); $(document).ready(function(){

$(‘h1’).html(‘hello’);});

</script>

Page 36: Introdução JQuery

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

Page 37: Introdução JQuery

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

Page 38: Introdução JQuery

● 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;

Page 39: Introdução JQuery

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.

Page 40: Introdução JQuery

Contato:

Twitter: @jeanctoledoE-mail: [email protected]: www.jeantoledo.net

Page 41: Introdução JQuery