 |
|
Você está aqui: jQuery ::: Dicas & Truques ::: CSS (Cascading Style Sheet) |
Como definir várias propriedades style de elementos HTML de uma só vez usando um objeto JavaScript (JSON)Quantidade de visualizações: 7451 vezes |
|
O exemplo abaixo mostra como definir três propriedades style de um elemento DIV de uma só vez usando um objeto JavaScript (JSON):
<script type="text/javascript">
<!--
function definirCSS(){
// Este exemplo mostra como definir várias propriedades
// de uma só vez usando um objeto JavaScript (JSON)
var objetoCSS = {
backgroundColor: "yellow",
fontSize: "200%",
color: "red"
}
$('#div_2').css(objetoCSS);
}
//-->
</script>
|
 Link para compartilhar na Internet ou com seus amigos: |
jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML |
jQuery para iniciantes - Como usar o método addClass() do jQuery para adicionar nomes de classes CSS aos elementos HTMLQuantidade de visualizações: 12736 vezes |
Por padrão, um elemento HTML pode pertencer a uma determinada classe usando o seguinte modelo:<p id="parag" class="destaque">Sou um parágrafo</p> Porém, há situações em que gostaríamos que um elemento pertencesse a mais de uma classe ao mesmo tempo. Com o jQuery isso é facilmente conseguido. Basta usarmos o método addClass(). Este método nos permite adicionar uma ou mais classes a um determinado elemento ou um grupo de elementos HTML. Tenha em mente que este método não substitui a classe atual do elemento. Em vez disso, o elemento passa a pertencer a mais de uma classe. Veja um trecho de código em que adicionamos mais um nome de classe ao parágrafo acima: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
<!--
function adicionarClasse(){
$('#parag').addClass("destaque2");
}
//-->
</script>
Agora o parágrafo com o id "parag" pertence às classes destaque e destaque2. Isso permite uma combinação bem interessante de estilos CSS. Se precisar adicionar mais de um nome de classe ao mesmo tempo, basta separá-las com um espaço. Veja: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
<!--
function adicionarClasse(){
$('#parag').addClass("destaque2 destaque3");
}
//-->
</script>
O retorno deste método é um objeto jQuery que poderá ser usado para fins de encadeamento de chamadas de métodos. |
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: 13630 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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 com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
<!--
function ocultarExibir(){
$("#div_1").toggleClass("oculta");
}
//-->
</script>
|
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 HTMLQuantidade de visualizações: 432 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. |
Veja mais Dicas e truques de jQuery |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga 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 funcionalidadesTenha 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 |
