aula3

jQuery

Desenvolvimento de tecnologia RIA

Desenvolvimento de tecnologia RIA

jQuery

jQuery é uma biblioteca javaScript "leve" com o principio de escrever menos e fazer mais.

A idéia do jQuery é a de tornar a utilização de javaScript algo mais simples.

jQuery é uma biblioteca cross-browser

O que podemos fazer com jQuery?

A biblioteca jQuery contém as seguintes funcionalidades:

• Manipulação HTML/DOM • Manipulação CSS • Métodos de Eventos HTML • Efeitos e Animações • AJAX • Utilidades

Instalação do jQuery

Para instalarmos o jQuery podemos utilizar uma das duas versões disponíveis no seu site www.jquery.com.

A versão de produção (Production) é recomendada para sites que estão no ar, pois é uma versão reduzida e

comprimida.

A versão de desenvolvimento (Development) é utilizada

para ambientes onde se está desenvolvendo uma aplicação ou a testando (versão descomprimida e com fácil leitura).

Também existe a opção de utilizar scripts

disponibilizados através de CDNs como a do Google e

Como adicionar o jQuery a página?

Caso tenha feito o download do arquivo:

<script src =“jquery-1.11.1.min.js”></script>

Caso venha a usar o jQuery disponibilizado via CDN: <script src="http://ajax.googleapis.com/ajax/libs/

jquery/1.11.1/jquery.min.js"></script>

Quais os problemas que podem existir ao se

utilizar um script obtido através de CDNs?

Iniciando a utilização

Antes de estudarmos a sintaxe do jQuery, devemos lembrar que caso seu site possua inúmeros scripts de jQuery, o primeiro documento a ser carregador deve ser o próprio jQuery, seguido de seus outros scripts, na ordem de dependência funcional entre os mesmos.

Sintaxe - jQuery

A sintaxe do jQuery é baseada na seleção de elementos

HTML e execução de algumas ações sobre esses elementos.

Sintaxe básica é: $(seletor).ação()

O simbolo $ define/acessa o jQuery

O seletor é utilizado para achar os elementos HTML

A ação é uma função jQuery a ser executada no elemento selecionado.

Sintaxe - Exemplos

• $(this).hide() - Esconde o elemento atual.

• $(“p”). hide() - Esconde todos elementos <p>.

• $(“.teste”).hide() - Esconde todos elementos com

class=“teste”.

