Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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!

Editado por DiF
Mover para o lugar certo e colocar o prefixo jQuery

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!

Editado por DiF
Botão CODE <>

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

 

Editado por DiF
  • 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






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

×