JQuery JQuery Exercício de script

Cris Ider · 25 de junho de 2018

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!

Cris Ider · 25 de junho de 2018

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!

DiF · 28 de junho de 2018

@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.

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>");
});