Introdução ao jquery

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>


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


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.


Desenvolver uma funcionalidade que o usuário possa escolhero alinhamento do texto de um parágrafo está aplicado a classecitacao.

Resolução

http://www.yuricosta.com/compile/atividade1.html

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


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ó consegueavanç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 noconteúdo de uma DIV o texto digitado pelo usuário emum campo texto.


Desenvolver uma funcionalidade onde o usuário digite o

nome de produtos e o sistema mostre em forma de lista.

Resolução

Resolução

http://www.yuricosta.com/compile/atividade3_1.html


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.


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.


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


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


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


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!


Yuri Costa

Home: http://www.yuricosta.com

(31) 8573-4585

[email protected]

http://www.yuricosta.com/

mailto:[email protected]

Introdução ao jquery

Design

Transcript of Introdução ao jquery