Conteúdo principal
Programação
Curso: Programação > Unidade 7
Lição 3: Modificação DOM com jQueryRevisão: Modificação DOM com jQuery
Quando você tiver encontrado uma coleção de elementos usando a função jQuery, você pode alterá-los usando vários métodos.
Defina atributos com
attr()
:$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com");
(Veja exemplo)Altere estilos de CSS styles com
css()
:$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", "color": "red"});
(Veja exemplo)Você também pode criar novos elementos do zero passando uma string de código HTML para a função jQuery:
var $p = $("<p>");
Se quiser, você pode passar o HTML completo, incluindo o conteúdo das tags, atributos e estilos.
var $p = $('<p style="color:red;">Eu amo pessoas que amam gatos.</p>');
Quando você cria um elemento, é possível modificá-lo usando qualquer um dos métodos acima:
$p.addClass("warning");
E então você anexa a um elemento existente usando
append()
:$("#main-div").append($p);
(Veja exemplo)Leia a documentação do jQuery para mais detalhes sobre cada um desses métodos, seguindo os links com os nomes dos métodos acima. Não vamos conseguir abordar tudo aqui, e como as melhores práticas do desenvolvimento web mudam rápido, você precisa se acostumar a ler a documentação para se manter atualizado. É bom começar a fazer isso agora!
Quer participar da conversa?
- qual a diferença de usar aspas duplas e usar aspas simples?(4 votos)
- Olá Wagner. No jQuery não tem diferença, mas você tem que padronizar, se usar simples, tem que terminar com a simples. Agora no exemplo acima que passa uma linha de HTML, como os valores dos seus atributos dele tem que ser com aspas duplas, optou-se pela simples para não conflitar. Espero ter ajudado.(5 votos)