 |
|
||||
Você está aqui: jQuery ::: Dicas & Truques ::: CSS (Cascading Style Sheet) |
Apostila jQuery - Como definir propriedades style CSS de elementos HTML usando a função css() do jQueryQuantidade de visualizações: 8522 vezes |
Para definir as propriedade style de um determinado elemento HTML só precisamos usar a função css() da biblioteca jQuery. Veja como isso pode ser feito no trecho de código abaixo:----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
<!--
function definirCSS(){
// define a cor verde para a propriedade CSS color da
// DIV com id "div_2"
$('#div_2').css('color', 'green');
}
//-->
</script>
Neste código a cor "green" é atribuída à propriedade CSS "color" do elemento DIV com o id "div_2". |
 Link para compartilhar na Internet ou com seus amigos: |
jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico |
Como adicionar conteúdo ao final de um elemento HTML usando a função append() do jQueryQuantidade de visualizações: 821 vezes |
|
O método append() permite adicionar conteúdo ao final de um elemento HTML. Este conteúdo pode ser um seletor, um elemento HTML, uma string HTML ou um objeto jQuery. Veja um trecho de código no qual adicionamos mais um linha de texto a um parágrafo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
<!--
function adicionarConteudo(){
var texto = "<br>Mais uma linha.";
$("#parag").append(texto);
}
//-->
</script>
O método append() 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. |
jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML |
Apostila jQuery - Como verificar se um elemento HTML pertence a uma determinada classe usando a função hasClass() do jQueryQuantidade de visualizações: 435 vezes |
Muitas vezes precisamos saber se um elemento HTML pertence a uma determinada classe CSS. Isso pode ser feito com o auxílio do método hasClass() da biblioteca jQuery. Basta passarmos a classe CSS que queremos verificar. Veja como usá-lo no trecho de código abaixo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
<!--
function pertenceClass(){
// testa se o parágrafo com o id "parag"
// pertence à classe "destaque"
if($('#parag').hasClass("destaque"))
window.alert("Pertence à classe destaque");
else
window.alert("NÃO pertence à classe destaque");
}
//-->
</script>
O retorno deste método é um valor boolean (true ou false). |
jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML |
jQuery para iniciantes - Como ocultar e exibir um elemento HTML usando o método toggleClass() do jQueryQuantidade de visualizações: 13667 vezes |
|
O método toggleClass() do jQuery nos fornece uma forma bem simples de ocultar ou exibir um elemento HTML. Veja como isso é feito mais abaixo. Comece analisando o trecho de estilos CSS: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<style type="text/css">
body, td {font: 70% Verdana}
.oculta {display: none}
</style>
O truque aqui é adicionar a classe "oculta" ao elemento que queremos ocultar e removê-la quando queremos que o elemento seja exibido novamente. Veja o elemento DIV que usaremos para ilustrar o efeito: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <div id="div_1">Sou um DIV</div> E finalmente uma função JavaScript (na parte <head></head> da página) que poderá ser chamada a partir de um botão: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
<!--
function ocultarExibir(){
$("#div_1").toggleClass("oculta");
}
//-->
</script>
|
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 jQueryQuantidade de visualizações: 8278 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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 ::: Atributos ou Propriedades HTML |
Como alternar a classe de um elemento HTML usando a função toggleClass() do jQueryQuantidade de visualizações: 8935 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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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 para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<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 para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!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 |
Como adicionar conteúdo ao início de um elemento HTML usando a função prepend() do jQueryQuantidade de visualizações: 510 vezes |
|
O método prepend() permite adicionar conteúdo ao início de um elemento HTML. Este conteúdo pode ser um seletor, um elemento HTML, uma string HTML ou um objeto jQuery. Veja um trecho de código no qual adicionamos uma linha de texto no início de um parágrafo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
<!--
function adicionarConteudo(){
var texto = "Mais uma linha.<br>";
$("#parag").prepend(texto);
}
//-->
</script>
O método prepend() 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. |
jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML |
Apostila jQuery - Como substituir uma classe por outra em um elemento HTML usando os métodos removeClass() e addClass() do jQueryQuantidade de visualizações: 14130 vezes |
|
Muitos métodos do jQuery retornam um objeto jQuery que pode ser usado para fins de encadeamento de chamadas de métodos. Podemos tirar proveito disso para trocar as classes de um elemento HTML de forma bem simples. Sabemos que os métodos removeClass() e addClass() retornam um objeto jQuery. Assim, o trecho de código abaixo é perfeitamente válido: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
<!--
function trocarClasse(){
// troca a classe "destaque" do parágrafo
// com o id "parag" pela classe "destaque2"
$('#parag').removeClass("destaque")
.addClass("destaque2");
}
//-->
</script>
|
jQuery ::: Dicas & Truques ::: AJAX |
Apostila jQuery - Quais as diferenças entre os métodos ajax(), get() e post() do jQuery?Quantidade de visualizações: 10826 vezes |
|
Existem algumas diferenças substanciais entre os métodos ajax(), get() e post(). Conhecê-las e saber quando usar cada um destes métodos poderá tornar seus códigos mais dinâmicos e eficientes. O método ajax() é o mais completo para requisições HTTP e pode ser usado com mais de um dezena de parâmetros. Este método é considerado um método de nível baixo (low level) já que permite um maior controle sobre a requisição AJAX. Além disso, se precisamos de mais flexibilidade, este é o método a ser usado. Os métodos get() e post() são métodos de nível mais alto (higher level) e aceitam pouco mais que três parâmetros cada um. Use estes métodos quando não precisar de muito controle sobre a requisição AJAX. Estes métodos, por exemplo, não fornecem formas de tratar possíveis erros na requisição HTTP. Nesta seção você encontrará exemplos de cada um desses métodos. |
Vamos testar seus conhecimentos em Python |
Qual o resultado da execução do seguinte código Python?
valor = 56.21
print("Valor: %.5d" % valor)
A) Valor: 00056 B) Valor: 21 C) Valor: 00056.21 D) Valor: 56 E) Valor: 6.2100 Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira |
| Estrutura e propriedade dos materiais O estudo das propriedades elétricas aborda os conceitos de resistividade e condutividade elétrica, pois são as mais relevantes quanto aos materiais de construção. Assinale a alternativa que define essas propriedades corretamente. A) Condutividade elétrica é a resistência à passagem da corrente elétrica através de um material, e a resistividade é a facilidade com que um material é capaz de transmitir uma corrente elétrica. B) Condutividade elétrica é a facilidade com que um material é capaz de transmitir uma corrente elétrica, e a resistividade é a resistência à passagem da corrente elétrica através de um material. C) Condutividade elétrica é a capacidade que um material apresenta de absorver energia, e a resistividade é a facilidade com que um material é capaz de transmitir uma corrente elétrica. D) Condutividade elétrica é a facilidade com que um material é capaz de transmitir uma corrente elétrica, e a resistividade é a capacidade que um material apresenta em absorver a energia. E) Condutividade elétrica é a resistência à passagem da corrente elétrica através de um material, e a resistividade é a capacidade que um material apresenta em absorver a energia. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em AutoCAD Civil 3D |
| Alinhamentos no AutoCAD Civil 3D Qual dos objetos abaixo é constituido de uma série de linhas e curvas que representam mudanças na elevação ao longo de um alinhamento? A) Assembly (Montagem) B) Profile (Perfil) C) Corridor (Corredor) D) Surface (Superfície) Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Pilares centrais: dimensionamento e detalhes construtivos No cálculo de pilares centrais, existem alguns preceitos em relação aos efeitos de primeira e segunda ordens. Assinale a alternativa correta em relação a essa afirmação. A) O método do pilar padrão é deduzido de acordo com a equação da linha elástica deformada. B) Para o cálculo do efeito de segunda ordem, deve-se utilizar apenas o método da rigidez aproximada. C) Se apenas um lado tem efeito de segunda ordem, não necessariamente o calcula-se. D) Para o cálculo do efeito de segunda ordem, existe apenas um método. E) O efeito de segunda ordem só é considerado quando a esbeltez estiver abaixo da esbeltez limite. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Dimensionamento de lajes e escadas maciças Considere uma laje retangular, maciça, com vão de 5,0m, concreto fck = 20MPa, aço CA-50 e espessura de 12cm (com altura útil igual a 9,5cm), submetida a um momento de cálculo de 35kN.m. A armadura que resiste ao esforço solicitado, de forma otimizada, é (desconsiderar a verificação de flechas e fissuras): A) ∅10mm a cada 10cm. B) ∅10mm a cada 12,5cm. C) ∅12,5mm a cada 12,5cm. D) ∅12,5mm a cada 15,0cm. E) ∅12,5mm a cada 10cm. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de jQuery |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
