Jquery – Principais comandos para manipulação do DOM

  •  seletorjQuery.attr.(atributo)  – $(‘h1’).attr(‘title’)

Retorna o valor do atributo do seletor jQuery em questão. No exemplo acima, retorna o title  do elemento h1. Se o atributo não foi definido, o retorno será undefined.

  • seletorjQuery.attr({atributo:valor}) – $(‘h1’).attr({‘title:”novo titulo” ‘})

Atribue um novo valor ao atributo mencionado para o seletor jQuery em questão. Você pode trabalhar com mais de um atributo, sempre separando-os por vírgula. Exemplo: $(‘img’).attr({‘title:”novo titulo”,  alt:”imagem” ‘})

  • seletorjQuery.attr(atributo,valor) – $(‘h1’).attr({‘title’, ‘novo titulo’})

Atribue um novo valor ao atributo mencionado para o seletor jQuery em questão. Funciona como o exemplo anterior, mas não permite que mais de um atributo seja passado ao seletor jQuery ao mesmo tempo.

  • seletorjQuery.addClass(nome_da_classe_css) – $(‘h1’).addClass(‘nova_classe’)

Atribue uma nova classe  para o seletor jQuery em questão.

  • seletorjQuery.removeClass(nome_da_classe_css) – $(‘h1’).removeClass(‘nova_classe’)

Remove a classe mencionada  para o seletor jQuery em questão.

  • seletorjQuery.hasClass(nome_da_classe_css) – $(‘h1’).hasClass(‘nova_classe’)

Retorna um valor TRUE ou FALSE após verificar de o seletor Jquery em questão possui a classe menciona atribuiada ao mesmo.

  • seletorjQuery.toogleClass(nome_da_classe_css) – $(‘h1’).toogleClass(‘nova_classe’)

Acessa o seletor jQuery mencionado e adiciona a classe, se ela não estiver vinculada a este elemento, ou a remove, caso ela estiver vinculada ao mesmo.

  • seletorjQuery.html(valor) – $(‘div’).html(‘<p>Sou um parágrafo que está sendo inserido</p>’)

Adiciona ao seletor jquery em questão um “valor html”. No exemplo acima, adicionaremos a uma div o parágrafo acima.

  • seletorjQuery.html() – $(‘div’).html()

Acessa o conteúdo html – marcação e conteúdo – do seletor jQuery em questão.

  • seletorjQuery.text() – $(‘div’).text()

Acessa APENAS o conteúdo textual do seletor jQuery em questão.

  • seletorjQuery.text(valor) – $(‘div’).html(‘<p>Sou um parágrafo que está sendo inserido</p>’)

Adiciona ao seletor jquery em questão um conteúdo textual definido em valor. No exemplo acima, caso aplicado, todo o valor (<p>Sou um parágrafo que está sendo inserido</p>) seria inserido como uma string, ou seja, a marcação de parágrafo é ignorada e insere-se tudo como uma string.

  • seletorjQuery.val() – $(‘input’).val()

Acessa o valor do atributo value do seletor jquery mencionado.

  • seletorjQuery.val(‘valor’) – $(‘input’).val(‘valor’)

Passa ao seletor jQuery o valor mencionado como um novo value.

  • seletorjQuery.append(‘conteúdo’) – $(‘div’).append(‘<p> eu sou um parágrafo</p>’)

Adiciona, imediatamente APÓS o último CONTEÚDO do elemento do seletor jQuery, o conteúdo definido.

  • conteúdo.appendto(‘seletorJquery’) – $(‘<p> eu sou um parágrafo</p>’).appendTo(‘div’)

Adiciona, imediatamente APÓS o último CONTEÚDO do elemento do seletor jQuery, o conteúdo definido. Tem a mesma  função do anterior, com uma sintaxe diferente.

  • conteúdo.prependTo(‘seletorJquery’) – $(‘<p> eu sou um parágrafo</p>’).prependTo(‘div’)

Equivalente ao método anterior adiciona, ANTES do CONTEÚDO do elemento do seletor jQuery, o conteúdo definido.

  • conteúdo.insertAfter(‘seletorJquery’) – $(‘<p> eu sou um parágrafo</p>’).insertAfter(‘div’)

Adiciona, imediatamente APÓS o SELETOR jQuery, o conteúdo definido.

  • conteúdo.insertBefore(‘seletorJquery’) – $(‘<p> eu sou um parágrafo</p>’).insertBefore(‘div’)

De maneira análoga ao exemplo anterior, adiciona,ANTES do SELETOR jQuery, o conteúdo definido.

  • seletorJquery.wrap(‘container’) – $(‘p’).wrap(‘<div> </div>’)

Adiciona um container definido ao seletor jQuery definido.

  • seletorJquery.wrapAll(‘container’) – $(‘p’).wrapall(‘<div> </div>’)

Adiciona um container definido para todos os seletores jQuery definido. A diferença para o comando anterior é que, enquanto o primeira cria um container para cada parágrafo, como foi dado no exemplo, esse cria um único container que engloba todos os parágrafos da página.

  • seletorJquery.remove() – $(‘p’).remove()
  • seletorJquery.remove(‘atributo) – $(‘p’).remove(‘.removendo’)

Remove todos os elementos definidos da página. Opcionalmente, como você vê no segundo exemplo, pode-se usar atributos. No nosso caso, o exemplo 2 removeria todos os parágrafos definidos com classe “removendo” do documento.

  • seletorJquery.empty() – $(‘p’).empty()

Remove todo o conteúdo do seletor jquery menciondo.

  • seletorJquery.replaceWith(‘conteúdo’) – $(‘p’).replaceWith(‘<h1>Olá</h1>’)

Substitui o conteúdo do seletor jquery por outro conteúdo definido.

  • conteudo.replaceAll(seletorJquery) – $(‘<h1>Olá</h1>’).replaceAll(‘p’)

Substitui o conteúdo do seletor jquery por outro conteúdo definido. Trabalha da mesma maneira que o comando anterior, porém com outra sintaxe.

  • seletorJquery.clone() – $(‘p’).clone()

Cria um clone de um elemento jQuery.



// Comente!

comentários

eufacoprogramas

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

2 Comentários

// Siga as boas práticas: Comente!