marcoszf
11/24/2013 - 6:03 PM

JQUERY-HTML [ .addClass | .removeClass | .append | .prepend | .after | .before | .attr | .html | .remove | .removeAttr | .text | .empty ]

JQUERY-HTML [ .addClass | .removeClass | .append | .prepend | .after | .before | .attr | .html | .remove | .removeAttr | .text | .empty ]

/* FUNÇÕES FUNÇÕES FUNÇÕES http://api.jquery.com */

location.reload(); //reload página atual

/* addClass() */
.addClass( className ) //Adidiciona a classe escificada para cada elemento associado.
$('#um').addClass('selected'); //Adiciona a classe .selected que deve ser definida no css ao elemento de id="um"
/* removeClass() */
.removeClass( [className ] ) //remove uma única classe, muitas classes, ou todas as classes de cada elemento de um conjunto de elementos associados
$("#vlr").removeClass("padrao"); //remove a classe .padrao que está atribuída ao elemento #vlr
$("#vlr").removeClass("padrao padraob").addClass("padraoc"); //removendo duas classes (padrao padraob) e adicionando (padraoc).

/* .append() ou addendTo() */
.append( content [, content ]) //Insere conteúdo especificado pelo parâmetro no final(dentro) de cada elemento associado.
$( ".inner" ).append( "<p>Test</p>" ); //ex: insere ao final dos elementos que compõe a classe .inner
/* prepend() ou prependTo() */
.prepend( content [, content ]) //Insere conteúdo especificado pelo parâmetro no inicio(dentro) de cada elemento associado.
$( ".inner" ).prepend( "<p>Test</p>" ); //ex: insere no inicio dos elementos que compõe a classe .inner

/* after() ou insertAfter() */
.after( content [, content ] ) //insere conteúdo especificado no parametro após cada elemento associado.
$('#um').after('<p>conteudo</p>'); //insere o conteúdo após o elemento id="um"
/* before() ou insertBefore() */
.before( content [, content ] ) //insere conteúdo especificado no parametro antes de cada elemento associado.
$('#um').before('<p>conteudo</p>'); //insere o conteúdo antes do elemento id="um"

/* attr() */
.attr( attributeName ) //Obtém o valor de um atributo, mas somente do primeiro elemento associado.
.attr( attributeName, value ) //Define um ou mais atributos para o elemento associado.
console.log($(".um").attr("width")); //imprime no console o valor de width que foi definido no primeiro elemento da classe .um

/* empty() */
.empty() //Remove todos os elementos filhos do elemento associado (obs. este método não aceita argumento)
$("p").empty(); //Remove apenas o conteúdo de todas as tag <p> deixando vazias
$("div#wrapp").empty(); //Remove todo o conteúdo dentro de <div id="wrapp"> (incluindo as tags) deixando apenas a div vazia.

/* hasClass() */
.hasClass( className ) //Verifica se o elemento associado está associado a dada classe. retornando true ou false
console.log($("#um").hasClass("qlqcoisa")); //Imprime no console true se a classe .qlqcoisa estiver associada ao elemento com id="um".

/* html() */
.html() //obtém o conteúdo do primeiro elemento do conjunto de elementos associados
.html( htmlString ) //Define o conteúdo de cada elemento do conjunto de elementos associados(substitui todo o conteúdo que havia antes)
console.log($("div#wrapp").html()); //imprime no console todo conteúdo html que está dentro de <div id="wrapp">
$("div#wrapp").html("<p>Oi eu sou o Goku</p>"); //Substitui todo conteúdo que está dentro de <div id="wrapp"> por <p>Oi eu sou o Goku</p>

/* remove() */
.remove( [selector ] ) //remove o conjunto de elementos associados.
$("div#wrapp").remove(); //remove a <div id="wrapp"> e tudo que contém dentro.

/* removeAttr() */
.removeAttr( attributeName ) //Remove um atributo de cada elemento do conjunto dos elementos associados
$("#btn").removeAttr("value"); //remove o atributo value do elemento com id="btn"

/* text() */
.text() //obtém a combinação de cada elemento do conjunto de elementos associados, incluindo seus descendentes.
console.log($("#wrapp").text()); //imprime no console a combinação de todos os textos dentro do elemento #wrapp.
.text( textString ); //Define o conteúdo de cada elemento do conjunto de elementos associados para o texto especificado (textString).
$(".wrapp").text("Conteudo inserido"); //substitui todos os conteúdos de .wrapp para o texto ("Conteudo inserido").

/*Acessando atributos Data*/
<a id='foo' data-role="button" href="#page3" data-icon="gear" data-transition="none" data-iconpos="left"></a>

$('#foo').data('role'); //will return button
$('#foo').data('role', 'page') // will change the data-role attribute to 'page'
$('#foo').data('values', { foo: 'bar', num: 12}); //will store the json object into data-values attribute
$('#foo').data('values').num //will return the value inside your json : 12 (and not '12', .data() is trying to return the right value type)
$('#foo').data( { baz: 'foo' }); //will add baz to the previous stored element (values)
- See more at: http://www.tipsfromsiliconvalley.com/2013/06/17/jquery-guide-10-best-practices-with-jquery-1-7-for-front-end-developers/#sthash.ro6IAa52.dpuf