JavaScript, jQuery e Responsive Design

2
Ambientao do Curso

jQuery

3
 Objetivos da Aula

Aula 03

Overview;

Seletores e Filtros;

Mtodos e Manipulao do CSS;

Adicionando, removendo e modificando atributos dos elementos;

Animaes e Efeitos;

Adicionando contedo dinamicamente.

4
Ambientao do Curso

Overview

5
 Overview

Porque a jQuery?

Cdigo
Cdigolivre
livreeeaberto
aberto Tanto para projetos pessoais ou comerciais;

Simples em relao a JavaScript

Simples
Simples (EcmaScript). Permite acessar e manipular
facilmente elementos no HTML (DOM);

Centenas de milhares de plugins baseados

Extensvel
Extensvel
em jQuery;

Crossbrowser
Crossbrowser Compatvel com qualquer browser;

Ajax
AjaxSimplificado
Simplificado Sintaxe mais fcil e mais objetivo;

6
Overview

7
Overview

8
 Overview

Seletores simples baseados em CSS / CSS3

document.getElementById('conteudo');

document.getElementsByTagName('li');

document.getElementsByClassName('minhaClasse');

$('#conteudo');

$('li');

$('.minhaClasse');

9
 Overview

Iteraes implcitas

varparagrafos=document.querySelectorAll('p');

for(vari=0;i<paragrafos.length;i++){
paragrafos[i].textContent=Novotexto;
}

$('p').text('Novotexto');

10
Ambientao do Curso

Seletores e Filtros

11
 Seletores e Filtros

$(A): Todas as tags <A>;

$(AB): Todas as tags B que so descendentes de A;

$(A>B): Todas as tags B que so filhas de A;

$(A,B): Todas as tags A e B;

$(.minhaclasse): Todas as tags com o atributo class=minhaclasse;

$(A.minhaclasse): Todas as tags A com atributo class=minhaclasse;

