Tecnologia Web
jQuery
Anna Izabel João Tostes Ribeiro
Pontifícia Universidade Católica de Minas Gerais
Sumário
●
Introdução
●
Seletores
●
Eventos
●
Manipulação HTML
●
Manipulação CSS
●
AJAX
Introdução
●
jQuery é uma biblioteca JavaScript
●
Simplifica programação em JavaScript
●
É fácil de aprender
●
Tutorial W3Schools
jQuery is designed to change the way that you write
JavaScript
O Que é jQuery?
●
jQuery é uma biblioteca de funções JavaScript
●
Técnica “write less, do more...“
●
Contém as seguintes funcionalidades:
o
Seleção de elementos HTML
o
Manipulação de elementos HTML
o
Manipulação de CSS
o
Funções de eventos HTML
o
Efeitos e animações em JavaScript
o
Travessia e modificação de HTML DOM
o
AJAX
Adicionando jQuery nas suas Páginas
●
A biblioteca jQuery é armazenada como um arquivo
JavaScript único, contendo todos os métodos jQuery
●
Ele pode ser adicionado a uma página web com o
seguinte script:
●
Por favor, note que a tag <script> deve ser dentro da
seção da tag <head>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
Download
●
Duas versões do jQuery estão disponíveis para download
●
Ambas as versões podem ser baixados jQuery.com
●
Se você não deseja armazenar a biblioteca jQuery em
seu próprio computador, você pode usar a biblioteca
jQuery hospedado pelo Google ou Microsoft
Download
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>
</head>
Google:
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/
jquery/jquery-1.4.2.min.js"></script>
</head>
Sintaxe
●
Com jQuery, você seleciona (query) elementos HTML e
executa “ações” sobre eles
●
A sintaxe jQuery é feita sob medida para a seleção de
elementos HTML e para executar alguma ação sobre o
elemento(s)
●
Sintaxe básica é: $ (selector) action ()
o
O símbolo $ para definir jQuery
o
(seletor) para consultar (ou encontrar) elementos HTML
o
jQuery action () para ser realizada no(s) elemento(s)
●
Alerta: jQuery usa uma combinação de XPath e sintaxe
Função
Document Ready
●
Nos nossos exemplos, todos métodos jQuery estão dentro de
uma função
document.ready()
:
$(document).ready(function(){
// jQuery functions go here...
});
●
Isso é para evitar qualquer código jQuery de executar antes
que o documento termine de ser carregado (estar pronto).
●
Aqui estão alguns exemplos de ações que podem falhar se as
funções forem executadas antes que o documento esteje
totalmente carregado:
o
Tentar esconder um elemento que não existe
Seletores
●
Exemplos:
o
$(this).hide() – esconde o elemento corrente
o
$("p").hide() – esconde todos os parágrafos
o
$("p.test").hide() – esconde todos os parágrafos com class="test"
Seletores
●
Seletores jQuery permitem selecionar e manipular
elementos HTML como um grupo ou como um único
elemento
o
Vimos exemplos de como selecionar diferentes elementos HTML
o
Este é um ponto chave para aprender como jQuery seleciona
exatamente os elementos que você deseja aplicar o efeito
●
Seletores jQuery permitem selecionar elementos HTML
(ou grupos de elementos) pelo nome do elemento, pelo
nome do atributo ou por conteúdo
●
Importante! Em termos HTML DOM:
o
Seletores permitem manipular elementos DOM como um grupo
Seletores: Elementos
●
jQuery utiliza seletores CSS para selecionar elementos
HTML
o
$("p") seleciona todos elementos <p>
o
$("p.intro") seleciona todos elementos <p> dentro da class="intro”
Seletores: Atributos
●
jQuery usa expressões XPath para selecionar elementos
com atributos fornecidos
o
$("[href]") seleciona todos elementos dentro de um atributo href
o
$("[href='#']") seleciona todos elementos com atributo href igual a
"#”
o
$("[href!='#']") seleciona todos elementos com atributo href
diferente de "#”
o
$("[href$='.jpg']") seleciona todos elementos com atributo href que
Seletores: Exemplo
●
Seletores CSS jQuery podem ser usados para alterar as
propriedades CSS para elementos HTML
●
O exemplo a seguir altera a cor de fundo de todos os
elementos p para amarelo:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow");
});
});
</script>
Seletores
Sintaxe Descrição
$(this) Elemento HTML atual
$("p") Todos elementos <p>
$("p.intro") Todos elementos <p> com class="intro" $("p#intro") Todos elementos <p> com id="intro" $("p#intro:first") O primeiro elemento <p> com id="intro" $(".intro") Todos elementos com class="intro" $("#intro") O primeiro elemento com id="intro"
$("ul li:first") O primeiro elemento <li> de cada <ul>
$("[href$='.jpg']") Todos elementos com atributo href que termina com “.jpg” $("div#intro .head") Todos elementos com class="head" dentro de elemento
<div> com id="intro"
• Teste: jQuery Selector Tester to experiment with the different selectors.
Eventos
●
jQuery é feito sob medida para lidar com eventos
●
Os métodos de manipulação de evento jQuery são
funções centrais no jQuery
●
Manipuladores de eventos são métodos que são
chamados quando "algo acontece" em HTML
o
O termo ”acionado por um evento" é frequentemente utilizado
●
É comum colocar o código jQuery em métodos do
Funções de Eventos
<html> <head>
<script type="text/javascript" src="jquery.js"></ script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p>
<p>This is another paragraph.</p> <button>Click me</button>
</body> </html>
•
No exemplo acima, a
função é chamada
quando o evento
click
para o botão é acionado:
o
$("button").click(function()
{..some code... } )
•
O método esconde todos
os elementos <p>:
Funções em Arquivo Separado
●
Se o seu site contém uma grande quantidade de páginas,
e você quer que seu funções jQuery para fácil
manutenção, coloque suas funções jQuery em um arquivo
js separado
●
Quando nós demonstramos jQuery aqui, as funções são
adicionados diretamente para a seção <head>, no
entanto, às vezes é preferível colocá-los em um arquivo
separado:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
Conflito de Nomes
•
jQuery usa o símbolo $
como um atalho jQuery.
•
Algumas outras
bibliotecas JavaScript
também usam o $ para
suas funções
•
O método
jQuery
noConflict()
especifica um
nome personalizado
(como jq), em vez de usar
o $.
<html><head>
<script type="text/javascript" src="jquery.js"> </script> <script type="text/javascript"> var jq=jQuery.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").hide(); }); }); </script> </head><body> <h2>This is a heading</h2> <p>This is a paragraph.</p>
<p>This is another paragraph.</p> <button>Click me</button>
Eventos em jQuery
●
Aqui estão alguns exemplos de métodos de evento em jQuery:
Método do Evento
Descrição
$(document).ready(function)
Liga-se uma função para o evento pronto de um
documento (quando o documento for concluído o
carregamento)
$(selector).click(function)
Gatilhos, ou liga uma função ao evento click de
elementos selecionados
$(selector).dblclick(function)
Gatilhos, ou liga uma função para o evento de
clique duplo de elementos selecionados
$(selector).focus(function)
Gatilhos, ou liga uma função para o evento de
foco de elementos selecionados
$(selector).mouseover(function) Gatilhos, ou liga uma função para o evento
mouseover de elementos selecionados
Efeitos jQuery
●
Ocultar, Mostrar, Slide, Alternar, Fade, e Animar. WOW!
●
Exemplos:
o
jQuery hide()
§
Esconde elementos
o
jQuery slideToggle()
§
Efeito de painel deslizante
o
jQuery fadeTo()
§
Esmaecimento
o
jQuery animate()
Esconde, Aparece
●
Com jQuery, você pode ocultar e mostrar elementos
HTML com os métodos
hide ()
e
show ()
:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Esconde, Aparece
●
Ambos
hide ()
e
show ()
podem levar dois parâmetros
opcionais:
o
Velocidade e retorno de chamada
●
Sintaxe:
o
$(selector).hide(speed,callback)
o
$(selector).show(speed,callback)
●
O parâmetro
speed
especifica a velocidade do esconder /
mostrar, e pode ter os seguintes valores: "slow", "fast",
"normal", ou milésimos de segundo:
$("button").click(function(){
$("p").hide(1000);
jQuery Toogle
●
O método
jQuery toggle ()
alterna a visibilidade dos
elementos HTML usando os métodos sh
ow ()
ou
hide ()
o
Elementos mostrados são escondidos e elementos ocultos são
mostrados.
●
Sintaxe:
o
$(selector).toggle(speed,callback)
§
O parâmetro speed pode ter os seguintes valores: "slow", "fast",
"normal", ou milésimos de segundo
§
O parâmetro callback é o nome de uma função a ser executada após
o método hide (ou show) concluído
$("button").click(function(){
$("p").toggle();
jQuery Slice
●
Os métodos de painel deslizante em jQuery gradualmente
alteram a altura dos elementos selecionados
●
jQuery tem os métodos de painel deslizante:
o
$(selector).slideDown(speed,callback)
o
$(selector).slideUp(speed,callback)
o
$(selector).slideToggle(speed,callback)
●
Parâmetros:
o
O parâmetro speed pode ter os seguintes valores: "slow", "fast", "normal",
ou milésimos de segundo
o
O parâmetro callback é o nome de uma função a ser executada após a
Fade In, Fade Out
●
Os métodos de desaparecer gradualmente em jQuery
alteram a opacidade de elementos selecionados
●
jQuery tem os seguintes métodos de desaparecer:
o
$(selector).fadeIn(speed,callback)
o
$(selector).fadeOut(speed,callback)
o
$(selector).fadeTo(speed,opacity,callback)
●
Parâmetros:
o
O parâmetro speed pode ter os seguintes valores: "slow", "fast",
"normal", ou milésimos de segundo
o
O parâmetro de opacidade no método fadeTo () permite fading
para uma opacidade parâmetro
o
O parâmetro callback é o nome de uma função a ser executada
Animação Customizada
●
A sintaxe do método de jQuery para fazer animações
personalizadas é:
o
$(selector).animate({params},[duration],[easing],[callback])
o
Params é o parâmetro-chave
§
Ele define as propriedades CSS que serão animadas
o
Muitas propriedades podem ser animadas ao mesmo tempo:
§
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
o
O segundo parâmetro é a duração.
§
Ele especifica a velocidade da animação
§
Valores possíveis são "fast", ”slow", "normal", ou milésimos de
segundo
Animação Customizada
●
Importante!
o
Elementos HTML são posicionados estáticos por padrão e não
podem ser movidos
o
Para fazer com que os elementos sejam móveis, defina a
propriedade CSS position para fixo (fixed), relativo (relative) ou
absoluto (absolute).
Efeitos jQuery
●
Exemplos de funções de efeitos em jQuery:
Sintaxe Descrição
$(selector).hide() Esconde elemento selecionado $(selector).show() Mostra o elemento selecionado
$(selector).toggle() Alterna entre mostrar e esconder o elemento selecionado $(selector).slideDown() Slice-down, mostra elementos selecionados
$(selector).slideUp() Slice-up, esconde elementos selecionados
$(selector).slideToggle() Alterna entre slice-down e slice-up nos elementos selecionados $(selector).fadeIn() Aparecimento gradual dos elementos selecionados
$(selector).fadeOut() Desaparecimento gradual dos elementos selecionados
$(selector).fadeTo() Desaparecimento gradual dos elementos selecionados com uma dada opacidade
Funções Callback
●
Uma função de callback é executada após a animação
atual ser 100% concluída.
●
Declarações JavaScript são executados linha por linha.
o
No entanto, com animações, a próxima linha de código pode ser
executada, embora a animação não tenha terminado
§
Isto pode criar erros.
●
Para evitar isso, você pode criar uma função de callback
●
Uma função de callback é executada após a animação
Funções Callback
●
Sintaxe: $(selector).hide(speed,callback)
o
O parâmetro callback é uma função a ser executada após o efeito
esconder ser concluído:
o
Sem o parâmetro callback, o box de alerta é mostrado antes do
Manipulação HTML
●
jQuery contém poderosos métodos (funções) para alterar
e manipular elementos HTML e atributos.
●
Mudar conteúdo HTML
o
$(selector).html(content)
o
O método html () altera o conteúdo (innerHTML) de elementos
Manipulação HTML
●
Adicionar conteúdo HTML:
o
$(selector).append(content)
§
O método append () adiciona conteúdo para o interior de
combinar elementos HTML.
o
$(selector).prepend(content)
§
O método prepend () ”precede" conteúdo para o interior de
Manipulação HTML
●
Adicionar conteúdo HTML:
o
$(selector).after(content)
§
O método after () insere conteúdo HTML depois de todos os
elementos correspondentes
o
$(selector).before(content)
§
O método before() insere elementos HTML antes de todos os
Manipulação HTML
Função
Descrição
$(selector).html(content)
Altera o HTML (interna) de elementos
selecionados
$(selector).append(content) Acrescenta o conteúdo para o HTML (interna) de
elementos selecionados
$(selector).after(content)
Adiciona HTML após elementos selecionados
For a full jQuery HTML reference, please go to our jQuery HTML Methods Reference.
Manipulação CSS
●
jQuery tem um método importante para a manipulação de
CSS: css ()
●
O método css () tem três sintaxes diferentes, para realizar
diferentes tarefas
o
css (name) – Retorna o valor da propriedade CSS
o
css (nome, valor) - Defina a propriedade CSS e o valor
o
css ({propriedades}) - Conjunto várias propriedades CSS e
Manipulação CSS
Propriedade CSS
Descrição
$(selector).css(name)
Obter o valor de propriedade de estilo do primeiro
elemento combinado
$(selector).css(name,value) Definir o valor de uma propriedade de estilo para
os elementos combinados
$(selector).css({properties}) Definir propriedades de estilo múltiplas para
elementos combinados
$(selector).height(value)
Definir a altura dos elementos combinados
$(selector).width(value)
Definir a largura dos elementos combinados
Manipulação CSS
●
Retorna propriedade CSS
o
Use css (nome) para retornar o valor da propriedade CSS
Manipulação CSS
●
Atribui propriedade e valor CSS
o
Use css(name,value) para especificar a propriedade CSS para
Manipulação CSS
●
Atribui múltiplos pares propriedade/valores CSS
o
Use css({properties}) para atribuir uma ou mais propriedades/
Manipulação CSS
●
Manipulação de tamanho:
Manipulação CSS
●
Manipulação de tamanho:
o
O método width() atribui a largura para todos os elementos
jQuery e Ajax
●
jQuery tem uma rica biblioteca de métodos (funções) para
jQuery e Ajax
●
jQuery tem uma rica biblioteca de métodos (funções) para
jQuery e Ajax
●
Ajax
o
AJAX = Asynchronous JavaScript and XML.
o
AJAX é uma técnica para criação de páginas web rápida e
dinâmica
o
AJAX permite que páginas web possam ser atualizado de forma
assíncrona através da troca de pequenas quantidades de dados
com o servidor nos bastidores
o
Isto significa que é possível atualizar partes de uma página web,
jQuery e Ajax
●
jQuery fornece um rico conjunto de métodos para
desenvolvimento web em AJAX
●
Com jQuery AJAX, você pode solicitar TXT, HTML, XML
ou dados JSON de um servidor remoto usando HTTP
GET e HTTP POST
●
E você pode carregar dados remotos selecionados
jQuery e Ajax
●
O método jQuery load() é uma função AJAX simples (mas
muito poderosa)
●
SIntaxe:
o
$(selector).load(url,data,callback)
●
Use o seletor para definir os elementos HTML que deseja
mudar, e o parâmetro url para especificar um endereço da
web para seus dados
●
Apenas se você quiser enviar dados para o servidor, você
precisa usar o parâmetro de dados
o
Somente se você precisar acionar uma função após a conclusão,
jQuery e Ajax
●
Exemplo:
<html><head>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").load('test1.txt'); }); }); </script></head> <body>
<div><h2>Let AJAX change this text</h2></div> <button>Change Content</button>
</body> </html>
jQuery e Ajax
●
Ajax baixo nível:
o
$.ajax(options) é a sintaxe da função AJAX de baixo nível
o
$.ajax oferece mais funcionalidades do que as funções de nível
superior como de load, get e post, mas é também mais difícil de
usar
o
O parâmetro options tem pares de nomes/valores que definem os
dados: url, senhas, tipos de dados, filtros, conjuntos de
caracteres, tempo limite e as funções de erro
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"test1.txt", success:function(result){
$("div").html(result);
}});
});});
Load remote data into an XMLHttpRequest object
