Ir ao conteúdo
  • Cadastre-se
Cris Ider

JQuery JQuery Exercício de script

Recommended Posts

Olá, pessoal!

 

Estou fazendo um exercício sobre JQuery e sou bem iniciante. De modo que preciso compreender este seguinte exercício:

 

Crie uma página web com 3 parágrafos com texto. Adicione os seguintes eventos:

(1) ao clicar 2 vezes sobre o primeiro parágrafo, a cor de fundo é alterada para verde;

(2) ao passar o ponteiro do mouse sobre o segundo parágrafo, o elemento <p> fica oculto;

(3) ao clicar uma vez sobre o terceiro parágrafo, o texto deste elemento é alterado.

 

Gostaria de uma dica para fazer pelo menos o primeiro item. Já que o restante eu tentarei sozinho. Sei que é uma coisa simples. Consegui fazer, utilizando o esquema de botões.

Mas essa de clicar sobre o 1º parágrafo etc eu estou apanhando por incrível que pareça.

 

Tentei deste modo, mas nada acontece:

<!DOCTYPE html>
<html>
    <head>
        <title>Tarefa da Semana 11</title>
        <meta charset="utf-8" />
        <meta name="description" content="Tarefa da Semana 11" /> <!--descrição do site para efeito de busca -->
        <meta name="author" content="Cristiano Iderlandes Nascimento Leão" /> <!--Autor site -->
        <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function(){
                $(p).click.css('background', 'blue');
            });
        </script> 
        </head>

        <body>
            <p>Parágrafo número 1</p>
            <p>Parágrafo número 2</p>
            <p>Parágrafo número 3</p>
        </body>
</html>

 

Lembrando que eu não estou pedindo para fazer o exercício para mim, pois sei que isto só me prejudicaria. O melhor mesmo é compreendê-lo.

Portanto peço ajuda a quem puder. Perdoem a minha ignorância. Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pessoa, eu consegui.

 

Obrigado assim mesmo.

 

<script>
            $(document).ready(function(){
                $('p.primeiroP').dblclick(function(){
                    $('p.primeiroP').css('background', 'green');
            });
                $('p.segundoP').mouseover(function(){
                    $('p.segundoP').hide();
            });
                $('p.terceiroP').click(function(){
                $('p.terceiroP').replaceWith('<p>Terceiro parágrafo que foi substituído</p>')
            });
            });    
        </script> 

 

Espero que esteja certo ou que é a melhor forma. Testei aqui e deu certo.

Caso fiz algo errado, postem a correção.

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Cris Ider Olá,  agradeço por ter compartilhado a sua solução.

O seu jeito, não deixa de estar certo.  Só tomou o caminho mais "fácil" para resolver o exercício. :lol:

 

Você pode fazer desta forma:

Para o item 1 e 2 do exercício:

//Ação de duplo click no PRIMEIRO elemento <p>
$("p:first").dblclick(function(){
    //Este $(this), refere-se ao próprio elemento no caso o <p>
	$(this).css("background", "green");
});

/* Ação de ocultar quando passar o mouse em cima.
 * o nth-child(índice) serve para selecionar um elemento
 * específico, no caso queremos o segundo <p>
 */
$("p:nth-child(2)").hover(function (event) {
	event.preventDefault();
	$(this).hide();		  	
});

 

Já para o caso do 3 item do exercício, você pode fazer de duas formas:

/* Aqui selecionamos o terceiro <p> e aplicamos
 * um, novo texto no próprio elemento <p> substituindo
 * o texto antigo. 
 */
$("p:nth-child(3)").on("click", function(){
    //A função text() substitui o texto do elemento. 
	$(this).text("Terceiro parágrafo que foi substituído");
});



/* Neste exemplo, diferente do nth-child(3) o 
 * :last-of-type permite acessar SEMPRE o último elemento
 * do tipo selecionado.
 */
$("p:last-of-type").on("click", function(){
    //A função replaceWith() substitui o elemento todo, e não só o texto
	$(this).replaceWith("<p>Terceiro parágrafo que foi substituído</p>");
});

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Valeu, DIF!

Sua solução parece bem mais técnica do que a minha. Como o prazo de entrega já expirou, eu enviei a minha. Caso contrário, utilizaria a sua.

 

Obrigado!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×