$(#meuid): Tag com o atributo id=meuid;

$([alt]): Todas as tags que possui o atributo alt;

$(A[alt]): Todas as tags A que possuir o atributo alt;

12
 Seletores e Filtros

$(A[atributo=valor]): Todas as tags A com atributo=valor;

$(:input): Todas as tags <input>;

$(:text): Todas as tags <input> que so do tipo text;

$(:radio): Todas as tags <input> que so do tipo radio;

$(:checkbox): Todas as tags <input> que so do tipo checkbox;

$(:selected): Todas as tags selecionadas (normalmente <option>);

$(:checked): Todas as tags selecionadas (radio e checkbox);

$(:header): Todas as tags de titulo h1, h2, h3...

$(A:eq(n)): Tag A com ndice n.

13
 Seletores e Filtros

Como manipular cada elemento recuperado pelo seletor:

$('div.selecao')[0];//IgualaJavaScript

$('div.selecao').get(0);

Podemos utilizar o mtodo .each() para percorrer elementos:

$('img').each(function(index){
alert(index+''+this.src);
});

$('img').each(function(n){
$(this).attr('alt','Imagem'+$(this).attr('src'));
});

14
 Ambientao do Curso

Mtodos e Manipulao

15
 Mtodos e Manipulao

Os mtodos da jQuery so divididos em 3 categorias:

11 Core
Core

22 Eventos
Eventos

33 Efeitos
Efeitos

16
 Mtodos e Manipulao

Mtodos Core

.addClass(classe): Adiciona uma classe ao elemento;

.removeClass(classe): Remove a classe do elemento;

.attr(nome): Recupera o valor do atributo nome;

.attr(nome,valor): Coloca o valor no atributo nome;

.val(): Recupera ou altera o valor do elemento (tags de formulrio);

.html(): Recupera ou altera o valor entre as tags (innerHTML);

.length: Recupera a quantidade de elementos no seletor;

17
 Mtodos e Manipulao

Mtodos Core

.trim(<str>): Remove espaos em branco de uma <str>;

.each(<mapeador>): Percorre todos os elementos

selecionados;

get(pos): Recupera o elemento na posio pos.

18
 Mtodos e Manipulao

Mtodos de Eventos

ready(fn):

Executa uma funo quando o documento for carregado;

click(fn), dblclick(fn), mousedown(fn),

mouseover(fn),mouseout(fn):

Executa uma funo quando o evento do mouse for disparado;

change(fn),focus(fn),blur(fn),submit(fn):

Executa uma funo quando o evento do formulrio for disparado;

19
 Mtodos e Manipulao

Mtodos de Eventos

keypress(fn),keydown(fn),keyup(fn):

Executa uma funo quando o evento do teclado for disparado;

hover(fn(in),fn(out)):

Executa uma funo quando o mouse entra no elemento, e

executa outra funo quando o mouse sai do elemento.

Nota: O mtodo de evento toggle() foi descontinuado na verso 1.9;

20
 Mtodos e Manipulao

Mtodos .on()
O mtodo .on() atribui um ou mais listeners de eventos para os
elementos selecionados e elementos filhos.

$('#meuForm').on('submit',function(){...});
$('#elemento').on('click','a',function(){...});

O mtodo .on() s pode criar listeners de eventos que existem na

hora da configurao dos mesmos.

Dica: Para remover listeners de eventos, utilize o mtodo .off().

21
 Mtodos e Manipulao

Mtodos de CSS

css(atributo): Recupera o valor de um atributo css;

css(atributo,valor): Altera ou adiciona o valor de um

atributo css;

width(): Retorna a largura de um elemento em px;

width(valor): Altera a largura de um elemento em px;

heigth(): Retorna a altura de um elemento em px;

heigth(valor): Altera a altura de um elemento em px.

22
 Mtodos e Manipulao

Mtodos de Animao

fadeIn(),fadeOut(),fadeToggle():

Animao que exibe, esconde e alterna entre exibir e esconder um

elemento;

show(),hide(),toggle():

Mostra, esconde e alterna entre mostrar e esconder um elemento

sem animao.

23
 Mtodos e Manipulao

Mtodos de Animao

slideUp(),slideDown(),slideToggle():

Animao que exibe, esconde e alterna entre exibir e esconder um

elemento;

animate({propriedadeCSS}):

Altera o css de um elemento, fazendo a transio entre o css original

e o css definido no parmetro do mtodo.

24
 Ambientao do Curso

Continuao da aplicao

25
 Continuao da aplicao

Com base no que estamos acompanhando desde o contedo da Aula 02, temos
um formulrio que ao inserir um valor hexadecimal para cores, guardamos em
uma array e mudamos a cor da borda do formulrio e a cor de fundo do body,
mas agora vamos incorporar a biblioteca Jquery.

Ento toda interesso e mtodos que usamos com Javascript puro, vamos
substituir pelas facilidades que esse Framework nos proporciona. No prximo
slide estar exemplos alterados para Jquery de muitos comportamentos que
temos na nossa aplicao.

Siga o exemplo e detecte essas aes e funcionaidades que o jquery tem, que
diferente do javascript e aplique essas mudanas.

Baixe o arquivo de template para realizar o laboratrio.

26
 Continuao da aplicao

//Utilize o on no lugar do addEventListener

$('form').on('submit', function(e){...

//Ajuste o modo de selecionar o form pelo jquery, e o modo como se

manipula o css
$('form').css('border-color'...

//Ajuste o modo de selecionar o body pelo jquery, e o modo como se

manipula o css
$('body').css('background-color'...

/// Passa por cada cor da array utilizando o ForEach do jquery

colors.forEach(function(value,index){...

/// Cria um item lipelo jquery

var element = $('<li></li>');

27
 Continuao da aplicao

/// Coloca o evento de click com a aao de mudar a cor de fundo e adicionar
a classe utilizando o on
element.on('click',function(){ ...
/// remova qualquer li com a classe "active" utilizando o removeClass
$('li.active').removeClass('active'); ...

/// Adiciona nesse elemento a classe 'active' utiizando o addClass

$(this).addClass('active');

/// Evento de keydon para selecionar um objeto da lista, aplique no body e

utilize o on
$('body').on('keydown',function(event){

28
 Continuao da aplicao

Apenas com essa alterao, o cdigo funcionar.

Mas ainda existe muitos mtodos e aes que o Jquery traz, que vacilita
a programao e desempenho da sua aplicao. Exemplo o For Each,
substitua o For pelo For Each. Isso facilita o modo de manipular os
elementos de uma array, e melhora o desempenho da sua aplicao.

29
 Continuao da aplicao

/// Passa por cada cor da array utilizando o ForEach do jquery

colors.forEach(function(value,index){
/// Cria um item lipelo jquery
var element = $('<li></li>'t);
/// adicione no html a cor listada no array e coloque na lista
element.html(value);
/// Coloca o evento de click com a aao de mudar a cor de fundo e
adicionar a classe utilizando o on
element.on('click',function(){
/// remova qualquer li com a classe "active" utilizando o removeClass
$('li.active').removeClass('active');
/// Adiciona nesse elemento a classe 'active' utiizando o addClass
$(this).addClass('active');
//Ajuste o modo de selecionar o body pelo jquery, e o modo como se
manipula o css
$('body').css('background-color' ,$(this).html());
});
/// Adciona o "li" no "ul", utilizando o append do jquery
$('#listColors').append(element);
});

30
 Continuao da aplicao

Agora crie um modo de selecionar item por item lista de cores com o
keyboard, sem utilizar uma variavel de controle de teclas precionadas,
utilizando apenas o .index(objeto) e o get(index).

switch (event.keyCode) {
case 40 :
/// nao precisamos mais da variavel de controle para contar cada
pressionada
/// porem precisamos quardar a posicao do ultimo elemento que contem
active,
/// selecione o elemento li e utilize o index() passando como parametro
o elemento li.active que voce procura
/// se nao houver elemento active coloque o valor como zero, utilize a
condio ternaria para isso
var index = $('li').index($('li.active'))? $('li').index($('li.active')) : 0;

/// continua no prximo slide

31
 Continuao da aplicao

/// remova qualquer li com a classe "active" utilizando o removeClass

$('li.active').removeClass('active');
/// agora que temos o index do ultimo elemento active que existiu,
vamos pegar o proximo index a ele
/// utilize o get e o index+1 como parametro
/// guarde em uma variavel var li esse elemento que voce retornou
var li = $('li').get(index+1);
/// adicione no li a classe active
$(li).addClass('active');
//Ajuste o modo de selecionar o body pelo jquery, e o modo como se
manipula o css
$('body').css('background-color',$(li).html());
break;
case 38 :
/// aplique a mesma regra como o exemplo do case 40
var index = $('li').index($('li.active'))? $('li').index($('li.active')) : 0;

/// contiua no prximo slide

}

32
 Continuao da aplicao

/// remova qualquer li com a classe "active" utilizando o removeClass

$('li.active').removeClass('active');
/// Aqui ja diferente o inverso, temos o index do ultimo elemento active
que existiu, vamos pegar o anterior index a ele
/// utilize o get e o index-1 como parametro
/// guarde em uma variavel var li esse elemento que voce retornou
var li = $('li').get(index-1);
/// adicione no li a classe active
$(li).addClass('active');
//Ajuste o modo de selecionar o body pelo jquery, e o modo como se
manipula o css
$('body').css('background-color',$(li).html());
break;
}

Dica: Verifique se no existe nenhum outro modo de manipular elementos e alterar

atributos em Javascript puro, utilize as facilidades da biblioteca do Jquery.

33
 Prximos Passos

Para que voc tenha um melhor aproveitamento do curso, participe das

seguintes atividades disponveis no semana 01:

Aula 04: Ajax

Fazer a leitura da Apostila.

Assista a videoaula.
Realizar o Laboratrio proposto nesta aula.
Responder as questes do Teste de Conhecimento.

Mos obra!

34