Você está aqui: jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML

Como retornar o valor da propriedade class CSS de um elemento HTML usando jQuery

Quantidade de visualizações: 11262 vezes

Em algumas situações nós precisamos obter o valor da propriedade class de um elemento HTML. O trecho de código abaixo mostra como isso pode ser feito usando a função attr() da biblioteca jQuery:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<script type="text/javascript">
<!--
  function obterNomeClasse(){
    // Este exemplo mostra como obter o nome de classe
    // de um elemento HTML com o id "div_1"
    var nomeClasse = $('#div_1').attr("className");
    window.alert(nomeClasse);
  }
//-->
</script>

Link para compartilhar na Internet ou com seus amigos:

jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML

Como alternar a classe de um elemento HTML usando a função toggleClass() do jQuery

Quantidade de visualizações: 8848 vezes

O método toggleClass() do jQuery é um dos mais interessantes no framework. Este método permite aplicar um nome de classe a um elemento HTML se ele ainda não estiver definido e removê-lo se este já estiver definido para o elemento. Veja um trecho de código que altera a cor de fundo de um parágrafo a cada vez que ele é clicado.

Comece analisando o trecho de estilos CSS:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<style type="text/css">
  body, td {font: 70% Verdana}
  .destaque {background-color: yellow}
  .destaque2 {background-color: red}
</style>

Veja agora o elemento P que usaremos para ilustrar o efeito:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<p id="parag" class="destaque">Sou um parágrafo</p>

E finalmente o código JavaScript (na parte <head></head> da página):

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<script type="text/javascript">
<!--
  $(document).ready(function(){
    $("#parag").click(function(){
      $(this).toggleClass("destaque2");
    });
  });
//-->
</script>

E aqui a página HTML completa para o exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Estudos jQuery</title>
  
<style type="text/css">
  body, td {font: 70% Verdana}
  .destaque {background-color: yellow}
  .destaque2 {background-color: red}
</style>  

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
  
</head>
<body>

<p id="parag" class="destaque">Sou um parágrafo</p>

<script type="text/javascript">
  $(document).ready(function(){
    $("#parag").click(function(){
      $(this).toggleClass("destaque2");
    });
  });
</script>
  
</body>
</html>

O método toggleClass() retorna um objeto jQuery para fins de encadeamento de chamadas de métodos.

jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico

jQuery para iniciantes - Como obter valores de elementos de formulários HTML usando a função val() do jQuery

Quantidade de visualizações: 8143 vezes

Nesta dica eu mostro como podemos usar o método val() da biblioteca jQuery para obter o conteúdo dos elementos de formulários HTML.

Veja, por exemplo, como obter o conteúdo de uma caixa de texto com o id "nome":

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<script type="text/javascript">
<!--
  function obterTexto(){
    var texto = $('#nome').val();
    window.alert(texto);
  }
//-->
</script>

Lembre-se de que este método atuará apenas no primeiro da possível série de elementos retornados sob uma determinada condição.

O retorno val() do jQuery é uma string.

jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico

Como usar o método appendTo() do jQuery para adicionar todo o conteúdo de um elemento ao final de outro elemento HTML

Quantidade de visualizações: 390 vezes

O método appendTo() é usado quando queremos adicionar todo o conteúdo dos elementos retornados sob uma determinada condição a outro ou outros elementos HTML.

Veja um trecho de código no qual adicionamos o conteúdo de um parágrafo ao final de um elemento DIV:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<script type="text/javascript">
<!--
  function adicionarConteudo(){
    var texto = "<br>Mais uma linha.";
    $("#parag").appendTo("#div_1");
  }
//-->
</script>

O método appendTo() opera em todos os elementos HTML retornados sob uma determinação condição. O retorno do método é um objeto jQuery que pode ser usado para fins de encadeamento de chamadas de métodos.

Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil

Locação da obra

No caso de obras de grande área (m²), erros acumulados de alinhamento podem acarretar perda de tempo e dinheiro, sendo conveniente, portanto, o auxílio da topografia. Para esse tipo de obra, que tem muitos elementos (fundações, paredes, etc.), qual é o processo ideal de locação?

A) Processo dos cavaletes.

B) Processo dos piquetes.

C) Processo dos perfis metálicos.

D) Processo dos tapumes (ou gabaritos ou tábuas corridas).

E) Locação com auxílio das construções vizinhas.

Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Ética e Legislação Profissional

Introdução à Ética

Na modernidade, o conceito de ethos passa a refletir as transformações sociais, culturais e filosóficas desse período, profundamente influenciado pela dissolução do absolutismo e pelas revoluções liberais. A compreensão do ethos como caráter moral é então recontextualizada, influenciada pelas rupturas que reorganizam as sociedades.

Considerando as transformações sociais, políticas e produtivas desse período, como o ethos se manifesta no contexto?

Selecione a resposta:

A) Inalterado, mantendo características morais tradicionais.

B) Ênfase na tradição e conservadorismo com resistência às mudanças e rupturas.

C) Rejeição total das normas coletivas e valorização do individualismo.

D) Teoria filosófica sem conexões com as aplicações morais práticas.

E) Reflete as transformações sociais, políticas, econômicas, culturais e/ou filosóficas.

Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em JavaScript

