 |
|
Você está aqui: 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: 403 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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. |
 Link para compartilhar na Internet ou com seus amigos: |
jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML |
Como obter o valor da propriedade class CSS de um elemento HTML usando jQueryQuantidade de visualizações: 11261 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>
|
jQuery ::: Dicas & Truques ::: AJAX |
Apostila jQuery para iniciantes - Como fazer requisições assíncronas usando o método ajax() do jQueryQuantidade de visualizações: 19016 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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<?
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 com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <?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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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 |
jQuery para iniciantes - Como obter o conteúdo de um elemento HTML usando a função html() do jQueryQuantidade de visualizações: 9322 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 com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <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 com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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. |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Densidade de um fluido Um fluido encontra-se em um recipiente com volume de 300L. Sabendo que a massa desse fluido é de 2kg, qual a sua densidade em kg/m3? A) 0,67kg/m3. B) 6,67kg/m3. C) 0,15kg/m3. D) 150kg/m3. E) 151,5kg/m3. 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 Engenharia Civil - Estruturas de Aço e Madeira |
| O aço no edifício A estrutura de estabilização da moldura estrutural da edificação da figura a seguir, que é formada por paredes rígidas, feitas de aço, concreto ou alvenaria de concreto armado, pode ser chamada de:  A) Estrutura contraventada. B) Moldura amarrada excentricamente. C) Moldura resistente a momentos. D) Paredes de cisalhamento. E) Nenhuma das alternativas anteriores. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| O projeto de instalação hidrossanitária Um projeto de instalações hidrossanitárias é composto por redes hidráulicas (constituído de água fria e água quente), bem como redes sanitárias (esgoto), ventilação e rede pluvial. Para obras de grande porte, o projeto de proteção contra incêndio também está englobado no projeto de instalação hidrossanitária. Sobre as instalações hidrossanitárias em uma obra de pequeno porte, assinale a afirmativa correta: A) No projeto de esgotamento, a fossa séptica é aplicada para que as águas servidas convertam totalmente a matéria orgânica em gases. B) Alterações de percurso e de extensão não afetam o dimensionamento dos tubos de abastecimento de água, desde que não exista alteração de diâmetro. C) O shaft normalmente é acessível por painéis removíveis ou aberturas que permitem a verificação horizontal do abastecimento de todos os pavimentos do edifício em um só local. D) Um dos papéis do fecho hídrico do sifão sanitário é barrar a passagem de gases (odores) para o ambiente. E) É recomendável que se utilize o diâmetro mínimo de 100mm em toda a tubulação para evitar entupimentos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Fenômeno de Transportes De uma grande barragem, parte uma canalização de 250mm de diâmetro, de onde a água passa para a atmosfera sob a forma de jato. A vazão deste jato é 360L/s. Calcular a velocidade Vj do jato e a altura (H) na barragem. Considere que não há perda de energia no processo e que a velocidade de decaimento do nível da barragem é nula.  A) Vj = 7,33m/s e H = 2,74m. B) Vj = 1,83m/s e H = 0,17m. C) Vj = 2,46m/s e H = 0,31m. D) Vj = 7,33m/s e H = 0,37m, E) Vj =7,33 X 10-3m/s e H = 2,74 X 10-6m. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de jQuery |
Dicas e truques de outras linguagens |
|
Java - Como adicionar ou subtrair dias de uma data e hora usando o método add() da classe Calendar do Java |
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 |
