O jQuery é uma biblioteca JavaScript que facilita a
execução de rotinas simplificando algumas manipulações do DOM e do
html.
Podemos utilizar a biblioteca jQuery diretamente em um
link interno para ela ou através de links externos.
O dowload da biblioteca é feita no site
jQuery
A API jQuery é dividaida em 10 seções:
Criar a página inicial de estudo.
Para adicionar o jQuery na página devemos criar o link para o
src da API.
Para executarmos funções no jQuery podemos executar os
scripts da seguinte forma:
jQuery(document).ready(function (e) {
alert('Pronto, seu DOM foi carregado');
});
Essa rotina jQuery(document).ready pode ser substituida
pelo símbolo $. Dessa forma todas as instruções em
jQuery podem ser iniciadas dentro do <script>
apenas iniciando com o sinal:
$(function (e) {
alert('Pronto, seu DOM foi carregado mais facilmente');
});
Podemos selecionar elementos do html apenas utilizando o operador
$. Esse elemento funciona da mesma forma que a instrução
document.getElementByTagName() do JS.
Desse modo quando fazemos essa instrução em jQuery:
alert('Essa página contém ' + $('a').length + ' links contados
com jQuery');
É o mesmo que fazermos essa em JS Puro:
let teste = document.getElementsByTagName('a').length;
alert('Essa página contém ' + teste + ' links contados com JS
puro');
Podemos selecionar tags aninhadas em jQuery apenas informando sua
ordem. Essa rotina não funciona no JS Puro.
Aqui só serão contados os elementos do tipo <a> que estejam
dentro da tag <nav>
alert('Essa página contém ' + $('nav a').length + ' links
contados com jQuery');
Em JS Puro essa rotina retorna o valor '0':
let teste = document.getElementsByTagName('nav a').length;
alert('Essa página contém ' + teste + ' links contados com JS
puro');
Podemos manipular o estilo CSS dos elementos utilizando a notação
apresentada acima seguida de .css('propriedade','valor'):
$(function () {
$('nav a').css('color', 'red');
});
É possível também encadear várias instruções na mesma linha:
$(function () {
$('nav a').css('color', 'red').css('text-decoration', 'none');
});
Para selecionar apenas o primeiro elemento (como no
:first-child) basta inserir :first após o seletor:
$('nav a:first').css('color', 'yellow');
Tmabém é permitido a selecão com :last, :odd,
:even e :nth().
Podemos selecionar pelo conteudo da tag utilizando
:contains('valor_desejado'). $('nav a:contains("Argentina")').css('color', 'pink');
Podemos fazer seleções de elementos através de propriedades. Por
exemplo, se queremos selecionar as <li> que tenham classes
definidas (independente do nome das classes), podemos selecionar
utilizando o nome da propriedade (não o seu valor):
$('li[class]').css('background-color', '#FF9');
$('li[id][title]').css('background-color', '#00F');
Podemos selecionar com o valor do da propriedade também: $('li[id="texto1"]').css('background-color', '#0F0');
Para fazer a seleção pelo nome do atributo podemos utilizar a
mesma sintaxe que no CSS ('.' para classes e '#' para ids).
Para selecionar propriedades apenas pelo texto final do seu valor
podemos preceder o nome da propriedade com '$'.
Preciso verificar melhor esse coringa. $('a[href$= ".zip"]')
Podemos inserir tags html antes ou depois do seletor com as
propriedades .before() e .after() $('a[href$= ".zip"]').before('<img
src="./images/icon_zip.gif" />');
Além de utilizar o .after() e .before() podemos
inserir elementos utilizando a função .insertAfter() e
.insertBefore(). Nesse caso devemos passar primeiro o
elemento a ser inserido e depois o local onde queremos inserir.
$('<li><img src="./image/foto4.jpg"
/>').insertBefore('li:first-child');
$('<li><img src="./image/foto5.jpg"
/>').insertAfter('li:nth(2)');
$('li:first').after('<li><img src="./image/foto6.jpg"
/>');
Outra forma de adicionar conteudo no html é com as funções
.append(), .prepend() e .html(). A
primeira adiciona ao final dos elementos, a segunda no início e a
terceira inclui apenas o conteúdo a uma tag já existente:
$('ul#listacursos').append('<li>Curso Bootstrap
Fundamental</li>');
$('ul#listacursos').prepend('<li>Curso PHP
Fundamental</li>');
$('h1').html('Formação Desenvolvimento Web Completo');
Podemos adicionar ou remover atributos em um elemento com as
funções .attr() e .removeAttr()
$('a').attr('title', 'Alpes Suiços');
$('a').attr('target', '_blank');
$('a').removeAttr('target');
Podemos remover tags diretamente através da função
.remove() aplicada ao seletor desejado. Podemos
susbtituir uma tag inteira com a função .replaceWith().
Caso desejemos apenas substituir o valor interno da tag podemos
utilizar a função .html(). Por fim é possível envolver
uma tag com a função .wrapAll() (envolve por fora da tag
selecionada) e .wrapInner() (envolve os elementos
internos da tag selecionada).
$('li:last').remove();
$('li.especifico').remove();
$('li:last').replaceWith('<li>Curso de
Bootstrap</li>');
$('li:last').html('Novo texto');
$('ul').wrapAll("<div style='border: 1px solid
#ccc'></div>");
$('div').wrapAll('<fieldset><legend>wrapAll</legend></fieldset>');
Através dos objetos $(window) e
$(document) podemos acessar diversas propriedades da área
do navegador e do documento. Aqui vemos as propriedades
width e height. Quando acessamos essas
propriedades através do $(window) recebemos os valores do
tamanho atual da janela. Já pelo objeto
$(document) recebemos os valores do tamanho do documento
incluindo áreas que estão além das scrollbars.
Para verificarmos a posição de um elemento utilizamos a
propriedade .position() seguida de qual parametro
queremos verificar (top ou left). Essa posição
pode variar de acordo com o tipo de position definido
(absolute, fixed, relative ou static).
Já com a função .offset() recuperamos a posição do
elemento filho mais o elemento pai.
Quando queremos nos referir a um elemento pai utilizamos a função
.offsetParent().
Para animar a rolagem de elementos de acordo com o tamanho da tela
selecionamos o elemento e executamos uma função vinculada ao
elemento .clic(). No exemplo executamos no documento
(através da seleção do body) uma animação com a função
.animate({scrollTop:300}, 1000).
Nesse caso fazemos um scroll em todo o documento de 300px
com a duração de 1 segundo.
$('nav li:nth-child(2)').click(function (e) {
$('html,body').animate({ scrollTop: 300 }, 1000);
});
Sabendo de antemão qual a altura total da tela podemos definir o
tamanho para cada elemento de modo que o scroll seja em
toda a tela de modo fixo. Entretanto para que o
scroll funcione em qualquer dispositivo podemos alterar o
valor fixo atribuindo a função de .offset().top. Desse
modo vamos recuperar o valor de acordo com as propriedades do
elemento.
$('nav li:nth-child(2)').click(function (e) {
$('html,body').animate( { scrollTop: $('#segunda').offset().top
}, 1000, );
});
Nesse momento ainda o tamanho dos elementos está fixo. Em breve
faremos com que ele seja definido de acordo com o dispositivo do
usuário.
Para fazermos o procedimento para os dois elementos basta
adicionar um novo listener agora para o primenro elemento de modo
que o scroll tenha como referencia sempre o top do
elemento desejado.
$('nav li:nth-child(1)').click(function (e) {
$('html,body').animate( { scrollTop: $('#primeira').offset().top
}, 1000, );
});
$('nav li:nth-child(2)').click(function (e) {
$('html,body').animate( { scrollTop: $('#segunda').offset().top
}, 1000, );
});
Após essa alteração podemos inserir novos elementos pois a posição
de scrollTop terá sempre como referencia seu offset.
Agora para ajustarmos a altura dos elementos no tamanho da tela do
usuário podemos definir o CSS através do jQuery, atribuindo o
height de acordo com o valor verificado em
$(window).height().
var altura = $(window).height();
$('#primeira').css('height', altura);
$('#segunda').css('height', altura);
$('#terceira').css('height', altura);
Do modo como está no entanto a altura não é ajustada
automaticamente quando redimensionamos a tela.
Para isso precisamos monitorar o evento .rezize() do
objeto window. Note que os eventos devem sempre executar uma função de
callback.
O rotina de definição do height pelo CSS passa a ser
executada por uma função qie por sua vez é executada sempre que o
evento resize() ocorrer.
$(function (e) {
$(window).resize(function (e) {
redimensionar();
});
Desse modo temos os valores da janela definidos automaticamente.
No jQuery monitoramos os eventos de click com a função
.click() ou com a função .on(). No primeiro caso
utilizamos uma função de callback para indicar a ação a fazer. Já
quando utilizamos a função .on() devemos passar o evento
e em seguida a função de callback (a função de cb pode ser apenas
a chamada para a função externa, nesse caso sem os '()').
Outro evento que podemos monitorar é o mouseover.
Da mesma forma que a função .on(), podemos utilizar a
versão .off() para desativar o evento. Se chamamos a
função .off() dentro da função de cb do evento
podemos desativá-lo fazendo com que ele só seja executado uma vez.
Podemos criar mais de um evento para um elemento, por exemplo,
click e mouseover.
Quando utilizamos a função .off() sem definir um evento
ele desativa qualquer evento no elemento após sua chamada.
Podemos mostrar ou esconder elementos com as funções
.show() e .hide(). Desse modo podemos criar
funções que sejam executadas no eventos .click() ou
.hover()
Quando trabalhamos com eventos podemos criar parâmetros para serem
enviados para a função que irá manipular esse evento. Para isso
basta criar dentro de chaves '{}' uma par
chave: 'valor' com os dados que queremos enviar.
Esses dados podem ser acessados utilizando o parametro
.data.nome_do_parametro do evento enviado pela função
executada. Podemos passar quantos paratros quisermos para o
evento.
Aqui inicialmente utilizei a propriedade
.css('display', 'none') para ocultar o objeto, entretanto
o jQuery possui funções específicas para isso: .hide(tempo), .show(tempo) e
.toggle(tempo), sendo que a última alterna entre os dois
efeitos. O tempo é em milissegundos.
Podemos passar como segundo parâmetro para essas funções uma nova
função que executará qualquer ação (no exemplo apresenta um alert
com uma mensagem)
Podemos criar animações com os elementos utilizando a função
.animate(). Essa função pode receber como parametros as
propriedades CSS de animação do elemento (no exemplo utilizamos {
left:300, top:100} e para tanto devemos definir a propriedade
position), o tempo de duração da animação, alguns efeitos
como linear e swing que controlam a velocidade
da animação e podemos passar uma função ao final da animação.
Neste exercício vamos fazer um slide de imagens. Para isso temos
um conjunto de imagens dentro de uma <div> que tem definida
um position: absolute. Aplicamos a essa <div> a
função .animate() definindo a posição à esquerda como
{left -=200} (o tamanho das imagens é de 200px e como
queremos que o movimento seja da direita para a esquerda devemos
passar o valor da posição como negativo).
Em seguida para que a função de movimento ocorra de forma
automática utilizamos a função setInterval() passando
como parametros a função de movimento e o tempo de intervalo.
Para melhorar o posicionamento das imagens (que tem um pequeno
espaço entre elas) definimos a flutuação como
float: left. Com isso as imagens passam a ficar coladas
umas as outras.
Em seguida criamos uma nova <div> que deve envolver a div da
animação e que passará a ter o position: absolute.
Aplicamos a essa div a propriedade
clip:rect(0 200px 200px 0). Essa propriedade limita o
tamanho da área que fica visível na tela.
Com essa nova <div> com a position: absolute a
<div> das animações passa a ter o position:relative e
é posicionada com o top: 0, left:0 (em relação a nova div).
Desse modo temos apenas o quadro de uma imagem sendo apresentado
na tela.
Para fazer o movimento cíclico entre as imagens foi realizado um
pequeno teste para definir as dimensões do slider.
Para esse teste criamos uma <div> abaixo do slider que
apresenta a posição em pixels que está cada uma das imagens.
Fizemos isso imprimindo na div o valor momentaneo em cada imagem
utilizando o comando abaixo: $('#info').html($('#janela').position().left);
Ao sabermos a posição de cada imagem podemos definir onde fica a
última imagem. A última imagem deve ser a mesma imagem que a
primeira pois quando chegamos ao fim do slider apresentamos
novamente a primeira imagem e podemos voltar ao início do slider
sem que se perceba a mudança das imagens. Para fazer isso criamos
um teste lógico como segue:
if ($('#janela').position().left == -800) {
$('#janela').css('left', 0);
}
Ou seja, quando o slider chegar na posição -800 (definido
observando o .position().left) a posição do slider é definido
novamente como 0 e ele volta a correr para a segunda imagem.
Aqui vamos fazer com que o código fique dinâmico e reconheça a
quantidade de imagens e o tamanho automaticamente.
A primeira coisa a se fazer é inserir a primeira imagem ao fim do
slider de forma programática. Para isso utilizamos a função
.append() para incluir uma tag img e a função
.attr() para definir a propriedade que contém o nome da
imagem:
$('#janela').append('<img>');
$('#janela img:last').attr('src', './img/foto1.jpg');
Veja que utilizamos a pseudoclasse last para que seja
inserido na última tag de imagem.
Em seguida fizemos a rotina para calcular o tamanho do slider
completo para fazer a rotação. Esse cálculo é feito recuperando a
quantidade de imagens da <div> que contém as imagens
utilizando a propriedade .lenght multiplicado pelo
tamanho das imagens recuperado com a função .width() e
muntiplicado por '-1' (para que o valor fique negativo). limite = $('#janela img').length * $('#janela img').width() *
-1;
Um detalhe que não foi observado é que com o float:left se
o número de imagens estourar o limite da tela as imagens descem
para a linha de baixo e causam uma quebra no fluxo do slider. Para
resolver isso inclui um atributo min-width com o jQuery
calculado da mesma forma que o tamanho do slider:
minwidth = $('#janela img').length * $('#janela img').width();
setInterval(moverFotos, 2000);
$('#principal').css('min-width', minwidth + 'px');
