 |
|
||||
Você está aqui: jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML |
Como retornar valores dos atributos de um elemento HTML usando a função attr() do jQueryQuantidade de visualizações: 15873 vezes |
O exemplo abaixo mostra como obter os valores dos atributos de um elemento HTML usando a notação attr(). O retorno é uma string contendo o valor do atributo:----------------------------------------------------------------------
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 obterAtributo(){
// Este exemplo mostra como obter o valor do
// atributo value de uma caixa de texto com
// o id "nome"
var valor = $('#nome').attr("value");
window.alert(valor);
}
//-->
</script>
|
 Link para compartilhar na Internet ou com seus amigos: |
jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico |
Como definir o conteúdo HTML de um elemento usando a função html() do jQueryQuantidade de visualizações: 7776 vezes |
O método html("conteúdo") permite definir o conteúdo (innerHTML) de todos os elementos encontrados em uma determinada condição. Considere os seguintes elementos P:---------------------------------------------------------------------- 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>Sou o primeiro parágrafo</p> <p>Sou o segundo parágrafo</p> Veja agora o código JavaScript que define o conteúdo HTML destes dois parágrafos: ----------------------------------------------------------------------
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 definirInnerHTML(){
var texto = "<b>Veja este texto</b>";
// define o conteúdo para os elementos P
$('p').html(texto);
}
//-->
</script>
Lembre, porém, que a prática mais comum é definir o conteúdo HTML de um elemento identificado por um id. O retorno deste método é um objeto jQuery, que pode ser usado para possíveis encadeamentos de chamadas de métodos. |
jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico |
Como definir o conteúdo de um elemento HTML usando o método text() do jQueryQuantidade de visualizações: 7233 vezes |
O método text("conteudo") nos permite definir o conteúdo de um elemento HTML de forma muito simplificada. Veja um trecho de código que define o conteúdo de uma DIV com o id "div_1": ----------------------------------------------------------------------
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 definirTexto(){
var texto = "Veja este texto";
// Define o texto para o elemento DIV
$('#div_1').text(texto);
}
//-->
</script>
Lembre-se de que este método atuará em todos os elementos retornados sob uma determinada condição. Observe ainda que este método substitui "<" e ">" por "<" e ">". O retorno deste método é um objeto jQuery, que pode ser usado para possíveis encadeamentos de chamadas de métodos. |
jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico |
jQuery para iniciantes - Como obter o conteúdo de um elemento HTML usando a função html() do jQueryQuantidade de visualizações: 9403 vezes |
O método html() da biblioteca jQuery nos permite obter o conteúdo (a propriedade innerHTML) do primeiro da série de elementos encontrados. Considere o seguinte elemento DIV:---------------------------------------------------------------------- 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"> <button>Clique Aqui</button> </div> Veja agora o código JavaScript que obtém todo o conteúdo HTML entre as tags <div> e </div>: ----------------------------------------------------------------------
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>
</head>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<body>
<div id="div_1">
<button>Clique Aqui</button>
</div>
<script type="text/javascript">
var html = $("#div_1").html();
window.alert("O conteúdo HTML da tag DIV é: " + html);
</script>
</body>
</html>
Ao abrir esta página HTML você terá um resultado parecido com: O conteúdo HTML da tag DIV é: <button>Clique Aqui</button>. Esta dica foi revisada e testada no jQuery 3.6.0. |
jQuery ::: Dicas & Truques ::: AJAX |
Apostila jQuery para iniciantes - Como fazer requisições assíncronas usando o método ajax() do jQueryQuantidade de visualizações: 19102 vezes |
|
O jQuery fornece formas bem simples de se fazer requisições assíncronas usando AJAX. Uma destas formas é o método ajax(). Este método possui quase uma dezena de parâmetros adicionais e retorna um objeto XMLHttpRequest, que pode ser usado para fins de encadeamento ou cancelamento da requisição HTTP. Enquanto outras dicas cobrem todos os parâmetros deste método, aqui nos concentraremos apenas em escrever um exemplo completo de seu uso. Trata-se de uma aplicação que fará uma solicitação HTTP POST a um código PHP que retornará um arquivo XML com alguns valores. Vamos começar analisando o codigo PHP: ----------------------------------------------------------------------
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
----------------------------------------------------------------------
<?
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-Type: text/xml");
$nome = utf8_decode($_POST["nome"]);
$cidade = utf8_decode($_POST["cidade"]);
$estado = utf8_decode($_POST["estado"]);
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n";
echo "<pessoas>\n";
echo " <pessoa>\n";
echo " <nome>" . $nome . "</nome>\n";
echo " <cidade>" . $cidade . "</cidade>\n";
echo " <estado>" . $estado . "</estado>\n";
echo " </pessoa>\n";
echo "</pessoas>";
?>
Salve este código PHP como pesquisa.php. Tudo que ele faz é receber alguns parâmetros POST e usá-los para montar um arquivo XML. Em um determinado momento, o arquivo XML retornado poderá ser algo como: ---------------------------------------------------------------------- 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 ---------------------------------------------------------------------- <?xml version="1.0" encoding="iso-8859-1"?> <pessoas> <pessoa> <nome>OSMAR J. SILVA</nome> <cidade>GOIÂNIA</cidade> <estado>GO</estado> </pessoa> </pessoas> Fique de olho na estrutura deste arquivo XML enquanto progredimos. Veja agora uma página HTML completa que mostra como usar o método ajax() para se conectar a este código PHP e obter os dados gerados em forma de XML: ----------------------------------------------------------------------
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
----------------------------------------------------------------------
<html>
<head><title>Estudos jQuery</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<!-- Importa a biblioteca jQuery -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function carregarDados(){
var dados = {'nome': "Osmar J. Silva",
'cidade': "Goiânia",
'estado': "GO"}
$.ajax({
url: 'pesquisar.php',
type: 'post',
dataType: 'xml',
data: dados,
success: function(data){
$(data).find('pessoa').each(function(){
var nome = $(this).find('nome').text();
var cidade = $(this).find('cidade').text();
var estado = $(this).find('estado').text();
$("#parag").html("Nome: " + nome + "<br>");
$("#parag").append("Cidade: " + cidade + "<br>");
$("#parag").append("Estado: " + estado);
});
},
error: function(XMLHttpRequest, textStatus,
errorThrown){
window.alert('Houve um erro!');
}
});
}
</script>
</head>
<body>
<button onclick="carregarDados()">Carregar dados
</button>
<p id="parag"></p>
</body>
</html>
Veja como usamos os métodos find() e each() para acessar e percorrer os elementos XML. Estes métodos são encontrados na seção de métodos para percorrer o HTML DOM e o XML DOM. Para finalizar lembre-se de que o método ajax() retorna um objeto XMLHttpRequest. |
jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML |
Como obter o valor da propriedade class CSS de um elemento HTML usando jQueryQuantidade de visualizações: 11340 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 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 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>
|
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: 455 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 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").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. |
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 |
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. |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Número de Reynolds O parâmetro que determina se o regime de escoamento de um fluido é laminar ou turbulento recebe o nome de "número de Reynolds". Nesse contexto, analise as seguintes afirmativas com (V) para as verdadeiras e (F) para as falsas. ( ) I. Quando Re ≤ Re,Crítico , o escoamento é considerado turbulento. ( ) II. O escoamento turbulento é caracterizado por camadas paralelas. ( ) III. O escoamento turbulento é aquele em que as partículas do fluido se misturam rapidamente enquanto se movimentam. ( ) IV. O número de Reynolds pode ser calculado pela equação: Re = γ × g × V. ( ) V. Para tubos com paredes lisas, Re,Crítico = 40.000. Marque a alternativa com a ordem correta. A) V, F, F, V, F. B) V, F, V, F, F. C) F, F, V, F, V. D) F, V, F, V, V. E) V, V, V, F, F. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
Analise o seguinte código JavaScriptvar a = new Array(); var b = new Array(); a[1] = 3; b[2] = 5; a = b; Quais valores estão contidos em a[1] e a[2] depois da execução deste código? A) a[1] é 3 e a[2] é 5. B) a[1] é indefinido e a[2] é 5. C) ambos a[1] e a[2] são indefinidos. D) A execução deste código provoca um erro. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Hidrostática |
| Princípios da Hidrostática A prática de atividade física na água aquecida traz muitos efeitos terapêuticos benéficos, como o relaxamento, a analgesia e a redução do impacto nas articulações. Despreze os efeitos da variação da temperatura e da variação do volume corporal durante a inspiração e a expiração e saiba que: g = 10m/s2 d (água) = 1g/cm3 d (corpo humano) = 0,93g/cm3 Um objeto deverá ficar emerso sobre uma pessoa com massa igual a 70kg para mantê-la completamente submersa e em equilíbrio, flutuando horizontalmente sob a superfície da água de uma piscina térmica. Qual o módulo do peso desse objeto? A) 52,7N. B) 23,8N. C) 45,6N. D) 68,1N. E) 14,8N. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Perda de Carga Localizada, Acessórios de Tubulação Qual a perda de carga singular em um conduto de 100 m, diâmetro de 100 mm, com um fluido escoando a 2 m/s, apresentando as seguintes singularidades rosqueadas na tubulação: válvula globo totalmente aberta e cotovelo de 45º com raio normal? Selecione a resposta: A) 1,16 m. B) 0,61 m. C) 0,06 m. D) 1,22 m. E) 0,00 m. 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 Os materiais podem ser de várias classes de acordo com as suas propriedades. O objetivo de estudar suas tecnologias consiste em: A) controlar precisamente e individualmente os átomos para fabricar materiais com propriedades e desempenho específicos. B) fabricar materiais com novas propriedades. C) controlar as propriedades dos materiais. D) estudar e produzir materiais a nível macro para fabricar materiais com propriedades específicas. E) controlar os átomos, em geral, para fabricar materiais com desempenho específico. 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 |