• $(“#teste”).hide() - Esconde todos elementos com

Iniciando a utilização

Todos os métodos jQuery devem estar dentro do seguinte trecho de código:

$(document).ready(function(){

//Métodos jQuery são escritos aqui });

O motivo dessa prática é o de prevenir que um código seja executado antes que o documento tenha sido totalmente carregado (ready).

Iniciando a utilização

Existe outra forma de declarar a inicialização do jQuery, que é mais curta porém mais dificil de ser lida:

$(function(){

//Métodos jQuery são escritos aqui… });

Seletores - Por Nome do Elemento

Todos os seletores em jQuery iniciam com o cifrão e parênteses: $().

É possível selecionar elementos baseado no nome do elemento. Você pode selecionar todos os elementos <p> na página da

seguinte forma:

Seletores - Exemplo

Exemplo - Quando um usuário clicar em um botão, todos elementos <p> ficam invisíveis:

$(document).ready(function(){ $(“button”).click(function(){

$(“p”). hide(); });

Seletores - Por ID

Para achar um elemento com um id especifico, escreva um sustenido (hash), seguido do id do elemento HTML:

Seletores - Por

_Class

Para achar um elemento com uma classe especifica, escreva um ponto, seguido do nome da classe:

Seletores - Avançado

• $(“*”) - Seleciona todos os elementos

• $(this) - Seleciona o elemento atual

• $(“p.intro”) - Seleciona o elemento <p> com class =

"intro"

• $(“p:first”) - Seleciona o primeiro elemento <p> do

documento

• $(“p:last”) - Seleciona o último elemento <p> do

documento

Maiores informações

sobre seletores disponíveis no jQuery:

http://www.w3schools.com/ jquery/

Eventos

O que são eventos?

Todas as diferentes ações de um usuário o qual a página web pode responder são chamados de eventos.

Um evento representa o momento preciso de quando algo acontece.

Exemplos:

• Mover o mouse sobre um elemento;

• Selecionar um radio button;

Eventos

O termo fires (aciona) é comumente utilizado em eventos.

Exemplo: "O evento de keypress é acionado no momento onde você pressiona uma tecla.”

Eventos - Básicos do DOM

Eventos de Mouse Eventos de Teclado Eventos de Formulários

Eventos de Janela/ Documento

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

Eventos - Utilização

A forma de anexar um tratador de evento (event handler) a um elemento: $(element).evento(function(){

//código jQuery });

Exemplo - Event Handler para um click nos elementos <p> $(“p”).click(function(){

$(this).hide(); });

Eventos - Exemplo

$(“#p1”).hover(function(){ alert(“entrou”); }, function(){ alert(“saiu”); });

Por que nos temos duas funções dentro

do evento hover?

hover =

mouseenter + mouseleave

Eventos -

_{eventListeners}

O eventListener do jQuery segue o seguinte formato:

$(“document”).on(evento,elemento,function(){});

E diferentemente de um event handler, não precisa estar dentro do bloco de inicialização $(document).ready().

Eventos -

_{eventListeners}

Exemplo de eventListener em jQuery:

$(document).on(“click”, “#teste”, function(){ alert(“clicou no elemento com id teste”);

jQuery - Manipulação DOM

Uma parte muito importante do jQuery é a possibilidade de manipular o elemento DOM.

jQuery possui uma grande coleção de métodos

relacionados a facilitar a manipulação de elementos e atributos.

DOM - Obter conteúdo

Três simples, porém úteis, métodos jQuery para manipulação DOM são:

• text() - Define ou retorna o conteúdo de texto do elemento

selecionado.

• html() - Define ou retorna o conteúdo dos elementos

selecionados (Inclusive a marcação HTML).

• val() - Define ou retorna o valor de um campo de

DOM - Obter atributos

O método jQuery attr() é utilizado para obter valores de atributos.

O exemplo a seguir demonstra como ele pega os valores de um atributo href de um link.

$(“button”).click(function(){

alert($(“#form_in1").attr(“href”)); });

jQuery - Definição de Conteúdo

Para definir o conteúdo utilizaremos as mesmas três

funções para obter conteúdo:

• text() • html() • val()

jQuery - Definição de Conteúdo

Exemplo de definição de conteúdo:

$("#btn1").click(function(){ $(“#teste1").text("Olá mundo!"); }); $("#btn2").click(function(){ $(“#teste2").html("<b>Olá mundo!</b>"); }); $("#btn3").click(function(){ $(“#teste3").val("Valor padrão"); });

jQuery - Definição de Atributos

O método attr() também é utilizado para alterar e definir valores de atributos.

O exemplo a seguir demonstra como definir um valor de um href em um link:

$("button").click(function(){

$(“#w3s”).attr(“href","http://www.google.com/?q=jquery"); });

jQuery - Adicionar Elementos

Os quatro principais métodos para adição de elementos são:

• append() - Adiciona conteúdo no final dos elementos

selecionados.

• prepend() - Adiciona conteúdo no início dos elements

selecionados.

• after() - Adiciona conteúdo após os elementos selecionados.

• before() - Adiciona conteúdo antes dos elementos

jQuery - Remover Elementos

Existem dois métodos ara remover elementos e conteúdo utilizando jQuery.

• remove() - Remove os elementos selecionados (e seus elementos filhos). • empty() - Remove os elementos filhos dos elementos selecionados.

O método remove() também aceita filtros passados por parâmetros, como por exemplo:

• $(“p").remove(".italico");

jQuery - Manipulação CSS

jQuery possui diversos métodos para manipular o CSS. Nos iremos olhar os seguintes métodos:

• addClass() - Adiciona uma ou mais classes dos elementos

selecionados

• removeClass() - Remove uma ou mais classes dos elementos

selecionados

• toggleClass() - Alterna entre adicionar/remover classes dos

elementos selecionados

jQuery - Manipulação CSS

Exemplo de addClass() $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("importante"); }); Exemplo de toggleClass() $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });

jQuery - Manipulação CSS

O método css() define e retorna um ou mais propriedades de estilo para os elementos selecionados.

• css(“nome_da_propriedade”)

Exemplo - retornar propriedade de estilo de um elemento

jQuery - Manipulação CSS

Para definir múltiplas propriedades CSS, utilizem a seguinte sintaxe:

css({“nome_propriedade”:”valor”,”nome_propriedade”: “valor”, …});

Exemplo - definir cor do background e tamanho da fonte de um elemento

jQuery - Dimensões

Com o jQuery, é fácil trabalhar com a dimensão de elementos e da janela do navegador.

O jQuery possui diversos métodos específicos para essa atividade, sendo eles:

• width() • height() • innerWidth() • innerHeight() • outerWidth() • outerHeight()

jQuery - Dimensões

jQuery - Dimensões

Os métodos width() e height() definem e retornam valores sem incluir

padding, border ou margin.

Exemplo - retornar largura e altura de um elemento ("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); });

jQuery - Dimensões

As funções innerWidth() e innerHeight() retornam valores dos elementos, contendo o valor de padding.

As funções outerWidth() e outerHeight() retornam valores dos elementos, contendo o valor de padding e border e

jQuery - Efeitos

A biblioteca jQuery contém elementos básicos de animação de elementos como: • Hide • Show • Toggle • Slide • Fade • Animate

jQuery - Hide/Show/Toggle

Com o jQuery é possível esconder e apresentar elementos HTML com os métodos hide() e show().

$(elemento).hide(tempo, callback); $(element).show(tempo, callback);

É possível alternar entre o hide e show, através do método toggle().

jQuery - fadeIn

O método fadeIn funciona de forma similar ao show(), porém adiciona uma animação de transição na hora de apresentar o elemento que até então estava invisível.

$(elemento).fadeIn(velocidade, callback);

A velocidade pode ser em numéricos como (1000 = 1s) ou slow para lento e fast para rápido.

jQuery - fadeOut

Similar ao método fadeIn, o modelo fadeOut adiciona uma animação na transição do elemento, de visível para invisível.

jQuery - fadeToggle

O método fadeToggle alterna entre os métodos fadeIn() e fadeOut().

• Se os elementos estiverem invisíveis, o método

fadeToggle ira torna-los visíveis.

• Caso estejam visíveis, o método os tornara invisíveis.

jQuery - fadeTo

Esse método adiciona um controle no qual é possível controlar o nível de opacidade do elemento sendo animado.

$(elemento).fadeTo(tempo, opacidade, callback);

jQuery - slideDown

Com o jQuery é possível criar efeitos de slide (deslizar) em elementos HTML.

O método slideDown faz um elemento deslizar para baixo.

$(elemento).slideDown(tempo, callback);

jQuery - slideUp

O método slideUp() anima um elemento em HTML fazendo-o deslizar para cima.

$(elemento).slideUp(tempo, callback);

jQuery - slideToggle

Similar ao método FadeToggle, o método slideToggle, alterna entre slideUp e slideDown, dependendo do estado de visibilidade do elemento a qual ele está sendo chamado.

jQuery - animate

O método animate() permite a criação de animações customizadas.

É necessário passar como parâmetro, quais propriedades CSS eram animadas no elemento.

jQuery - animate

Exemplo de chamada simples do método animate()

$(“#teste”).animate({left: ‘250px’}, 2000);

Exemplo de chamada com múltiplas propriedades

$(“#teste”).animate({

left: ‘250px’, opacity: ‘0.3’, width: ‘550px’, height: ‘55px' }, 600);

jQuery - animate

Vale lembrar que todas os nomes das propriedades CSS devem ser camel-cased, ou seja (exemplo): ao invés de usar padding-left, utilize paddingLeft.

Nem todos elementos podem ser animados, como por exemplo, animações de cores não são nativas do jQuery e precisam de biblioteca externas para serem executadas.

jQuery - animate

É possível utilizar valores relativos no método animate().

Exemplo $(“#teste”).animate({ left: ‘200px’, width: ‘+=200px’, height: ‘-= 25px’}, 300);

jQuery - Empilhar Animações

O jQuery permite criar uma pilha de animações, sendo elas executadas uma após a outra.

var div=$(“#teste”);

1. div.animate({height:'300px',opacity:'0.4'},"slow"); 2. div.animate({width:'300px',opacity:'0.8'},"slow"); 3. div.animate({height:'100px',opacity:'0.4'},"slow"); 4. div.animate({width:'100px',opacity:'0.8'},"slow");

jQuery - stop

O método stop() permite que as animações sejam interrompidas antes de terminarem.

$(elemento).stop(pararFila, irFim);

O parâmetro pararFila é opcional e serve para limpar a fila de animações do elemento.

O parâmetro irFim serve para definir se a animação deve ir para seu estado final ou não, por padrão o valor setado é false.

jQuery - callback

O callback serve para executar funções após as animações serem realizadas. Isso previne erros de sequencia de execução no jQuery.

Exemplo

$(“#teste”).hide(“slow”, function(){ alert(“terminou de executar”);

jQuery - Chaining

O jQuery permite encadear ações/métodos, podendo executar múltiplos métodos em uma única linha de código. Trazendo uma vantagem de desempenho na execução.

Exemplo