Introdução ao jquery

Compile 2011
Introdução ao jQuery

Compile 2011 – Introduçã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.


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>


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


Modificando CSS
Para modificar o CSS de qualquer elemento basta utilizar a
função 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 função:
$(seletor).css(‘propriedade’);


Exercí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


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 a
mesma função sem o parâmetro valor:
$(seletor).attr(propriedade);


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


Exercí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


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


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


Exercí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


Visibilidade 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 seletor

Ex.:
$(“#conteudo”).hide() //Esconde a div de id=conteudo.
$(“#conteudo”).show() //Mostra a div de id=conteudo.


Exibiçã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 que
a função setTimeOut foi chamada.


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.

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


Exercí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


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


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.

Resolução - POST

Resolução - GET


Referê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/


OBRIGADO!

Yuri Costa
Home: http://www.yuricosta.com
(31) 8573-4585
contato@yuricosta.com

Introdução ao jquery

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (15)

Semelhante a Introdução ao jquery

Semelhante a Introdução ao jquery (20)

Introdução ao jquery