 |
|
||||
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: 511 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. |
 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 |
Como remover atributos dos elementos HTML usando a função removeAttr() do jQueryQuantidade de visualizações: 17305 vezes |
O método removeAttr() da biblioteca jQuery nos permite remover um determinado atributo dos elementos HTML retornados sob uma determinada condição. Veja um trecho de código que remove o atributo disabled 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 removerAtributo(){
// remove o atributo disabled da
// caixa de texto com id "nome"
$('#nome').removeAttr("disabled");
}
//-->
</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 ::: 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 ::: 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 ::: 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 ::: 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 ::: 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 |
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>
|
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Postura ética profissional A ética na engenharia envolve muitas questões, entre elas o estudo das decisões, das políticas e dos valores que são moralmente desejáveis na prática dessa profissão. Sendo assim, estudar ética na engenharia tem como objetivo: A) Capacitar os engenheiros a identificarem oportunidades para que seus projetos sejam aceitos. B) Capacitar os engenheiros a enfrentarem a complexidade moral envolvida nas decisões e ações do exercício. C) Priorizar a conformidade com normas técnicas em detrimento de considerações éticas mais amplas. D) Minimizar a importância do consentimento informado em projetos que impactam comunidades locais. E) Priorizar sempre o lucro das empresas sobre os valores éticos na execução de projetos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Vidros Qual dos processos abaixo não é utilizado para modificar o vidro: A) Esmerilhagem. B) Gravação. C) Queima. D) Furação. E) Têmpera. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Aglomerantes Definimos a cal metalúrgica como: A) Produto da hidratação da cal viva. B) Mistura de escórias de alto forno com cal hidráulica. C) Mistura de cinzas vulcânicas com cal hidratada. D) Sulfatos hidratados e anidros de cálcio. E) Calcinação de rochas calcárias que contenham proporção de materiais argilosos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Topografia |
| Azimute e Rumo FCC-2014 - Na realização de um levantamento topográfico, foi determinado o azimute para o alinhamento 0-1, igual a 295º 32'. O rumo para este alinhamento é de: A) 25º 32'. B) 64º 28'. C) 25º 32' NW D) 64º 28' NW E) 295º 32' NW Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Formas: Confecção e colocação Em relação aos materiais utilizados para formas, assinale a alternativa correta. A) A fibra de vidro é muito utilizada para pilares e vigas. B) Formas em poliestireno expandido são altamente reaproveitadas. C) Vidro é muito utilizado para concreto aparente. D) Tubos de papelão são muito usados em pilares de seção circular e em estruturas com caixão perdido. E) As tábuas são os materiais que proporcionam o maior reaproveitamento. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de jQuery |
Dicas e truques de outras linguagens |
|
Python - Como calcular o coeficiente angular de uma reta em Python dados dois pontos no plano cartesiano MySQL - Como usar joins no MySQL |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
