Este documento descreve como manipular atributos e conteúdo de elementos na página usando jQuery. Ele explica como usar os métodos .attr(), .removeAttr(), .addClass(), .removeClass(), .toggleClass(), .css(), .html(), .text(), .append(), e .val() para modificar atributos, classes, estilos, conteúdo e valores de elementos selecionados.

2. In the previous presentation....
Vimos como selecionar elementos da página
$(“img”) $().add()
$().filter()
$().slice()
$().find()
$(“#Id”)
$(“li a”)
$(“:input:checkbox”)
$(“:checkbox:checked”)

3. Agora vamos ver como:
Manipular atributos e conteúdo de elementos
ou conjuntos de elementos na página

4. $().attr(name | name,value | map |
name,function)
var title = $('img#fotoDoBolha')
$('img#fotoDoBolha').attr(
<img id="fotoDoBolha" src="foto.jpg" title="foto do Bolha" alt=”foto do quem?”/>
$('img#fotoDoBolha').attr({
$('img#fotoDoBolha').attr('title', function() {
.attr('title');
'title','foto do Rambo');
alt: 'Foto do Bolha',
title: 'Foto do Bolha'
});
return this.title + ' - o Rei do rio'
});

5. $().removeAttr(name)
<input type="text" id=”email” disabled="disabled"
value="Não dá pra digitar" />
$('input#email').removeAttr('disabled').attr('value',
'Agora dá pra digitar');

6. $().addClass(name | function)
$().removeClass(name | function)
$('p').addClass('classeBolha');
$('p').removeClass('classeBolha classeWende');
$('p').addClass('classeWende');
$('p').addClass('classeBolha classeWende');

7. $().toggleClass(name)
$().hasClass(name)
<div id="meuDiv" class="umaClasse outraClasse">
$('#meuDiv').hasClass('umaClasse');
$('#meuDiv').hasClass('outraClasse');
$('div.china').toggleClass('inBox');
<div class="china">
<div class="china inBox">
$('div.china').toggleClass(inBox');
<div class="china">

8. $().css(name | name,value | map |
name,function)
$(':input').css('width', function() {
return $(this).width() + 20 + "px";
});

9. $().html() $().html(html)
$().text() $().text(content)
$('div.container').html();
<div class="container">
<div class="classe1">Um texto qualquer</div>
<div class="classe2">Outro texto qualquer</div>
</div>
<div class="classe1">Um texto qualquer</div>
<div class="classe2">Outro texto qualquer</div>
<p><b>Um texto qualquer</b></p>
$('p').html("<span>Um outro texto qualquer</span>")
<p><span>Um outro texto qualquer</span></p>

10. $().append()
$('p').append('<p> O rei do rio fez churrasquinho do rato.</p>');
<p> O rei do rio foi pescar. <br>
Um rato entrou no barco com ele. <br>
O rato roeu a roupa do rei do rio.</p>
<p> O rei do rio foi pescar. <br>
Um rato entrou no barco com ele. <br>
O rato roeu a roupa do rei do rio.</p>
<p> O rei do rio fez churrasquinho do rato.</p>

11. $().val()
$('input:radio[name=opcao]:checked').val();
<input type="radio" name="opcao" value="op1"> opção1
<input type="radio" name="opcao" value="op2"> opção2
<input type="radio" name="opcao" value="op3"> opção3
$('select#class option:selected').val();
<select id="class">
<option value="1" >A</option>
<option value="2" >B</option>
<option value="3" >C</option>
<option value="4" >D</option>
</select>

12. $().val(value)
<label for="email">Email: <input type="text" id="email" /></label>
$('input#email').val('douglas@bluesoft.com.br');

13. Obrigado!