Usando Funções para Selecionar Elementos HTML

Usando Funções para Selecionar Elementos HTML

Agora que você sabe mais sobre o funcionamento das funções, você entende que quando temos algo como

$(document).ready(function() {

$('div').hide();

});

estamos passando para .ready() uma função (que não recebe nenhum parâmetro; e por isso () é vazio) e que o trabalho da função .hide() é ocultar o objeto jQuery div.

Instruções

Passe uma função function(){} como parâmetro para .ready(). Dentro das chaves {} de sua função, faça uma chamada fadeIn('slow') no div (atualmente invisível) para torná-lo visível. É isso mesmo, também há uma função fade in (contrária à fade away) que faz as coisas aparecerem!

$(document).ready(function(){

$('div').fadeIn('slow');

});

Selecionando por Classe

Não precisamos nos limitar a selecionar elementos HTML como <p> e <div>; essencialmente, podemos colocar qualquer seletor CSS entre aspas e passá-lo para $(). Isso significa que podemos selecionar classes também!

Lembre-se que podemos selecionar classes em CSS usando um ponto (.). Se temos class="red" em HTML, podemos selecioná-la em CSS com .red. Em jQuery, tudo o que precisamos fazer é colocar '.red' entre aspas, e podemos passá-lo para $() para criar um objeto jQuery.

Instruções

Vamos praticar um pouco com a ação .click().

Termine o código jQuery para que todos os quatro divs da classe '.vanish' esmaeçam devagar quando o botão for clicado.

$(document).ready(function() {

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

$('.vanish').fadeOut('slow');

});

});

Selecionando por ID

Se podemos selecionar por classe, significa que também podemos selecionar por ID. Fazemos isso colocando o nome do ID (entre aspas) dentro de $(). Assim como precisamos do . para classes, precisamos do # para IDs. Poderíamos selecionar id="header" assim:

$('#header');

O ponto e vírgula no final é importante — é assim que a jQuery sabe que terminamos de dar um comando. Por enquanto, uma boa regra a seguir é colocar ponto e vírgula ao final de qualquer linha que não termina com uma { aberta. (O editor vai tentar ajudá-lo com o posicionamento do ponto e vírgula, então preste atenção aos avisos). Exemplos de usos corretos e incorretos podem ser encontrados nas Dicas.

Instruções

Atualize seu código jQuery para que ele as ações de .fadeOut() tenham efeito apenas sobre os blocos div com ID #blue.

$(document).ready(function() {

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

$('#blue').fadeOut('slow');

});

});

Seleções Flexíveis

Qualquer coisa que você pode selecionar com CSS, você pode modificar com jQuery. Por exemplo, podemos aplicar uma ação fadeTo() para um seletor p desta forma:

$('p').fadeTo('slow', 0);

Podemos aplicar uma ação fadeTo() para um seletor li desta forma:

$('li').fadeTo('slow', 0);

Podemos aplicar uma ação fadeTo() tanto para seletores p quanto para seletores li desta forma:

$('p, li').fadeTo('slow', 0);

Isso é chamado de seletor composto.

Vamos usar um seletor composto para aplicar uma ação fadeTo() aos seletores .pink e .red (rosa e vermelho).

Instruções

Vamos usar um seletor composto para aplicar uma ação fadeTo() para os seletores .pink e .red (rosa e vermelho).

$(document).ready(function(){

$('.red, .pink').fadeTo('slow',0);

});

'this' (isto) é Importante!

Na última lição, tínhamos um código parecido com este:

$(document).ready(function() {

$('div').mouseenter(function() {

$('div').hide();

});

});

A segunda linha é boa: elas nos diz que quando movemos o mouse para div devemos realizar determinada ação. Contudo, '$('div').hide();' não vai apenas ocultar o div sobre o qual o mouse está; a ação vai ocultar todos os blocos div da página. Como podemos dizer à jQuery que queremos afetar apenas este div em particular?

Com a palavra 'this', é claro!

A palavra reservada 'this' se refere ao objeto jQuery com o qual você está trabalhando. Suas regras completas são um pouco complicadas, mas o importante é entender que se você usa um event handler (manipulador de evento) em um elemento — esse é o nome chique para ações como .click() e .mouseenter(), uma vez que elas manipulam eventos em jQuery — você pode chamar o evento que ocorre (como fadeOut()) em $(this), e assim o evento vai afetar somente o elemento com o qual você está trabalhando (por exemplo, clicar ou deixar o mouse sobre alguma coisa).

Instruções

Verifique o código em script.js. Ao invés de usar fadeOut() em todos os blocos div, estamos usando a ação apenas neste div (this), sendo que this se refere ao div sobre o qual o mouse está. Clique em Salvar e Enviar Código, e então clique nos seus divs, um por um, para ver como funciona!

$(document).ready(function()