Segunda Apresentação jQuery

982 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
982
On SlideShare
0
From Embeds
0
Number of Embeds
182
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Segunda Apresentação jQuery

  1. 1. In the previous presentation.... Vimos como selecionar elementos da página $(“img”) $().add() $().filter() $().slice() $().find() $(“#Id”) $(“li a”) $(“:input:checkbox”) $(“:checkbox:checked”)
  2. 2. Agora vamos ver como: Manipular atributos e conteúdo de elementos ou conjuntos de elementos na página
  3. 3. $().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' });
  4. 4. $().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');
  5. 5. $().addClass(name | function) $().removeClass(name | function) $('p').addClass('classeBolha'); $('p').removeClass('classeBolha classeWende'); $('p').addClass('classeWende'); $('p').addClass('classeBolha classeWende');
  6. 6. $().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">
  7. 7. $().css(name | name,value | map | name,function) $(':input').css('width', function() { return $(this).width() + 20 + "px"; });
  8. 8. $().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>
  9. 9. $().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>
  10. 10. $().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>
  11. 11. $().val(value) <label for="email">Email: <input type="text" id="email" /></label> $('input#email').val('douglas@bluesoft.com.br');
  12. 12. Obrigado!

×