Compile 2011Introdução ao jQuery
O que é?
jQuery é uma biblioteca desenvolvida
na linguagem javascript e permite
percorrer documentos html, manipular
eventos, criar animações e interações
AJAX para otimizar o desenvolvimento
web.
Compile 2011 – Introdução ao jQuery
Utilizaçã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>
Compile 2011 – Introdução ao jQuery
Seletores
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‟);
Compile 2011 – Introdução ao jQuery
Modificando CSSPara 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’);
Compile 2011 – Introdução ao jQuery
Exercício 1
Desenvolver uma funcionalidade que mostre 2 opções decores (Preto „#000000‟ / Cinza claro „#CCCCCC‟) para ousuário escolher como fundo da página.
Compile 2011 – Introdução ao jQuery
Desenvolver uma funcionalidade que o usuário possa escolhero alinhamento do texto de um parágrafo está aplicado a classecitacao.
Resolução
Atributos 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);
Compile 2011 – Introdução ao jQuery
Estado 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
Compile 2011 – Introdução ao jQuery
Exercício 2 Desenvolver uma página exibindo a política de um
determinado sistema onde o usuário só consegueavançar o cadastro se aceitar os termos de uso.
Compile 2011 – Introdução ao jQuery
Resolução
Funçã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
Compile 2011 – Introdução ao jQuery
Manipulação de HTML em
elementos 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”);
Compile 2011 – Introdução ao jQuery
Exercício 3
Desenvolver uma funcionalidade que insira noconteúdo de uma DIV o texto digitado pelo usuário emum campo texto.
Compile 2011 – Introdução ao jQuery
Desenvolver uma funcionalidade onde o usuário digite o
nome de produtos e o sistema mostre em forma de lista.
Resolução
Resolução
Visibilidade de elementosA 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 seletor
Ex.:
$(“#conteudo”).hide() //Esconde a div de id=conteudo.
$(“#conteudo”).show() //Mostra a div de id=conteudo.
Compile 2011 – Introdução ao jQuery
Exibição temporária de elementoA 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 que a função setTimeOut foi chamada.
Compile 2011 – Introdução ao jQuery
Exercí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.
Compile 2011 – Introdução ao jQuery
Resolução
Evento 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());
}
);
Compile 2011 – Introdução ao jQuery
Exercício 5 Desenvolver uma funcionalidade que mostre em uma tabela
uma relação de produtos para o usuário selecionar com ocheckbox. A cada produto selecionado a linha da tabeladeve ser destacada com cor diferente do restante da tabela.Deve ser desenvolvido um botão para marcar e desmarcarautomaticamente todos os produtos.
Desenvolver a mesa funcionalidade acima porém com umradio.
Compile 2011 – Introdução ao jQuery
Resolução
Resolução
AJAX – 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) };
Compile 2011 – Introdução ao jQuery
Exercí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.
Compile 2011 – Introdução ao jQuery
Resolução - POST
Resolução - GET
Referências
Compile 2011 – Introdução ao jQuery
Ajax com jQuery
Autor: Maurício Samy Silva
http://www.livroajaxjquery.com.br/
jQuery
Autor: Maurício Samy Silva
http://www.livroajaxjquery.com.br/
OBRIGADO!
Compile 2011 – Introdução ao jQuery
Yuri Costa
Home: http://www.yuricosta.com
(31) 8573-4585