Analise o seguinte código JavaScript

const verdadeiro = true == [];
const falso = true == ![];
document.write(verdadeiro + falso);

Qual o resultado de sua execução?

A) "true"

B) 1

C) false

D) 0

E) "false"

Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Hidrologia

(Udesc 2016) "Por meio da interligação dos reservatórios por um canal, o chamado modelo de usina a fio d'água permitiu que Belo Monte ocupasse uma área 60% menor do que a prevista no projeto original. A mudança garantiu que nenhuma aldeia indígena próxima ao empreendimento fosse inundada e a hidrologia do rio ________________, preservada. A piracema também não foi comprometida, graças à colocação de escadas de peixes que preservam o equilíbrio da fauna aquática do rio."

Disponível em http://www.brasil.gov.br/governo/2016/05/dilma-inaugura-usina-hidreletrica-de-belo-monte, acessado em agosto de 2016.

O nome do rio que completa corretamente a lacuna do texto acima é:

A) Xingu.

B) Madeira.

C) Teles Pires.

D) Juruá.

E) Guaporé.

Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em

Vigas a flexão simples: seções retangulares

O dimensionamento de vigas retangulares armadas à flexão leva em consideração a resistência do concreto à compressão e a resistência do aço à tração. Nesse caso, a viga está simplesmente armada e é composta por armadura principal e armadura construtiva. Dependendo do domínio em que a seção da viga se encontra, pode ser necessário também considerar a resistência do aço à compressão, quando a viga é composta por armadura dupla.

Considere uma viga retangular de concreto com largura de 14cm, concreto C30, e que a agressividade ambiental do local é classe III. Considere também que essa viga deve resistir a uma solicitação por um momento fletor de 95,50kN.m.

Nesse caso, qual é a altura mínima da viga para que não seja necessária armadura dupla?

A) 35cm.

B) 40cm.

C) 45cm.

D) 50cm.

E) 55cm.

Verificar Resposta Estudar Cards Todas as Questões

Veja mais Dicas e truques de jQuery

Como usar a função text() do jQuery para obter o conteúdo de um elemento HTML desconsiderando as tags

jQuery para iniciantes - Como obter valores de elementos de formulários HTML usando a função val() do jQuery

Obtendo propriedades style de elementos HTML

Apostila jQuery - Como verificar se um elemento HTML pertence a uma determinada classe usando a função hasClass() do jQuery

Como remover uma classe (ou classes) de um elemento HTML usando a função removeClass() do jQuery

jQuery para iniciantes - Como usar o método addClass() do jQuery para adicionar nomes de classes CSS aos elementos HTML

Como definir o valor da propriedade class de um elemento HTML usando jQuery

Como adicionar conteúdo ao início de um elemento HTML usando a função prepend() do jQuery

Como adicionar conteúdo ao final de um elemento HTML usando a função append() do jQuery

Apostila jQuery - Quais as diferenças entre os métodos ajax(), get() e post() do jQuery?

Dicas e truques de outras linguagens

PHP - Como retornar o dia da semana para uma determinada data em PHP usando as funções mktime(), date() e o sinalizador "l"

AngularJS - Tutorial AngularJS - Como usar a diretiva ng-init do AngularJS

C++ - Como criar um laço for infinito em C++ - C++ do básico ao profissional

Java - Java Swing - Como detectar as teclas Insert ou Delete usando o método getKeyCode() da classe KeyEvent do Java

Ruby - Como contar as ocorrências de uma substring em uma string em Ruby usando a função scan()

C - Como ler o conteúdo de um arquivo uma linha de cada vez usando a função fgets() da linguagem C

Delphi - Como calcular o coeficiente angular de uma reta em Delphi dados dois pontos no plano cartesiano

Python - Python para iniciantes - Como contar de 0 a 10 usando o laço for da linguagem Python

Java - Como converter um vetor (array) em uma List usando o método asList() da classe Arrays da linguagem Java

VB.NET - Como calcular a equação reduzida da reta em VB.NET dados dois pontos pertencentes à reta

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e Fornecedores

Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais

Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: Delphi
6º lugar: C
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby

Você está aqui: jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML

Como retornar o valor da propriedade class CSS de um elemento HTML usando jQuery

jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML

Como alternar a classe de um elemento HTML usando a função toggleClass() do jQuery

jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico

jQuery para iniciantes - Como obter valores de elementos de formulários HTML usando a função val() do jQuery

jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico

Como usar o método appendTo() do jQuery para adicionar todo o conteúdo de um elemento ao final de outro elemento HTML

Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil

Vamos testar seus conhecimentos em Ética e Legislação Profissional

Vamos testar seus conhecimentos em JavaScript

Vamos testar seus conhecimentos em Hidrologia

Vamos testar seus conhecimentos em

Questões de Concurso para Engenharia Civil

Exercícios Resolvidos

Bancos de Dados

Questões de Concurso

Frameworks

Projetos e Códigos Fonte

Especializações

Calculadoras

Ferramentas

Todas as Linguagens, Frameworks, Biliotecas e Bancos de Dados

Compre pelo WhatsApp: +55 (062) 98553-6711

E-Book 650 Dicas e Truques de Python - Com comentários em Português

PDF COM 1.200 PÁGINAS

Apenas R$ 32,90