Your SlideShare is downloading. ×
0
Compile 2011Introdução ao jQuery
Compile 2011 – Introdução ao jQueryO que é?jQuery é uma biblioteca desenvolvidana linguagem javascript e permitepercorrer ...
Compile 2011 – Introdução ao jQueryUtilização da biblioteca Importação:<head>          <script type=“text/javascript” src...
Compile 2011 – Introdução ao jQuerySeletores Evento em elemento:$(„elemento‟).evento() => $(„p‟).css(„color‟, „#FF0000‟);...
Compile 2011 – Introdução ao jQueryModificando CSS Para modificar o CSS de qualquer elemento basta utilizar afunção css():...
Compile 2011 – Introdução ao jQueryExercício 1 Desenvolver uma funcionalidade que mostre 2 opções de  cores (Preto „#0000...
Compile 2011 – Introdução ao jQueryAtributos de Elementos É possivel modificar atributos dos elementos HTML  utilizando a...
Compile 2011 – Introdução ao jQueryEstado do elemento $(seletor).is(„:empty‟); //Verifica seletor sem sub-  elementos $(...
Compile 2011 – Introdução ao jQueryExercício 2 Desenvolver uma página exibindo a política de um determinado sistema onde ...
Compile 2011 – Introdução ao jQueryFunção val() A função val() permite retornar ou atribuir valor a um  elemento, por exe...
Compile 2011 – Introdução ao jQueryManipulação de HTML emelementos Função html()    Atribui um texto html para um elemen...
Compile 2011 – Introdução ao jQueryExercício 3 Desenvolver uma funcionalidade que insira no  conteúdo de uma DIV o texto ...
Compile 2011 – Introdução ao jQueryVisibilidade de elementos A função hide() e show() permite o programador  controlar ex...
Compile 2011 – Introdução ao jQueryExibição temporária de elemento A função setTimeOut() realiza um evento por um certo  ...
Compile 2011 – Introdução ao jQueryExercício 4 Desenvolver uma página de login onde o usuário digite o login e  senha de ...
Compile 2011 – Introdução ao jQueryEvento live() Assim como o click(), o ready() e outros, live() é um gatilho  secundári...
Compile 2011 – Introdução ao jQueryExercício 5 Desenvolver uma funcionalidade que mostre em uma tabela uma relação de pro...
Compile 2011 – Introdução ao jQueryAJAX – POST / GET O jQuery manipula requisições AJAX através das funções $.post() e $....
Compile 2011 – Introdução ao jQueryExercício 6 Desenvolver uma funcionalidade para carregar as cidades de um determinado ...
Compile 2011 – Introdução ao jQueryReferências      jQuery        Autor: Maurício Samy Silva        http://www.livroaja...
Compile 2011 – Introdução ao jQuery               OBRIGADO!Yuri CostaHome: http://www.yuricosta.com(31) 8573-4585contato@y...
Upcoming SlideShare
Loading in...5
×

Introdução ao jquery

2,137

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
2,137
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introdução ao jquery"

  1. 1. Compile 2011Introdução ao jQuery
  2. 2. Compile 2011 – Introdução ao jQueryO que é?jQuery é uma biblioteca desenvolvidana linguagem javascript e permitepercorrer documentos html, manipulareventos, criar animações e interaçõesAJAX para otimizar o desenvolvimentoweb.
  3. 3. Compile 2011 – Introdução ao jQueryUtilização da biblioteca Importação:<head> <script type=“text/javascript” src=“jquery.js”></script> <script type=“text/javascript”> $(function(){ $(seletor).click(function(){ //ação }); }); </script></head>
  4. 4. Compile 2011 – Introdução ao jQuerySeletores Evento em elemento:$(„elemento‟).evento() => $(„p‟).css(„color‟, „#FF0000‟); Evento em classe („.‟) :$(„.classe‟).evento() => $(„.menu‟).hide(); Evento em id („#‟):$(„#id‟).evento() => $(„#btnenviar‟).attr(„disabled‟, „true‟);
  5. 5. Compile 2011 – Introdução ao jQueryModificando CSS Para modificar o CSS de qualquer elemento basta utilizar afunção css():$(seletor).css(„propriedade‟, „valor‟);Ex.:$(„#conteudo‟).css(„border‟, „2px solid #999999‟);Obs.: Para retornar o valor de uma propriedade do css, bastautilizar a mesma função:$(seletor).css(‘propriedade’);
  6. 6. Compile 2011 – Introdução ao jQueryExercício 1 Desenvolver uma funcionalidade que mostre 2 opções de cores (Preto „#000000‟ / Cinza claro „#CCCCCC‟) para o usuário escolher como fundo da página. Desenvolver uma funcionalidade que o usuário possa escolher o alinhamento do texto de um parágrafo está aplicado a classe citacao. Resolução
  7. 7. Compile 2011 – Introdução ao jQueryAtributos de Elementos É possivel modificar atributos dos elementos HTML utilizando a função 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 amesma função sem o parâmetro valor:$(seletor).attr(propriedade);
  8. 8. Compile 2011 – Introdução 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 visível
  9. 9. Compile 2011 – Introdução ao jQueryExercício 2 Desenvolver uma página exibindo a política de um determinado sistema onde o usuário só consegue avançar o cadastro se aceitar os termos de uso. Resolução
  10. 10. Compile 2011 – Introdução ao jQueryFunção val() A função 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 campo
  11. 11. Compile 2011 – Introdução ao jQueryManipulação de HTML emelementos Função html()  Atribui um texto html para um elemento:  Ex.: $(“div”).html(“<p> texto </p>”); Função append()  Adiciona um texto html ao final de um elemento:  Ex.: $(“div”).append(“<p> texto 2 </p>”); Função remove()  Remove um texto html de um elemento:  Ex.: $(“div”).remove(“.texto”);
  12. 12. Compile 2011 – Introdução ao jQueryExercício 3 Desenvolver uma funcionalidade que insira no conteúdo de uma DIV o texto digitado pelo usuário em um campo texto. Resolução Desenvolver uma funcionalidade onde o usuário digite o nome de produtos e o sistema mostre em forma de lista. Resolução
  13. 13. Compile 2011 – Introdução ao jQueryVisibilidade de elementos A função hide() e show() permite o programador controlar exibição de elementos na página.$(seletor).hide() //Esconde um elemento$(seletor).show() //Exibe um seletorEx.:$(“#conteudo”).hide() //Esconde a div de id=conteudo.$(“#conteudo”).show() //Mostra a div de id=conteudo.
  14. 14. Compile 2011 – Introdução ao jQueryExibição temporária de elemento A função 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 quea função setTimeOut foi chamada.
  15. 15. Compile 2011 – Introdução ao jQueryExercício 4 Desenvolver uma página de login onde o usuário digite o login e senha de entrada de um suposto sistema:  Se os dados estiverem corretos, a página deve ocultar o formulário de login e exibir a div do sistema.  Se os dados estiverem incorretos, a página deve exibir uma mensagem informando que os dados estão incorretos por 5 segundos. Resolução
  16. 16. Compile 2011 – Introdução ao jQueryEvento live() Assim como o click(), o ready() e outros, live() é um gatilho secundário de um evento principal. Esta técnica é bastante utilizado por programadores web que utilizam jQuery.$(seletor).live(„gatilho primário‟, function(){ acao });Ex.:$(“.check”).live(„click‟, function(){ alert($(this).val()); });
  17. 17. Compile 2011 – Introdução ao jQueryExercício 5 Desenvolver uma funcionalidade que mostre em uma tabela uma relação de produtos para o usuário 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 botão para marcar e desmarcar automaticamente todos os produtos. Resolução Desenvolver a mesa funcionalidade acima porém com um radio. Resolução
  18. 18. Compile 2011 – Introdução ao jQueryAJAX – POST / GET O jQuery manipula requisições AJAX através das funções $.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) };
  19. 19. Compile 2011 – Introdução ao jQueryExercício 6 Desenvolver uma funcionalidade para carregar as cidades de um determinado estado selecionado pelo usuário em um comboBox.Obs.: Fazer das duas formas de requisição. Resolução - POST Resolução - GET
  20. 20. Compile 2011 – Introdução ao jQueryReferências  jQuery  Autor: Maurício Samy Silva  http://www.livroajaxjquery.com.br/  Ajax com jQuery  Autor: Maurício Samy Silva  http://www.livroajaxjquery.com.br/
  21. 21. Compile 2011 – Introdução ao jQuery OBRIGADO!Yuri CostaHome: http://www.yuricosta.com(31) 8573-4585contato@yuricosta.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×