 |
|
||||
Você está aqui: jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico |
jQuery para iniciantes - Como retornar o conteúdo de um elemento HTML usando a função html() do jQueryQuantidade de visualizações: 9404 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. |
 Link para compartilhar na Internet ou com seus amigos: |
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 ::: 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: 7234 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 ::: Atributos ou Propriedades HTML |
Como remover uma classe (ou classes) de um elemento HTML usando a função removeClass() do jQueryQuantidade de visualizações: 660 vezes |
Muitas vezes precisamos remover uma ou mais classes de um elemento HTML. Para isso nós podemos usar o método removeClass() 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 removerClass(){
// remove a classe "destaque" do parágrafo
// com o id "parag"
$('#parag').removeClass("destaque");
}
//-->
</script>
Se quisermos remover mais de uma classe ao mesmo tempo, basta separá-las por espaços no argumento para o método. O retorno deste 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 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 ::: 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 prependTo() do jQuery para adicionar todo o conteúdo de um elemento ao final de outro elemento HTMLQuantidade de visualizações: 7296 vezes |
|
O método prependTo() é usado quando queremos adicionar todo o conteúdo dos elementos retornados sob uma determinada condição no início de outro ou outros elementos HTML. Veja um trecho de código no qual adicionamos o conteúdo de um parágrafo no início 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 = "Mais uma linha.<br>";
$("#parag").prependTo("#div_1");
}
//-->
</script>
O método prependTo() 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 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: 456 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 ::: AJAX |
Apostila jQuery - Quais as diferenças entre os métodos ajax(), get() e post() do jQuery?Quantidade de visualizações: 10827 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 |
| Cálculo de vigas-parede Vigas-parede, quando dimensionadas pelo método aproximado das bielas e tirantes, devem ter o concreto na região dos apoios e na região de inclinação das bielas verificadas quanto à sua resistência. Considere uma viga-parede biapoiada de 3,0m de vão, 2,0m de altura e 15cm de espessura, submetida a uma carga distribuída de 45kN/m2 em sua face superior. A tensão no apoio (σd) e a tensão na biela inclinada (σ2d), para apoios de 20cm e altura d' em 5,5cm, são, respectivamente, iguais a: A) 3.150kN/m2 e 3.158kN/m2. B) 3.150kN/m2 e 3.558kN/m2. C) 3.350kN/m2 e 3.158kN/m2. D) 3.258kN/m2 e 4.158 kN/m2. E) 3.500kN/m2 e 3.850kN/m2. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Vidros Qual dos tipos abaixo não é um modelo de vidro: A) Float. B) Acrílico. C) Laminado. D) Aramado. E) Cromogênico. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Bombas hidráulicas As bombas hidráulicas são um grupo de máquinas hidráulicas muito comum em sistemas de abastecimento e distribuição de água de uma cidade. Resumidamente, as bombas captam água bruta e a transportam para uma estação de tratamento para que ela seja adequada aos parâmetros de potabilidade antes do fornecimento para os usuários. Sobre as bombas hidráulicas, o que é correto afirmar? A) As bombas hidráulicas podem ser dividas em: centrífugas, rotativas, de êmbolo e do tipo de poços profundos. B) As bombas hidráulicas podem ser dividas em: centrípetas, rotacionais, de pistão e do tipo poços largos-rasos. C) As bombas hidráulicas podem ser divididas em bombas de deslocamento positivo e bombas centrífugas. D) As bombas hidráulicas podem ser agrupadas junto com as turbinas hidráulicas no grupo de máquinas fixas. E) As bombas centrífugas não são muito utilizadas, apesar de sua aplicação em baixas pressões e altas vazões. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
| Qual função é usada para remover espaços no início e no fim de uma string em Python? A) length() B) strip() C) chop() D) trim() E) escape() Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
| Qual é a forma correta de se escrever o condicional if em JavaScript? A) if a == 10 then B) if (a == 10): C) if (a == 10) {} D) if a = 10: 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 |
