of 21/21
Compile 2011 Introdução ao jQuery

Introdução ao jquery

  • View
    2.140

  • Download
    0

Embed Size (px)

Text of Introdução ao jquery

Introduo ao Jquery

Compile 2011Introduo ao jQueryO que ?jQuery uma biblioteca desenvolvida na linguagem javascript e permite percorrer documentos html, manipular eventos, criar animaes e interaes AJAX para otimizar o desenvolvimento web.Compile 2011 Introduo ao jQueryUtilizao da bibliotecaImportao:

$(function(){$(seletor).click(function(){//ao});});

Compile 2011 Introduo ao jQuerySeletoresEvento em elemento:$(elemento).evento() => $(p).css(color, #FF0000);

Evento em classe (.) :$(.classe).evento() => $(.menu).hide();

Evento em id (#):$(#id).evento() => $(#btnenviar).attr(disabled, true);Compile 2011 Introduo ao jQueryModificando CSS Para modificar o CSS de qualquer elemento basta utilizar a funo css():

$(seletor).css(propriedade, valor);

Ex.:$(#conteudo).css(border, 2px solid #999999);

Obs.: Para retornar o valor de uma propriedade do css, basta utilizar a mesma funo:$(seletor).css(propriedade);Compile 2011 Introduo ao jQueryExerccio 1Desenvolver uma funcionalidade que mostre 2 opes de cores (Preto #000000 / Cinza claro #CCCCCC) para o usurio escolher como fundo da pgina.Compile 2011 Introduo ao jQueryDesenvolver uma funcionalidade que o usurio possa escolher o alinhamento do texto de um pargrafo est aplicado a classe citacao. ResoluoAtributos de Elementos possivel modificar atributos dos elementos HTML utilizando a funo attr():

$(seletor).attr(atributo, valor);

Ex.:$(img).attr(src, http://www.fotosimagens.net/wp-content/uploads/2011/08/Paisagem-sol.jpg);

Obs.: Para retornar o valor de um atributo basta utilizar a mesma funo sem o parmetro valor:$(seletor).attr(propriedade);Compile 2011 Introduo ao jQueryEstado do elemento$(seletor).is(:empty); //Verifica seletor sem sub-elementos$(seletor).is(:enabled); //Verifica seletor habilitado$(seletor).is(:checked); //Verifica seletor marcado$(seletor).is(:visible); //Verifica seletor visvelCompile 2011 Introduo ao jQueryExerccio 2 Desenvolver uma pgina exibindo a poltica de um determinado sistema onde o usurio s consegue avanar o cadastro se aceitar os termos de uso.Compile 2011 Introduo ao jQueryResoluoFuno val()A funo val() permite retornar ou atribuir valor a um elemento, por exemplo, um input:

$(seletor).val();

Ex.:var texto = $(#txttexto).val(); //retorna valor do campo$(#txttexto).val(Ol Mundo); //Atribui valor ao campoCompile 2011 Introduo ao jQueryManipulao de HTML em elementosFuno html()Atribui um texto html para um elemento:Ex.: $(div).html( texto );

Funo append()Adiciona um texto html ao final de um elemento:Ex.: $(div).append( texto 2 );

Funo remove()Remove um texto html de um elemento:Ex.: $(div).remove(.texto);

Compile 2011 Introduo ao jQueryExerccio 3Desenvolver uma funcionalidade que insira no contedo de uma DIV o texto digitado pelo usurio em um campo texto.Compile 2011 Introduo ao jQueryDesenvolver uma funcionalidade onde o usurio digite o nome de produtos e o sistema mostre em forma de lista.ResoluoResoluoVisibilidade de elementosA funo hide() e show() permite o programador controlar exibio de elementos na pgina.

$(seletor).hide() //Esconde um elemento$(seletor).show() //Exibe um seletor

Ex.:$(#conteudo).hide() //Esconde a div de id=conteudo.$(#conteudo).show() //Mostra a div de id=conteudo.Compile 2011 Introduo ao jQueryExibio temporria de elementoA funo setTimeOut() realiza um evento por um certo tempo determinado pelo programador.

setTimeOut(function (){ acao }, tempo);Obs.: O tempo expressado em milissegundos.

Ex.:setTimeOut(function() {$(#retorno).hide(slow)}, 2000); //Esconde o elemento retorno depois de 2 segundos que a funo setTimeOut foi chamada.Compile 2011 Introduo ao jQueryExerccio 4Desenvolver uma pgina de login onde o usurio digite o login e senha de entrada de um suposto sistema:

Se os dados estiverem corretos, a pgina deve ocultar o formulrio de login e exibir a div do sistema.

Se os dados estiverem incorretos, a pgina deve exibir uma mensagem informando que os dados esto incorretos por 5 segundos.Compile 2011 Introduo ao jQueryResoluoEvento live()Assim como o click(), o ready() e outros, live() um gatilho secundrio de um evento principal. Esta tcnica bastante utilizado por programadores web que utilizam jQuery.

$(seletor).live(gatilho primrio, function(){ acao });

Ex.:$(.check).live(click, function(){ alert($(this).val());});Compile 2011 Introduo ao jQueryExerccio 5 Desenvolver uma funcionalidade que mostre em uma tabela uma relao de produtos para o usurio selecionar com o checkbox. A cada produto selecionado a linha da tabela deve ser destacada com cor diferente do restante da tabela. Deve ser desenvolvido um boto para marcar e desmarcar automaticamente todos os produtos.

Desenvolver a mesa funcionalidade acima porm com um radio.Compile 2011 Introduo ao jQueryResoluoResoluoAJAX POST / GET O jQuery manipula requisies AJAX atravs das funes $.post() e $.GET().

$.post(script, { parametros }, function(data){ acao de retorno });$.get(script, { parametros }, function(data){ acao de retorno });

Ex.:$.post(cadastro.php, $(#formulario).serialize(), function(data){ $(#retorno).html(data)});

$.get(carregafoto.php, { codigo : 1, local : festa }, function(data){ $(div).html(data) };

Compile 2011 Introduo ao jQueryExerccio 6 Desenvolver uma funcionalidade para carregar as cidades de um determinado estado selecionado pelo usurio em um comboBox.

Obs.: Fazer das duas formas de requisio.Compile 2011 Introduo ao jQueryResoluo - POSTResoluo - GETReferncias

Compile 2011 Introduo ao jQuery Ajax com jQueryAutor: Maurcio Samy Silvahttp://www.livroajaxjquery.com.br/jQueryAutor: Maurcio Samy Silvahttp://www.livroajaxjquery.com.br/

OBRIGADO!Compile 2011 Introduo ao jQueryYuri CostaHome: http://www.yuricosta.com(31) [email protected]