Manipular o DOM

Manipular o conteúdo de elementos

O jQuery possui 3 métodos para manipulação do conteúdo dos elementos HTML:

text(): define ou devolve o conteúdo de texto de um elemento
html(): define ou devolve o conteúdo de texto e/ou html de um elemento
val(): define ou devolve o valor dos campos de um formulário

.text()

Define ou devolve o conteúdo de texto de um elemento:

Exemplo 1:

Obtém o conteúdo de texto de um elemento com o id “test”:

<script  
alert("Text: " + $("#test").text()); 
</script> 

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

Exemplo 2:

Define o conteúdo de texto de um elemento com o id “test”:

<script  
$("#test").text("This is another text."); 
</script> 

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

.html()

Define ou devolve o conteúdo de texto e/ou html de um elemento.

Exemplo 1:

Obtém o conteúdo de html de um elemento com o id “test”:

<script  
alert("HTML: " + $("#test").html()); 
</script> 

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

Exemplo 2:

Define o conteúdo de html de um elemento com o id “test”:

<script  
$("#test").html("<b><i>This is another text</i></b>."); 
</script> 

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

.val()

Define ou devolve o valor dos campos de um formulário.

Quando usado para ler valores, retorna o valor do primeiro dos elementos definidos no seletor.

Quando usado para definir valores, define o valor para todos os elementos definidos no selector.

Exemplo 1:

Obtém o conteúdo de um elemento com o id “nome”;

<script> 
alert("Value: " + $("#nome").val()); 
</script> 

<input type="texto" id="nome" name="nome">

Exemplo 2:

Lê o valor do elemento input type radio selecionado:

<script> 
alert( $("input[type='radio']:checked").val() ); 
</script> 

Sexo: <input type="radio" id="m" name="sexo" value="m">Masc 
<input type="radio" id="f" name="sexo" value="f">Fem

Exemplo 3:

Lê os valores dos elementos input type checkbox selecionados:

<script> 
//obtem valores de todas as checkboxes checkadas 
$("input[type='checkbox']:checked").each(function() { 
alert( $(this).val() ); 
}); 
</script> 

Habilitações: <input type="checkbox" name="licenciatura" value="l">Licenciatura  
<input type="checkbox" name="mestrado" value="m">Mestrado 
<input type="checkbox" name="doutoramento" value="d">Doutoramento

Manipular os atributos de elementos

.attr()

O método attr() é usado para obter valores de atributos de elementos. Consideremos um elemento com o id=”w3s”:

Exemplo 1:

O exemplo a seguir demonstra como obter o valor do atributo href de um link:

alert($("#w3s").attr("href"));

Exemplo 2:

O exemplo a seguir demonstra como alterar (set) o valor do atributo href de um link:

$(document).ready(function(){ 
   $("#w3s").attr("href","https://codenet.pt/jquery"); 
});

Exemplo 3:

O método attr () também permite definir vários atributos ao mesmo tempo.

O exemplo a seguir demonstra como definir a href e atributos de título ao mesmo tempo:

$(document).ready(function(){ 
   $("#w3s").attr({                              
      "href" : "https://codenet.pt/jquery", 
      "title" : "Codenet jQuery Tutorial" 
   }); 
});

Adicionar conteúdo de HTML

O jQuery possui 4 métodos que servem para adicionar novo conteúdo (elementos, html…):

append(): insere o conteúdo no final do(s) elemento(s) seleccionado(s)
prepend(): insere o conteúdo no inicio do(s) elemento(s) seleccionado(s)
after(): insere o conteúdo depois do(s) elemento(s) seleccionado(s)
before(): insere o conteúdo antes do(s) elemento(s) seleccionado(s)

.append()

Insere o conteúdo no final do(s) elemento(s) seleccionado(s).

Exemplo:

Considere-se o seguinte HTML:

<p id="p1">Texto qualquer...</p> 
<div id="divText"> 
   <p>texto qualquer...</p> 
</div>

Vamos adicionar um elemento <p> com o id=”p1” na <div> com o id=”divText” :

$(document).ready(function(){ 
   $("#divText").append($("#p1")); 
});

Irá dar origem ao seguinte HTML:

<div id="divText"> 
   <p>texto qualquer...</p> 
   <p id="p1">Texto qualquer...</p> 
</div>

.prepend()

Insere o conteúdo no inicio do(s) elemento(s) seleccionado(s).

Exemplo:

Considere-se o seguinte HTML:

<p id="p1">Texto qualquer...</p> 
<div id="divText"> 
   <p>texto qualquer...</p> 
</div>

Vamos adicionar um elemento <p> com o id=”p1” na <div> com o id=”divText” :

$(document).ready(function(){ 
   $("#divText").prepend("#p1"); 
});

Irá dar origem ao seguinte HTML:

