Manipulações do DOM com jQuery - 1
Manipulações do DOM com jQuery
Manipulações do DOM com jQuery - 1 é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 1. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 1 aulas no total.
Introdução aos métodos
Olá,
Até agora, vimos para que serve o jQuery e como usar o seletor.
Agora vamos conhecer os métodos que nos permitem manipular o DOM.
método text
método text()
Usamos o método text() para acessar o conteúdo de um elemento HTML.
Use $ (selector).text() para ler o conteúdo de um elemento.
Além disso, o método text é usado para atualizar o conteúdo de um elemento. Basta passar o novo conteúdo ao método text como argumento.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
Pergunta
método html
método html()
Nosso próximo método é html().
Como podemos entender pelo nome, ele fornece o elemento inteiro, em vez de apenas o conteúdo do elemento que escolhemos.
Vamos definir um elemento HTML de exemplo abaixo.
Dois elementos HTML com os identificadores base e target foram definidos. Em seguida, assim que o DOM for carregado.
Todo o conteúdo HTML do elemento base foi copiado e adicionado ao elemento com o identificador target
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>Seletor de atributos
método attr()
Usamos atributos para definir comportamentos adicionais aos elementos HTML.
Na maioria das vezes, podemos querer acessar os valores desses atributos ao escrever nosso código JavaScript.
Nesses casos, usamos o método attr.
Vamos aprender esse método criando um exemplo abaixo.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>Atributo
O processo de definir novos atributos é semelhante ao dos métodos text() e html() que aprendemos anteriormente.
Ao passar um argumento para o método attr() que usamos durante a leitura, podemos definir um novo atributo para o elemento-alvo.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
Aprendemos a adicionar um atributo;
agora, vamos ver como excluir um atributo existente.
Para isso, usaremos o método removeAttr().
Vamos analisar nosso exemplo.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));método val
método val()
Os formulários são indispensáveis para as aplicações Web modernas. Usaremos o método val() para ler os dados inseridos pelos usuários nos elementos do formulário.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>Aviso
Em nossa lição sobre gerenciamento de eventos, aprenderemos a escutar cada dado de entrada e exibi-lo em nosso elemento span.
Informação adicional
Para atualizar o valor de um input, passamos argumentos ao método val, como você deve ter imaginado.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')Parabéns
Parabéns 🎉
Começamos a aprender sobre manipulações do DOM
Na próxima seção, continuaremos aprendendo sobre manipulações do DOM no jQuery.
Perguntas Frequentes
A aula “Manipulações do DOM com jQuery - 1” é grátis?
Sim — o texto completo de “Manipulações do DOM com jQuery - 1” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 1 aulas no total.
O que vou aprender em “Manipulações do DOM com jQuery - 1”?
Manipulações do DOM com jQuery Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 1.
Quanto tempo leva a aula “Manipulações do DOM com jQuery - 1”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de jQuery Academy?
Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.