<div id="divText"> 
   <p id="p1">Texto qualquer...</p> 
   <p>texto qualquer...</p> 
</div>

.after()

Insere o conteúdo depois do(s) elemento(s) seleccionado(s).

Exemplo 1:

Considere o seguinte HTML:

<div class="container"> 
   <h2>Greetings</h2> 
   <div class="inner">Hello</div> 
   <div class="inner">Goodbye</div> 
</div>

Vamos adicionar um elemento após os elementos com a class=”inner”:

$(document).ready(function(){ 
   $('.inner').after('<p>Test</p>'); 
});

Irá dar origem ao seguinte HTML:

<div class="container"> 
   <h2>Greetings</h2> 
   <div class="inner">Hello</div> 
   <p>Test</p> 
   <div class="inner">Goodbye</div> 
   <p>Test</p> 
</div>

Exemplo 2:

Neste exemplo vamos adicionar vários elementos depois de um elemento <img>:

function afterText(){ 
   var txt1="<b>I </b>";                    
   var txt2=$("<i></i>").text("love ");     
   var txt3=document.createElement("big");   
   txt3.innerHTML="jQuery!"; 
   $("img").after(txt1,txt2,txt3);           
}

.before()

Adiciona o conteúdo antes do(s) elemento(s) seleccionado(s).

Exemplo :

Considere o seguinte HTML:

<div class="container"> 
   <h2>Greetings</h2> 
   <div class="inner">Hello</div> 
   <div class="inner">Goodbye</div> 
</div>

Vamos adicionar um elemento <p> antes dos elementos com a class=”inner”:

$(document).ready(function(){ 
   $('.inner').before('<p>Test</p>'); 
});

Irá dar origem ao seguinte HTML:

<div class="container"> 
   <h2>Greetings</h2> 
   <p>Test</p> 
   <div class="inner">Hello</div> 
   <p>Test</p> 
   <div class="inner">Goodbye</div> 
</div>

Remover conteúdo de HTML

O jQuery possui dois métodos para remover elementos e conteúdos:

remove(): remove o elemento selecionado e seus elementos filho
empty(): remove os elementos filho do elemento selecionado

.remove()

Remove o elemento selecionado e seus elementos filho.

Exemplo:

O exemplo seguinte remove o elemento com o id=”div1” e todos os seus elementos filho:

$(document).ready(function(){ 
   $("#div1").remove(); 
});

Filtrar os elementos a remover

O método remove() também aceita um parâmetro, que permite filtrar os elementos a serem removidos.

O parâmetro pode ser qualquer um qualquer seletor válido em jQuery.

Exemplo:

O exemplo a seguir remove todos os elementos <p> com class = “itálico”:

$(document).ready(function(){ 
   $("p").remove(".italic"); 
});

.empty()

Remove os elementos filho do elemento selecionado.

Exemplo:

O exemplo seguinte remove todos os elementos filho do elemento com o id=”div1”:

$(document).ready(function(){ 
   $("#div1").empty(); 
});

Seleção por filtragem

Os três métodos de filtragem mais básicos são first(), last() e eq(), que permite que você selecione um elemento específico com base na sua posição num grupo de elementos.

Outros métodos de filtragem, como filter() e not() permite que se selecionem os elementos que correspondem ou não correspondem, a determinados critérios.

first()

O método first() devolve o primeiro elemento dos elementos selecionados.

Exemplo:

O exemplo a seguir seleciona o primeiro elemento <p> dentro do primeiro elemento <div>:

$(document).ready(function(){ 
   $("div p").first(); 
});

last()

O método last() devolve o último elemento dos elementos selecionados.

Exemplo :

O exemplo a seguir seleciona o último elemento <p> dentro do último elemento <div>:

$(document).ready(function(){ 
   $("div p").last(); 
});

eq()

O método eq() devolve um elemento com um número de índice específico dos elementos selecionados.

Os números índices começam em 0, então o primeiro elemento terá o número de índice 0 e não 1.

Exemplo :

O exemplo a seguir seleciona o segundo elemento <p> (número de índice 1):

$(document).ready(function(){ 
   $("p").eq(1); 
});

filter()

O método filter() permite que especificar um critério. Elementos que não correspondem aos critérios são removidos da seleção, e os que correspondam serão devolvidos.

Exemplo :

O exemplo a seguir retorna todos os elementos <p> com nome da classe “intro”:

$(document).ready(function(){ 
   $("p").filter(".intro"); 
});

not()

O método not() devolve todos os elementos que não correspondem aos critérios.

Dica: O método not() é o oposto de filter().

Exemplo :

O exemplo a seguir retorna todos os elementos <p> que não têm o nome da classe “intro”:

$(document).ready(function(){ 
   $("p").not(".intro"); 
});